Bootstrap Create response navigation bar instance Code _javascript tips

First you have to introduce Bootstrap and jquery.

Recommend a cdn:http://cdn.gbtags.com/index.html

And then you start writing HTML code. If you don't want to change the display, the CSS will actually be 2333

Because the HTML code is more than that, here are three sections and then finally a whole HTML code

First, as shown in the previous illustration, this effect requires understanding the following components of the bootstrap

• Navigation bar
• button
• Forms
• Drop down menu

In fact, there are a lot of styles for the above components. We just need to know a little bit about it. Please refer to http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html for more information.

ps:class{} Here is just a comment not an HTML code

PS2: Provides HTML file with an online case debugging

Navigation bar and navigation bar logo layout

<!--Create a bootstarp navigation bar and navigation logo layout-->
<nav class= "NavBar navbar-default" >
<div class= " Navbar-header ">
//do sth
</div>
</nav>

Navigation buttons

<!--Create a button-->
<!--class{
navbar-toggle: To JS Pass this button is clickable
collapsed: Do not combine navbar-collapse that is a default class. No, I don't seem to find any bugs.
}
Data-toggle= "collapse": Introduce the collapse plug-in
data-target= "#navbar-gbtag": When Clicked button to jump/Open which label
aria-expanded= " False ": auxiliary reading function. Settings for special groups-->
<button type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" "data-target=" # Navbar-gbtag "aria-expanded= false" >
<!--Add some icons and instructions on the button
class{
sr-only: Hide this tag
incon-bar : Icon style
change the icon style for Glyphicon Glyphicon-star try
}-->
<span class= "sr-only" > Dot me </span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
</button>

Form

<div class= "Form-group" >
<!--class{
Form-control: set width to% but we set the navbar-form in the parent element form so that the width gets a certain amount of control.
}-->
<input type= "text" class= "Form-control" placeholder= "search"/>
</div><!--form Group-- >
<button type= "Submit" class= "btn Btn-default" > Search </button>
</form><!--form-->

Drop down Menu

<li class= "dropdown" >
<!--class{
Dropdown-toggle: Declare that this is a list that can be pulled down. In fact, I didn't find the specific purpose of this class. Cancel also found no bug
span. caret{
a small triangle icon
picture
style
}
data-toggle= "dropdown": Introduces a necessary attribute of the Drop-down menu component
role= "button": the auxiliary Declaration function. Declares that this is a button-->
<a href= "#" class= "Dropdown-toggle" Data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Drop-down menu Name <span class= "Caret" ></span></a>
<ul class= "Dropdown-menu" >
<li><a href= "" >bootstrap</ A></li>
<!--class{
divider: Divider Style
}
role= "separator": Declare this element to be a separator line-->
<li role= "separator" class= "divider" ></li>
<li><a href= "" > Please pay attention to the Geek label </a></li >
</ul><!--pull-down Menu-->

The overall implementation of the HTML

<! DOCTYPE html>  

The above content is small set to introduce the bootstrap to create a response-style navigation bar instance code, hope to help everyone, if you want to know more information please pay attention to cloud Habitat community website, thank you!