BootStrap navigation bar instance code, bootstrap navigation bar

BootStrap navigation bar instance code, bootstrap navigation bar

1. Default navigation bar

To create a default navigation bar, you can perform the following steps:

1. Add the (ul class = "nav navbar-nav") style to ul;

2. Add a div or nav (ps: HTML5 new attribute) to ul and add a style (div class = "navbar nabar-default ");

<Nav class = "navbar-default"> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#" rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "> dinner </a> </li> <a href =" # "rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "=" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "> sleeping </a> </li> <a href = "# "rel =" external nofollow "=" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow"> fighting for warriors </a> </li> </ul> </ nav>

Below:

So easy qaq

2. navigation bar with Form

1. Create another form based on the default navigation bar.

2. Apply the style in form (form class = "navbar-form ")

<Nav class = "navbar-default"> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#" rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofo Llow "rel =" external nofollow "rel =" external nofollow "> dinner </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "rel =" External nofollow "rel =" external nofollow "> sleeping </a> </li> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" external no Follow "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow"> warrior </a> </li> </ul> <form class = "navbar-form"> <input type = "text" class = "form -control "placeholder =" guess who it is? "> <Input type =" submit "class =" form-control "value =" ~ "> </Form> </nav>

Below:

I tried to write something wrong. Actually, I want to write something about a rocket...

3. Redundant navigation bars such as forms and drop-down menus

The previous comprehensive example, or write one by one, makes up coding to dawn, and talks about loading.

<Nav class = "navbar-default"> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#" rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofo Llow "rel =" external nofollow "rel =" external nofollow "> dinner </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "rel =" External nofollow "rel =" external nofollow "> sleeping </a> </li> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" external no Follow "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow"> beat warriors </a> </li> <li class = "dropdown"> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" ex Ternal nofollow "data-toggle =" dropdown "class =" dropdown-toggle "> comparison between <span class =" caret "> </span> </a> <ul class = "dropdown-menu"> <li> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" external nofollow "> 4: 0 </a> </li> <li> <a href = "#" rel = "external nofollow" rel = "ext Ernal nofollow "rel =" external nofollow "rel =" external nofollow "> </a> </li> <li class = "disabled"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel =" external nofollow "rel =" external nofollow"> 4: 2 </a> </li> </ul> <form class = "navbar-form"> <input type = "text" class = "form-control" placeholder = "guess who it is? "> <Input type =" submit "class =" form-control "value =" ~ "> </Form> </nav>

Below:

Ke, general navigation has a big title, below:

Steps:

1. Add a style in the div (div class = "navbar-header ");

2. Add a label (a class = "navbar-brand") in this div ");

Navbar-brand is the title!

<Nav class = "navbar-default"> <div class = "navbar-header"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow "rel =" external Nofollow "rel =" external nofollow "class =" navbar-brand "> alphilich </a> </div> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#" rel = "external nofollow" = "external nofollow" rel = "external nofollow "rel =" external nofollow "rel = "External nofollow" rel = "external nofollow" rel = "external nofollow"> dinner </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external n Ofollow "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> sleeping </a> </li> <a href = "#" rel = "external nofollow "rel =" external nofollow "re L = "external nofollow" rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "> fighting for warriors </a> </li> <li class = "dropdown"> <a href = "#" rel = "external nofollow" rel = "external nof Ollow "rel =" external nofollow "rel =" external nofollow "data-toggle =" dropdown "class =" dropdown-toggle"> Number of items in the West: <span class = "caret"> </span> </a> <ul class = "dropdown-menu"> <li> <a href = "# # "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" r El = "external nofollow"> 4: 0 </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> </> </li> <li class = "disabled"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "exter Nal nofollow "rel =" external nofollow "> 4: 2 </a> </li> </ul> </li> </ul> <form class = "navbar-form"> <input type = "text" class = "form-control" placeholder = "guess who it is? "> <Input type =" submit "class =" form-control "value =" ~ "> </Form> </nav>

Iv. Reversed navigation bar

The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework for everyone. It only replaces the "navbar-deafult" class name with "navbar-inverse ". Others remain unchanged. For details, refer:

I personally prefer this style. It is enough to install it ~

5. Fixed navigation bar

As the name implies, it is actually a fixed style,

The Bootstrap framework provides two fixed navigation bar methods:

. Navbar-fixed-top: the navigation bar is fixed at the top of the browser window.

. Navbar-fixed-bottom: the navigation bar is fixed at the bottom of the browser window.

The method is simple. You only need to append the corresponding class name to navbar, the most external container of the navigation bar.

<! -- The navigation bar is fixed at the top of the browser window --> <div class = "navbar-default navbar-fixed-top">... </Div> <! -- The navigation bar is fixed at the bottom of the browser window --> <div class = "navbar-default navbar-fixed-bottom">... </Div>

6. Responsive navigation bar

<Div class = "navbar-inverse navbar-fixed-top"> <div class = "container"> <div class = "navbar-header"> <! --. The navbar-toggle style is used to contract the content of toggle, that is, the element of the navbar-collapse style, --> <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "# navbar" aria-expanded = "false" aria -controls = "navbar"> <span class = "sr-only"> Toggle Navigation </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> </button> <! -- Make sure that the screen is either wide screen or narrow screen, navbar-brand display --> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofo Llow "rel =" external nofollow "rel =" external nofollow "class =" navbar-brand "> my homepage </a> </div> <! -- When the screen width is less than 768px, the content in the div. navbar-collapse container is hidden. The icon-bar icon is displayed. Expand it when you click the icon-bar icon. When the screen is greater than 768px, it is displayed by default. --> <Div id = "navbar" class = "collapse navbar-collapse"> <ul class = "nav navbar-nav"> <li class = "active"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "> meals </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow"> sleeping </a> </li> <li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> rocket </a> </li> </ul> </div>

I have a reversed navigation bar. Now I want to see the display effects of the wide screen and narrow screen respectively. below:

<Button> the button is in the upper right corner of the narrow screen, and the span label is a three-way bar,

Now let's talk about the 5th lines in the code above,data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"What is it about? Let me introduce it one by one;

Data-toggle = "collapse" indicates to tell js what event to trigger. The coolapse here is "stretch and collapse ";

Data-target = "# navbar" indicates who is going to display it in the stretch and collapse mode. The ID is bound;

Aria-expanded = "false" indicates whether to expand or false.

Speaking of this aria-* for accessibility web applications. It mainly targets visual defects, deaf people, disabled persons with mobility, and testers who pretend to be disabled. Especially for blind people who cannot see their eyes, they need to use auxiliary devices, such as screen readers, to browse webpages. screen readers can read aloud or output Braille.

The above is the BootStrap navigation bar instance Code introduced by the editor. I hope it will help you. If you have any questions, please leave a message. The editor will reply to you in time. Thank you very much for your support for the help House website!