Bootstrap3 makes its own navigation bar

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:

• Add class .navbar, .navbar-default (black letters on white), navbar-inverse (black letters on black) to the <nav> tag
• Adding role="navigation" to the above element helps increase accessibility.
• Add a title class .navbar-header to the <div> element, which contains the <a> element with class navbar-brand. This will make the text look larger.

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

google

Weibo

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