Bootstrap Introductory Book (d) menu, button and navigation _javascript tips

The next thing we're going to learn is the components that bootstrap provides for us, and the use of these components is simple enough to help us build the site quickly and achieve a good display. What we need to be aware of most is that HTML structures and bootstrap provide classes and attributes that are added to the structure.

The interactive functionality of these components is dependent on the jquery library implementation, so you must also introduce jquery.js, which must precede bootstrap.js. Official online words directly using the compressed version can be as follows:

<script src= ". /js/jquery-min-1.11.3.js "></script><script src=". /js/bootstrap.min.js "></script>

Menu

Basic usage

In the official document, we see a drop-down menu component like this:

<div class= "dropdown" > <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" Data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" > dropdown menu <span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" aria-labelledby= "dropdownMenu1" > <li><a href= "#" > menu item 1 </a></li> <li><a href= "#" > menu item 2</a></li> </ul></div>

So, what are some of the attributes that are necessary to control behavior? And what part of it is a cosmetic function?

Let's simplify this piece of code ourselves:

<div class= "dropdown" > <button class= "dropdown-toggle" data-toggle= "dropdown" > Pull-down menu </button> < UL class= "Dropdown-menu" > <li> menu item 1</li> <li> menu item 2</li> </ul></div>

Let's take a look at the comparison before and after the simplification:

When using the Pull-down menu component in the bootstrap frame, the correctness of its structure is very important, if the structure and class name are not used correctly, directly affect whether the component can be used properly. After simplifying the above, we can finally see the following core requirements:

A container named. Dropdown is used to wrap the entire Drop-down menu element, in the example: <div class= "dropdown" ></div> uses a <button> button as the parent menu and defines the class name. Dropdown-toggle and custom Data-toggle properties, and the value must be the same as the most outer container class name: The Data-toggle= "dropdown" drop-down menu item uses an UL list and defines a class named. Dropdown-menu, this example is: <ul class= "Dropdown-menu" >

That is, we just need to keep these 3 steps in mind and we can make the Pull-down menu work, and the <span> tags in <button> are just for the display of icons to make the menus clearer. However, I personally suggest that in the actual use of the bootstrap frame of the Drop-down menu in addition to the other attributes, so that more user-friendly for different customers such as: screen readers to provide a quality experience.

So how does this work?

View the CSS source can see. Dropdown-menu has a display:none, so the dropdown list item is hidden by default;

We continue to open the Chrome Developer tool (F12), and you can see that each time the list item is displayed, the. Dropdown class is added with an. Open class; it's no doubt that this class is at work, and we can go back to the CSS source to see:

. Open > Dropdown-menu {display:block}

See here also should not be too much explanation, add this. Open class,. Dropdown-menu the natural show.

Drop down menu adornments

Pull down divider Line

The Drop-down menu in the bootstrap frame also provides a drop-down divider line, assuming that the Drop-down menu has two groups, the group can be added to the group by adding an empty <li> and adding the class name to the <li>. Divider to implement the ability to add a drop-down separator line.

<li class= "divider" ></li> corresponding style code:

. dropdown-menu. divider {height:1px; margin:9px 0; overflow:hidden; Background-color: #e5e5e5;}

Menu Title

The previous section explains that you can group Drop-down menus by adding divider, and to make this group more visible, you can add a header to each group: <li class= "Dropdown-header" > Part One menu head </li>.

The two key points from the source code are: the font color of the title is: color: #777; , and the inner filler padding:3px 20px;

Alignment method

The Bootstrap Frame dropdown menu defaults to the effect that the Dropdown-menu-left class can achieve, and if you want the Drop-down menu to align to the right of the parent container, you can add a. Dropdown-menu (that is, the UL of your menu item) . pull-right or. Dropdown-menu-right class name, as follows:

<ul class= "Dropdown-menu pull-right" >

The source code is as follows:

. dropdown-menu.pull-right,.dropdown-menu-right {/* Two class optional/right:0 Left:auto;}

Of course, you can only do this setting, there may be some strange situation, such as list items run to the right side of the screen, so be sure to add a float:left style for. Dropdown.

. dropdown{Float:left;}

menu item Status

The default state (without setting) of the Drop-down menu item has a suspended state (: hover) and focus state (: Focusing): (including the state mentioned below must contain a tag in the Li to have--)

The Drop-down menu item has the current state (. Active) and the disabled state (. Disabled), in addition to the above two states. The two states use the method only to add the corresponding class name on the corresponding menu item such as: <li class= "Disabled" ><a href= "#" > Peach </a></li>

We can achieve the following effects:

Button

We have already learned about the use of the bootstrap button in the bootstrap entry book (ii) Form, where we continue to make some extensions!

button groups and toolbars

The use of a single button in a Web page sometimes does not meet our business needs, and often sees the combination of multiple buttons, such as a small set of icon buttons in a rich text editor. This time we will need to use the button group

For structural aspects, it's very simple. Use a container named. Btn-group to put multiple buttons in this container. Such as:

<div class= "Btn-group" > <button type= "button" class= "Btn Btn-default" > left </button> <button type= " Button "class=" btn Btn-danger "> Middle </button> <button type=" button "class=" Btn Btn-default "> Right </ Button></div>

How do I translate it into a toolbar? Just one more. Btn-toolbar the content of our. Btn-group again, we can also use. BTN-GROUP-LG Large group of buttons,. Btn-group-xs: A series of super small button groups that are added to. The Btn-group container controls the size of a set of buttons as follows:

<div class= "Btn-toolbar" > <!--......--> <div class= "Btn-group" > <button type= "button" class= "Btn btn -default "> Left </button> <button type=" button "class=" btn Btn-danger "> Middle </button> <button type= "Button" class= "Btn Btn-default" > Right </button> </div> <div class= "Btn-group btn-group-sm" > < Button type= "button" class= "Btn Btn-default" > left </button> <button type= "button" class= "Btn Btn-danger" > Middle </button> <button type= "button" class= "Btn Btn-default" > Right </button> </div> <!--......--> </div>

The above two pieces of code effect are as follows:

Nested groupings

The nested grouping here is actually a drop-down menu nested within the Group button. When you use it, you just need to replace the. Dropdown container that originally made the Pull-down menu with the. Btn-group, and put it at the same level as the normal button. As shown below:

<div class= "Btn-group" > <button class= "btn btn-default" type= "button" > Home </button> <div class= " Btn-group "> <button class=" btn btn-default dropdown-toggle "data-toggle=" dropdown "type=" button "> Product Show < Span class= "Caret" ></span></button> <ul class= "Dropdown-menu" > <li><a href= "# #" > Company Profile </a></li> <li><a href= "# #" > Corporate Culture </a></li> <li><a href= "# #" > Organizational structure </a></li> <li><a href= "# #" > Customer service </a></li> </ul> </div> <button class= "btn btn-default" type= "button" > About </button></div>

Of course, we can also change from a horizontal button group to a vertical grouping, with the class name of the outermost container in the horizontal group being replaced with the. btn-group-vertical, and the effect of vertical grouping can be achieved by Btn-group.

The downward triangle of the button

We all see the downward triangle of a button in both the drop down menu and the nested group, and we're going to add a <span> tag element to the <button> tag and name it caret, which is completely done through CSS code:

. caret {display:inline-block; width:0; height:0; margin-left:2px; vertical-align:middle; border-top:4px solid; bord er-right:4px solid Transparent; border-left:4px solid Transparent;}

Sometimes our Pull-down menu will bounce up, this time our triangular direction needs to be displayed, implementation method: You need to append the Dropup class name on the. Btn-group class (This is also the class name to use to bounce up the Drop-down menu).

. dropup. caret{content: ""; Border-top:0;/* can see here top and bottom change * * border-bottom:4px solid;}

Now let's contrast the different effects of the above code and the addition of the class:

Navigation

Navigation for a front-end developer should not be unfamiliar to the eyes. It can be said that every Web page will have the existence of navigation, user-friendly search site to provide the various functional services. So how do you use the bootstrap framework to make all kinds of navigation?

Base style

The bootstrap frame is used to make navigation bars mainly through the. Nav style. The default. NAV style does not provide a default navigation style and must be attached to another style to be effective, such as Nav-tabs, Nav-pills, and so on.

<ul class= "Nav nav-tabs" > <li><a href= "#" >HTML5</a></li> <li><a href= "#" > Css3</a></li> <li><a href= "#" >JavaScript</a></li></ul>

Of course they also have the current state (. Active) and disabled state (. Disabled), we add the current state to the first navigation, the last navigation to add a disabled state, to achieve the following effect:

Modified

Vertical-Stacked Navigation

In practical use, in addition to horizontal navigation, there are vertical navigation, similar to the previous introduction of the vertical arrangement of buttons. To make a vertical stacked navigation you only need to add a. nav-stacked class name on the basis of. Nav-pills, and as with the Drop-down menu, you can also use a split line between groups to add <li class= to the navigation items only: "Nav-divider "></li>, such as:

<ul class= "nav nav-pills nav-stacked" > <li class= "active" ><a href= "#" >HTML5</a></li> <li><a href= "#" >CSS3</a></li> <li class= "Nav-divider" ></li> <li class= " Disabled "><a href=" # ">JavaScript</a></li></ul>

Copy to the browser to see the effect of it!

You should have found out. In vertical navigation, each navigation item occupies the left side of the text, accounting for 100% of the parent container width, if you want to have a responsive effect, should be used in conjunction with the grid system, and why not try to use Nav-tabs to achieve vertical navigation? Look at the effect and you'll see why you're not using it.

Adaptive navigation

Adaptive navigation is the same as the previous adaptive button, but a class name has been replaced,. nav-justified. Of course, he needs to be with. Nav-tabs or Nav-pills.

In conjunction with the use. It is responsive and, when the width is sufficient, gives multiple navigation items equal space; When a critical value (768PX) is reached, it is the same as vertical navigation: Each item is filled with the width of the parent container, and his text is centered.

Drop-down menu in navigation (level two navigation)

The previous introduction is used to make a level of navigation, but many times, the Web page will often use the effect of level two navigation.

It's much easier to make two-level navigation in the bootstrap frame. You only need to treat Li as a parent container, using the class name. Dropdown, and nested another list in LI. UL

<ul class= "Nav nav-pills" > <li ><a href= "#" >HTML5</a></li> <li><a href= "#" > css3</a></li> <li class= "dropdown" > <a href= "# #" class= "Dropdown-toggle" data-toggle= "dropdown" >javascript<span class= "Caret" ></span></a> <ul class= "Dropdown-menu" > <li><a href= "# #" >JQuery</a></li> <li><a href= "# #" >Vue</a></li> ... </ul></ Ul>

The words here are not too much explained, consistent with the nested buttons above.

Breadcrumbs -Type navigation

Breadcrumbs (BREADCRUMB) are generally used for navigation, primarily to tell the user where the page is now (current position). Generally in the article, blog, List of more use, need to use. breadcrumb class.

<ol class= "breadcrumb" > <li><a href= "#" > Personal home </a></li> <li><a href= "#" > tags </a></li> <li class= "Active" >Bootstrap</li></ol>

Results you can achieve:

Is it simple and straightforward?

About Bootstrap Introduction Books (iv) menu, button and navigation related knowledge to introduce so many, the next chapter to introduce Bootstrap book (v) Navigation, paging navigation, interested friends continue to pay attention, thank you!