Bootstrap Learning to use (navigation bar, Pull-down menu, Carousel, grid layout, etc.) _javascript tips

This article is regarded as the end of the bootstrap learning to use a large summary for your reference, the specific content as follows

Bootstrap framework

Bootstrap learning from now on, front-end development framework bootstrap, can greatly simplify the process of web site development, so well received by the developers like.

<! DOCTYPE html>  

Navigation

Navigation is no stranger to a front-end person. It can be said that navigation is one of the important elements of a Web site, you can easily find the site to provide the various functional services.

<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's *padding-top*

 

Drop down Menu

Small partners Note that the Drop-down menu component in the bootstrap frame is a stand-alone component.

<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-ca Ption ">......</div> </div> </div> <!--left-right arrow--> <a class=" Carousel-control "#carou Sel-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>
 
 
 

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Tutorials

Bootstrap hands-on tutorials

Bootstrap Plug-ins Use the tutorial

Above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.