The navigation bar is a good feature and is a prominent feature of the Bootstrap website. The navigation bar is a responsive meta component that acts as the navigation title for an application or website. The navigation bar is collapsed in the view of the mobile device and the navigation bar expands horizontally as the available viewport width increases. In the core of the Bootstrap navigation bar, the navigation bar includes the definition of styles for site names and basic navigation.
The steps to create a default navigation bar are as follows:
To add links to the navigation bar, simply add an unordered list with class .nav, .navbar-nav.
The following examples will share with you the navigation bar made using Bootstrap3. The specific content is as follows
for example
So how to write such a convenient component
Use bootstrap3!
Tell us directly
Generally speaking, the navigation is placed in the following structure
<nav role="navigation"> <div> <div> <a href="#"> <img src="..."> </a> </div> </div></nav>
1. Nav tags
In the first class, the navbar is necessary. Other properties are optional.
Adding navbar-default creates the most basic navigation, and it will not be fixed where the color is transparent.
Add the color of the navbar-inverse class to turn black
Add navbar-fixed-top to fix on top, add navbar-fixed-bottom to fix on bottom
The effect of adding navbar-static-top is as follows
<div>
Navigation header, for example, the log of the website, click on the homepage, or the name of the website
The effect is as above
I think the effect will be better if I can change it to text here
2. Form
Adding forms in the navigation, such as search, login, etc. is also common
For example, my search above
<form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Search</button> </form>
Explain that the navbar-left class will position this form on the left
Of course, there is also a navbar-right class
Similarly, the button can be added like this
<button type="button">Sign in</button>
The text can be added like this
<p>Signed in as Mark Otto</p>
The link can be added like this
<p>Signed in as <a href="#">Mark Otto</a></p>
And in this way, you can add navbar-right or navbar-left classes
My Navigation
<!--Navigation--> <div> <div id="navcontainer"> <nav role="navigation"> <div> <div> <a href="#">Xiansheng Library</a> </div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Search</button> </form> <div> <ul> <li><a data-toggle="modal" data-target="#register" >Register</a></li> <li><a data-toggle="modal" data-target="#signin" >Login</a></li> </ul> </div> </div> </div> </nav> </div> </div> </div> </div>
The effect is as follows
For more content, you can refer to the article for learning:
Bootstrap implements default navigation bar effect
Bootstrap must learn every day (II)
Bootstrap must learn every day additional navigation (Affix) plugin
More content about Bootstrap can also be found in special topics: "Bootstrap Learning Tutorial"
The above is the navigation bar made using Bootstrap3. I hope it will be helpful to everyone's learning and make your own navigation bar