Bootstrap-Responsive layout

First, navigation bar

1,

<navclass= "NavBar navbar-default navbar-fixed-top"role= "Navigation">    <Divclass= "Container">        <Divclass= "Navbar-header">            <Buttontype= "button"class= "Navbar-toggle"Data-toggle= "Collapse"Data-target= "#navbar-collapse">                <spanclass= "Sr-only">Toggle Navigation</span>                <spanclass= "Icon-bar"></span>                <spanclass= "Icon-bar"></span>                <spanclass= "Icon-bar"></span>            </Button>            <ahref="#"class= "Navbar-brand"style= "padding:0;">                <imgsrc= "Img/1.jpg"alt= "logo"style= "height:50px">            </a>        </Div>        <Divclass= "Collapse Navbar-collapse"ID= "Navbar-collapse">            <ulclass= "Nav navbar-nav navbar-right">                <Liclass= "Active"><ahref="#"><spanclass= "Glyphicon glyphicon-home"></span>Home</a></Li>                <Li><ahref="#"><spanclass= "Glyphicon glyphicon-list"></span>Information</a></Li>                <Li><ahref="#"><spanclass= "Glyphicon glyphicon-fire"></span>Case</a></Li>                <Li><ahref="#"><spanclass= "Glyphicon glyphicon-question-sign"></span>About</a></Li>            </ul>        </Div>    </Div></nav>

Set the Navbar,navbar-default class for the nav tag, navbar-fixed-top the navigation bar above the window, set the UL class to NAV and Navbar-nav as the window moves, and the responsive navigation bar to set the collapsible area, That is, to a div plus collapse and Navbar-collapse class, while the Data-toggle event of the collapse button is set to collapse, the target Data-target point to the collapsible Div, usually with the id attribute to connect, Where the span label in the button is to show the style of the button, which is three horizontal lines

Second, the picture carousel

Picture carousel needs to use the picture Carousel plugin Carousel

<DivID= "Mycarousel"class= "Carousel Slide">    <olclass= "Carousel-indicators">        <LiData-target= "#myCarousel"data-slide-to= "0"class= "Active"></Li>        <LiData-target= "#myCarousel"data-slide-to= "1"></Li>        <LiData-target= "#myCarousel"data-slide-to= "2"></Li>    </ol>    <Divclass= "Carousel-inner">        <Divclass= "Item Active"style= "background: #1D1311;">            <imgsrc= "Img/ad2.jpg"alt= "Second">        </Div>        <Divclass= "Item"style= "background: #170E0F;">            <imgsrc= "Img/ad3.jpg"alt= "Third">        </Div>        <Divclass= "Item"style= "background: #22110A;">            <imgsrc= "Img/ad4.jpg"alt= "Forth">        </Div>    </Div>    <ahref= "#myCarousel"Data-slide= "Prev"class= "Carousel-control Left">&lsaquo;</a>    <ahref= "#myCarousel"Data-slide= "Next"class= "Carousel-control Right">&rsaquo;</a></Div>

Using an ordered list to achieve the orientation of the image, set the class to Carousel-indicators, and the Li's target to the current Carousel Div block, data-slide-to for each Li point to the picture, Set the entire div of the package picture to. Carousel-inner, and the div for each picture to the item

Finally set two a tag to link to the Carousel block, Data-slide set to the previous and the latter, "Prev" and "Next", Class for Carousel-control,,,,

At this point a tag is located at the top of the picture, in order to center it, you can set the row height of the a label to the picture, but when the browser window changes the height of the picture will adapt to change, so to complete the settings in JS, but each change in the browser window needs to be refreshed to complete, Therefore, add the Window.resize () event in JS to achieve adaptive centering every time the window is changed

$ (". Carousel-control"). CSS (' Line-height ', $ (". Carousel-inner img"). Height () + ' px ');    $ (window). Resize (function() {        $ (". Carousel-control"). CSS (' Line-height ', $ (". Carousel-inner img "). Height () + ' px ');    })

However, there is a problem: if the window is resized when the second or third picture is currently present, the height of the image obtained is 0 because

$ (". Carousel-inner img"). Height ()

Gets the height of the first picture, and when the second picture is displayed, the first picture has a height of 0, so it is set

$ (window). Resize (function() {        var $height =$ (". Carousel-inner img"). EQ (0). Height () | |             $ (". Carousel-inner img"). EQ (1). Height () | |             $ (". Carousel-inner img"). EQ (2). Height ();        $ (". Carousel-control"). CSS (' line-height ', $height + ' px ');    })

The role of the $height is to get the height of the current picture, that is, if the first picture has a height, the other two picture values are 0, and so on, you can get the height of the displayed picture.

Bootstrap-Responsive layout