Bootstrap learning path (2) --- navigation component

In Bootstrap, the style of the navigation bar depends on the. Nav class, and the style can be divided into multiple types, such:

Tab style:. Nav-Tabs

<Ul class = "nav-Tabs"> <li class = "active"> <a href = "http://www.weixh.net"> smiling words </a> </LI> <li> <a href = "#"> text </a> </LI> <li> <a href = "#"> text </a> </LI> </ul>

This is the simplest tab style navigation, and the active in the Li tag is the status of the current page. The running effect is as follows:

For a capsule tab, you only need to replace the. Nav-Tabs class with the. Nav-pills class. The running effect is as follows:

Of course, capsules can be stacked vertically on tabs. You only need to add the. Nav-stacked class.

<Ul class = "nav-pills nav-stacked"> <li class = "active"> <a href = "http://www.weixh.net"> smiling words </a> </LI> <li> <a href = "#"> text </a> </LI> <li> <a href = "#"> text </a> </LI> </ul>

The running effect is as follows:

Tab on which the two ends are aligned:

On a screen larger than 768px, you can easily add the. Nav-justified class to make the tabs or capsule labels show the same width. On a small screen, navigation links are stacked.

<Div class = "container-fluid"> <ul class = "nav-Tabs nav-justified"> <li class = "active"> <a href = "http://www.weixh.net"> smiling words </a> </LI> <li> <a href = "#"> image and text </a> </LI> <li> <a href = "#"> text </a> </LI> </ul> </div>

The running effect is as follows:

When the screen is greater than 768px

Note: The third tab is the mouse style, which can be rewritten. Now it's just getting started.

When the screen changes to an hour, it will automatically become a stacked style. Does it instantly feel very high?

 

Default style navigation bar:

A navigation bar is a basic responsive component that serves as the navigation page header in your application or website. They can be folded (and turned off) on mobile devices and gradually become horizontally expanded when the width of the viewport increases.

When the browser's viewport width is less than the value of @ grid-float-breakpoint, the elements inside the navigation bar are folded and arranged, that is, the display mode of the mobile device is realized; when the browser viewport width is greater than the value of @ grid-float-breakpoint, the elements inside the navigation bar are horizontally arranged, that is, the display mode of non-mobile devices is realized. By adjusting the value in the source code, you can control when the navigation bar is stacked and horizontal. The default value is 768px (the minimum value of a small screen, or tablet ).

<Nav class = "navbar-default navbar-fixed-top" role = "navigation"> <Div class = "navbar-header"> <button type = "button" class = "navbar-Toggle collapsed" data-Toggle = "collapse" data-target = "# bs-example-navbar-collapse-1"> <SPAN class = "icon-bar"> </span> <SPAN class = "icon-bar"> </span> <SPAN class = "icon-bar"> </span> </button> <a class = "navbar-brand" href =" http://www.weixh.net ">  smile words </a> </div> <Div class =" collapse navbar-collapse" id = "bs-example-navbar-collapse-1"> <ul class = "nav navbar-nav-pills"> <li class = "active"> <a href = "http://www.weixh.net"> all </> </LI> <li> <a href = "#"> text </a> </LI> <li> <a href = "#"> text </> </LI> </ul> </div> </nav>

Explanation:

This responsive navigation bar depends on the collapse plug-in, which should be included in your Bootstrap version.
The. navbar-default class is the default style of navigation. You can also redefine your own style to add it;

. Navbar-fixed-top is positioned to the top of the navigation bar. To enhance accessibility, you must add attributes to each navigation bar.

Dependent on JavaScript

If Javascript is disabled and the viewport is narrow enough, the navigation bar is folded and the content contained in. navbar-collapse cannot be opened.

Class = "navbar-Toggle collapsed" is the folding style, data-target = "# bs-example-navbar-collapse-1" refers to the folding target;

The running effect is as follows:

When the window is large enough, the navigation is tiled:

When the screen changes, the navigation is automatically folded and the navigation switch is displayed:

Click the switch to open the folding Navigation:

Is it convenient? Let's get down to it first. If you think it is good, please give me a thumbs up. If there is anything you can't say, please reply to the criticism and correct it. You can also go to my joke website recently to see the joke or something: www.weixh.net. Next time, let's talk about the list component.

Bootstrap learning path (2) --- navigation component