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

Source: Internet
Author: User
Tags button type

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.