First you have to introduce bootstrap and jquery
Recommend a CDN: http://cdn.gbtags.com/index.html
Then start writing HTML code. If you don't want to change the display effect, in fact, CSS is not allowed to write 2333.
Because there are many HTML codes, here are divided into three parts and then the overall HTML code is last
First of all, as shown in the figure above, you need to understand the following components of bootstrap
•Navigation bar
•Button
•Form
•Drop down menu
In fact, there are many styles of the above components. We only need to know a part of it. If you want to know more, please refer to http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html for more information.
PS:class{} Here is just comments, not HTML code
PS2: Provides HTML files with an online case debugging
Navigation bar and navigation bar LOGO layout
<!--Create a bootstarp navigation bar and navigation LOGO layout--><nav><div>//do sth</div></nav>
Navigation Buttons
<!--Create a button--><!--class{navbar-toggle: Passing this button to js is clickable collapsed: If you don't combine navbar-collapse, it is a default class.. If you don't add it, you don't find any bugs.}data-toggle="collapse":Introduce collapse plug-in data-target="#navbar-gbtag": When clicking the button, which tag is jumped/opened aria-expanded="false":Assisted reading function..Settings for special groups--><button type="button" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false"><!--Add some icons and instructions on the button class{sr-only:Hide this label incon-bar: Change the icon style manually and change the icon style to glyphicon-star try}--><span>Click me</span><span></span><span></span><span></span><span></span></button>Form
<div><!--class{form-control: Set the width to % but we set navbar-form in the parent element form so the width will be controlled by a certain amount}--><input type="text" placeholder="search" /></div><!--Form group--><button type="submit">Search</button></form><!--Form-->Pull-down menu
<li><!--class{dropdown-toggle: Declare this is a list that can be dropped down. Actually, I didn't find the specific purpose of this class. Cancel and did not find any bugspan.caret{Icon picture style for a small triangle}}data-toggle="dropdown" : Introduce a necessary attribute of the drop-down menu component role="button": acts as an auxiliary declaration. Declare this is a button--><a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a><ul><li><a href="">bootstrap</a></li><!--class{divider:divider style}role="separator":Declare this element as a divider--><li role="separator"></li><li><a href="">Please follow the geek label</a></li></ul><!--drop-down menu-->Overall implementation of HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Responsive navigation bar</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/> <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--Create a bootstarp navigation bar --> <nav> <!--Create a bootstrap full-screen layout --> <div> <!--Create a bootstrapLOGO layout --> <!--Note: You must create a navbar-header, wrap the logo and responsive buttons in. Otherwise... Everyone deletes the navbar-header and narrows the screen and clicks the drop-down menu to know-how--> <div> <div> <p>Geek Tag</p> </div> <!--Create a button class{ navbar-toggle: Passing this button to js is a clickable collapsed: If you don't combine navbar-collapse, it's a default class. It seems that no bugs are found without adding it. } data-toggle="collapse":Introduce collapse plug-in data-target="#navbar-gbtag":When clicking the button, which tag is redirected/opened aria-expanded="false":Assisted reading function..Settings for special groups--> <button type="button" 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:Change the icon style and change the icon style to glyphicon-star try}--> <span>Click me</span> <span></span> <span></span> <span></span> </button> </div> <!--Create navigation bar element layout class{ collapse: whether the navbar-collapse button is expanded by default. If collapse is canceled, then the button is expanded by default. navbar-collapse: the required class for the navigation bar element layout } id: consistent with the data-targe of the button--> <div id="navbar-gbtag"> <!--Create navigation bar internal element class{ nav : Create a necessary base class for the internal elements of the navigation bar. Navbar-nav: This is not easy to explain. Because I looked through the official documentation and did not say it in detail. Here I will briefly explain it: Make the ul horizontally centered and horizontally. At the same time, the width is the content width and will not squeeze the elements behind it, such as form; and finally you can delete this class and try to know that it is used. Navbar-right: the class that is arranged by navigation bar}--> <ul> <!--class{ active: default click, dropdown: the base class required for creating a dropdown menu}--> <li> <a href="">Relsoul</a> </li> <li><a href="">GBTag</a></li> <li> <!--class{ dropdown-toggle: declares this is a list that can be dropped down. Actually, I didn't find the specific purpose of this class. I canceled it and found no bugs. span .caret{ icon image style of a small triangle} } data-toggle="dropdown" : Introduce a necessary attribute of the drop-down menu component role="button": serves as an auxiliary declaration. Declare this is a button--> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a> <ul> <li><a href="">bootstrap</a></li> <!--class{ divider: Divider style} role="separator": Declare this element as a divider --> <li role="separator"></li> <li><a href="">Please pay attention to the geek tag</a></li> </ul><!--Drop-down menu--> </li><!--Navigation subelement--> </ul><!--Navigation element--> <!--class{ navbar-form: Can present good vertical alignment specific reference http://v3.bootcss.com/components/#navbar-forms navbar-left: Used to specify the alignment of elements in the navigation bar http://v3.bootcss.com/components/#navbar-component-alignment }--> <form role="search"> <!--class{ btn: The base class required to create a button btn: The button style is based on the btn base class specific reference http://v3.bootcss.com/css/#buttons form-group: A base class for listing single elements specific reference http://v3.bootcss.com/css/#forms }--> <div> <!--class{ form-control: Set the width to 100%, but we set navbar-form in the parent element form so the width will be controlled by a certain amount}--> <input type="text" placeholder="search" /> </div><!--form group--> <button type="submit">Search</button> </form><!--Form--> <ul> <li><a href="">Soul</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Drop-down menu name<span></span></a> <ul> <li><a href="">bootstrap</a></li> <!--class{ divider: divider style} role="separator":Declare this element as a divider--> <li role="separator"></li> <li><a href="">Please follow the geek tag</a></li> </ul><!--drop-down menu--> </li><!--Navigation Sub-Element 2--> </ul><!--Navigation Element 2--> </div><!--Navigation Layout--> </div><!--end Full-screen Layout--> </nav> </body></html>The above content is the example code for creating responsive navigation bars by the editor to you. I hope it will be helpful to you. If you want to know more information, please pay attention to the Wulin.com website. Thank you!