Hold bootstrap into the bosom--navigation bar _javascript Skill

It's written in front.
in this article, I combined my own to do a landscape page to chat about the use of bootstrap, the Web screenshot as follows:

The effect and code of the full Web page can be viewed here or viewed on the codepen. The main effects of web pages include the following:

1, the landing of the navigation bar, registration button click on the pop-up login, register modal box, and login, registration window can switch, menu bar for response-type

2, navigation bar in the landscape options can be pulled down, click Down in Jiuzhaigou ' Lijiang ' water curtain hole will be positioned to the corresponding tab

3, Slide big screen carousel

4, tab page Click to switch

Below we begin to embrace bootstrap into the bosom.

Bootstrap presumably small partners have heard or used, in this page, I use CDN Bootstrap v3.3.4, click here to download the latest version of the Bootstrap v3.3.5 or click here to the official online download, I believe there is always a suitable for you ~ ~ ~ ~~

This article lets us talk about the navigation bar first.

Navigation bar
BS before using BS, including CSS and JS, is a simple way to refer to a normal external file, you can use a CDN link or a local reference. The code is given below.

In the landscape page example, I use a CDN link.

At the same time, because the BS plug-in is based on JQ, JQ also have to be introduced.

First give the navigation bar complete code

<nav class= "NavBar navbar-default navbar-fixed-top navbar-inverse" > <div class= "container" > <!--Brand and toggle get grouped for better mobile display--> <div class= "Navbar-header" > <button type= "button" CLA Ss= "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> <a class= "Navbar-brand" href= "#" > Define a logo </a> </div> <!--navigation--> <div class= "collapse navbar-collapse" id= "Bs-example-navba" in the upper left corner R-collapse-1 "> <ul class=" Nav navbar-nav "> <li ><a href=" # "> Home <span class=" Sr-only "> (Curre NT) </span></a></li> <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" Data-toggle = "Dropdown" role= "button" Aria-expandEd= "false" > Landscape <span class= "caret" ></span></a> <ul class= "Dropdown-menu" role= "menu" > < Li><a href= "#jiuzhaigou" > Jiuzhaigou </a></li> <li><a href= "#lijiang" > Lijiang </a></li > <li><a href= "#shuiliandong" > Waterfall cave </a></li> <li class= "divider" ></li> <l I><a href= "#" > More. </a></li> </ul> </li> <li data-toggle= "modal" data-target= "#about" ><a href= "#" > About </a></li> </ul> <form class= "Navbar-form navbar-right" role= "search" > <div class= "for M-group "> <input type=" text "class=" Form-control "placeholder=" Search sites ... " > <button type= "button" class= "btn btn-default" >Go</button> </div> </form> <ul CLA ss= "Nav navbar-nav navbar-right" > <li data-toggle= "modal" data-target= "#signin-signup-tab" id= "Signin-button" ><a href= "#" > Login </a></li> <Li data-toggle= "modal" data-target= "#signin-signup-tab" id= "Signup-button" ><a href= "#" > Register </a></

 li> </ul> </div> </div> </nav>

The BS navigation component relies on the same. Nav class, which is explained separately by the code. First look at this paragraph:

<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>

The purpose of this code is to reduce the viewport, the menu options on the navigation bar will be folded, click the collapse icon, navigation bar menu options will be arranged vertically. nav in the Navbar-inverse class is the inverse color, the small partners can put. The navbar-inverse class removes the observed effect. Because I am a black control, so here I use the inverse color. Want to use other colors, tyrants gold ah, small partners can follow their own taste of their own collocation. Navbar-brand class can be used to define their own site trademarks, I am here to define a trademark of their own text instead, interested in the small partner can add their own logo. The Dropdown-toggle class can implement a Drop-down, . The divider class can implement a light dark split line.

The search box and the . Navbar-right class in login and registration are the name of the right.

Data property
It is necessary to say the data attribute of BS here. In BS, the developer can only use the data properties of the BS in all JS Plug-ins, this is the first BS in the API, but also is often our preferred way to use the JS plug-in. For example, the above code in the data-toggle= "collapse",data-toggle= "dropdown" and so on, these are BS in the use of JS plug-in mode.

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

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to learn bootstrap navigation bar to help.