"Fine-grained" how to create a responsive navigation bar based on Bootstrap

• Local Downloads

The final results are as follows:

First you have to introduce Bootstrap and jquery.

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

Then you begin to write the HTML code. If you don't want to change the display, the CSS actually saves 2333.

Because the HTML code is much more divided into three sections and then last a whole HTML code

As shown first, implementing this effect requires understanding the following components of bootstrap

• Navigation bar
• Button
• Form
• Drop-down menu

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

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

PS2: Provides HTML files with an online case debug

Navigation bar and navigation bar logo layout

1. <!--Create a bootstarp navigation bar and navigation logo layout--
2. <nav Class="NavBar navbar-default">
3. <div Class="Navbar-header">
4. Do STH
5. </div>
6. </nav>

Navigation buttons

2. <!--Create a button--
4. <!--class{
6. Navbar-toggle: Pass this button to JS can be clicked
8. Collapsed: Do not combine navbar-collapse that is a default class. No seemingly no bug found.
10. }
12. Data-toggle= "collapse": Introducing the Collapse plugin
14. data-target= "#navbar-gbtag": Which tab to jump/open when the button is clicked
16. Aria-expanded= "false": auxiliary reading function. Settings for special people--
18. <button type="button" class="Navbar-toggle collapsed" data-toggle ="collapse" data-target="#navbar-gbtag" aria-expanded="false" >
20. <!--Add some icons and instructions to the button
22. class{
24. Sr-only: Hide this tag
26. Incon-bar: Icon Style
28. Try to change a standard style for Glyphicon Glyphicon-star
30. }-->
32. <span class="Sr-only"> point me </span>
34. <span class="Icon-bar"></span>
36. <span class="Icon-bar"></span>
38. <span class="Icon-bar"></span>
40. </button>

Form

2. <div Class="Form-group">
4. <!--class{
6. Form-control: Set the width to 100% but we set the navbar-form in the parent element form so that the width gets some control.
8. }-->
10. <input type="Text" class="Form-control" placeholder= "Search" />
12. </div><!--form Groups --
14. <button Type="Submit" class="btn btn-default"> search </button >
16. </form><!--forms --

Drop-down menu

2. <li Class="dropdown">
4. <!--class{
6. Dropdown-toggle: Declare this to be a drop-down list. In fact, I didn't find the specific purpose of this class. Canceled and no bugs found
8. span. caret{
10. An icon of a small triangle
12. Picture Style
14. }
16. }
18. Data-toggle= "dropdown": a necessary property for introducing a drop-down menu component
20. role= "button": Auxiliary declaration function. Declare this is a button--
23. <a href= "#" Class= "Dropdown-toggle" data-toggle< Span class= "pun" >= "dropdown" role= "button" aria-haspopup= " True " aria-expanded=" false " > dropdown menu name <span Class= "caret" ></SPAN></A>
25. <ul class="Dropdown-menu">
27. <li><a href="">bootstrap</a></li>
29. <!--class{
31. Divider: Separator Line Style
33. }
35. role= "Separator": declares this element to be a divider--
37. <li Role="Separator" class="Divider"></li>
39. <li><a href=""> please follow the Geek tab </a></li>
43. </ul><!-- drop-down menu--

Full content See link: http://www.gbtags.com/gb/share/5758.htm

"Fine-grained" how to create a responsive navigation bar based on Bootstrap