Create your own navigation bar for Bootstrap3 and the bootstrap3 navigation bar

Create your own navigation bar for Bootstrap3 and the bootstrap3 navigation bar

Navigation BarIt is a good feature and a prominent feature of the Bootstrap website. The navigation bar is a responsive meta component that serves as the navigation title of an application or website. The navigation bar is collapsed in the mobile device view. The navigation bar expands horizontally as the width of the available view increases. At the core of the Bootstrap navigation bar, the navigation bar includes defining the style for the site name and basic navigation.
To create a default navigation bar, follow these steps:

• Add class. navbar,. navbar-default (Black-White), and navbar-inverse to the <nav> label)
• 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 bigger.

To add a link to the navigation bar, simply add an unordered list with class. nav and. navbar-nav.

The following example shows the navigation bar created using Bootstrap3. The details are as follows:

For example

Google

Weibo

So how to write such a convenient component?

Use bootstrap3!

Use

Generally, you can navigate to the following structure:

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header">  <a class="navbar-brand" href="#">    </a> </div> </div></nav>

1. nav label

In the first class, navbar is required and other attributes are optional.
Add navbar-default to create the most basic navigation, and the color is not fixed at which position is transparent.
Add the navbar-inverse Class color to black
Add navbar-fixed-top fixed at the top, add navbar-fixed-bottom fixed at the bottom
The effect of adding navbar-static-top is as follows:

<Div class = "navbar-header">
The navigation header, such as the loge of the website, is clicked on the home page or the website name.

The results are as follows:

I think the effect will be better if I change it to text here.

2. Form
Adding forms in the navigation, such as searching and logging on, is also common.

For example, the search above

<Form class = "navbar-form navbar-left" role = "search"> <div class = "form-group"> <input type = "text" class = "form- control "placeholder =" Search "> </div> <button type =" submit "class =" btn-default "> Search </button> </form>

The navbar-left class positions the form on the left.
Of course there should also be navbar-right class

Similarly, you can add buttons like this.

<Button type = "button" class = "btn-default navbar-btn"> Sign in </button>

Text can be added in this way

<P class = "navbar-text"> Signed in as Mark Otto </p>

The link can be added in this way.

<P class = "navbar-text navbar-right"> Signed in as <a href = "#" class = "navbar-link"> Mark Otto </a> </p>

In this way, you can add the navbar-right or navbar-left class.

My navigation

<! -- Navigation --> <div class = "navbar-wrapper"> <div class = "container" id = "navcontainer"> <nav class = "navbar-inverse navbar-fixed- top "role =" navigation "> <div class =" container "> <div class =" navbar-header "> <a class =" navbar-brand "href = "#"> sound library </a> </div> <form class = "navbar-form navbar-left" role = "search"> <div class = "form-group"> <input type = "text" class = "form-control" placeholder = "Search"> </div> <button type = "submit" class = "btn-default"> Search </button> </form> <div class = "navbar-right"> <ul class = "nav navbar-nav"> <li> <a data-toggle = "modal "data-target =" # register "> Registration </a> </li> <a data-toggle =" modal "data-target =" # signin "> log On </a> </li> </ul> </div> </nav> </div>

The effect is as follows:

For more information, refer to the following articles:

Bootstrap implements the default navigation bar Effect

Navigation bar required by Bootstrap every day (2)

Additional navigation (Affix) Plug-in that Bootstrap must learn every day

For more information about Bootstrap, refer to the topic for more information:Bootstrap learning tutorial

The above is the navigation bar created using Bootstrap3. I hope it will help you learn and make your own navigation bar.