Bootstrap Framework Personal Summary (bootstrap frame, navigation bar, Pull-down menu, Carousel ad Carousel, grid system layout, label page tabs, modal frame, menu positioning) _javascript skills

Bootstrap frame, navigation bar, Pull-down menu, Carousel Advertising Carousel, grid system Layout, tab tabs, modal box, menu positioning of the personal summary, details as follows:

Bootstrap framework

<! DOCTYPE html>  

Navigation

<nav class= "Nabber navbar-default" role= "navigation" ><!--navigation bar, default style, role definition content is a navigation bar--> <div " Container-fluid "><!--container Center fixed width, c-f adaptive size navigation bar--> <div class=" Navbar-header "> <!-- When the response browser width is less than a certain value, the display button--> <button type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" > <span class= "sr-only" >toggle navigation</span> < Span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ><
 /SPAN> </button> <!--logo icon--> <a class= "Navbar-brand" href= "#" >Brand</a> </div> <div class= "Collapse navbar-collapse" id= "bs-example-navbar-collapse-1" ><!--Parcel Code, when the width is greater than a certain value, button and this code is not useful--> <!--navigation bar navigation items--> <ul class= "Nav navbar-nav" > <li class= "active" ><a href= "# ">a</a></li> <li><a href=" # ">a</a></li> </ul> </div> </div> </nav>

. Navbar-inverse: Change the background color of the navigation bar
. Container: Center Display

Fixed navigation bar will cover the content of the page, the solution to set the body of the *padding-top*

Drop down Menu

<li class= "dropdown" >
 <a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" > Drop-down menu <span Class = "Caret" ></span></a>
 <ul class= "Dropdown-menu" role= "menu" >
 <li><a href= "#" >Action</a></li>
 <li><a href= "#" >another action</a></li>
 <li ><a href= "#" >something else</a></li>
 <li class= "divider" ></li>
 <li ><a href= "#" >linkkk/a></li>
 </ul>
</li>

The Data property API can use all bootstrap plug-ins

Carousel Advertising (Carousel)

<div id= "Carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" > <!--bottom navigation points ... --> <ol class= "carousel-indicators" > <li data-target= "#carousel-example-generic" data-slide-to= "0" > </li> <li data-target= "#carousel-example-generic" data-slide-to= "1" class= "active" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "2" ></li> </ol> <!--carousel advertising content--> <div class= "Carousel-inner" role= "ListBox" > <div class= "Item Active" >  <div class= "Carousel -caption ">......</div> </div> <div class=" Item Active ">  <div class=" Carousel -caption ">......</div> </div> </div> <!--left-right arrow--> <a class=" Carousel-control "#ca Rousel-example-generic "role=" button "data-slide=" prev "> <span class=" Glyphicon glyphicon-chevron-left "> </span> <pan class= "sr-only" >previous</span> </a> <a class= "right Carousel-control" href= "#carousel-example-generic" role= "button" data-slide= "Next" > < Span class= "Glyphicon glyphicon-chevron-right" ></span> <pan class= "sr-only" >Next</span> </a > </div>

. data-slide-to index, pointing to the content of the Carousel advertisement, starting from 0

. Carousel set the style of the advertisement box (height, background color)

. Carousel. Item sets the style of the advertisement box (height, background color)

Grid system Layout

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-4" >.col-md-4</div>
 </div>
</div>

Label page Tabs

<!--label-->
<ul class= "nav nav-tabs" role= "Tablist" >
 <li class= "active" ><a href= "#home" role= "tab" data-toggle= "tab" >Home</a></li>
 <li><a href= "#profile" role= "tab" data-toggle= "tab" >Profile</a></li>
 <li><a href= "#messages" role= tab "data-toggle=" tab >Messages</a></li>
 <li><a href= "#settings" role= "tab" data-toggle= "tab" > settings</a></li>
</ul>
<!--label content-->
<div class= "Tab-content" >
 <div class= "Tab-pane active" id= "Home" >...</div> <div "class=" tab-pane "Profile
 " id= >
 <div class= "Tab-pane" id= "Messages" >...</div>
 <div class= "Tab-pane" id= "settings" .... </div>
</div>

Label page Tabs

<div class= "Modal Fade" >
 <div class= "Modal-dialog" >
 <div class= "Content" >
  <!-- Label Head-->
  <div class= "Modal-header" >
  <button type= "button" class= "Close" data-dismiss= "modal" >
   <span aria-hidden= "true" >x</span>
   <span class= "sr-only" >Close</span>
   
 
 

The above is a small series to introduce the bootstrap framework of personal summary (bootstrap frame, navigation bar, Drop-down menu, Carousel Advertising Carousel, grid system layout, label page tabs, modal box, menu positioning), I hope to help, If you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!