Bootstrap getting started book (4) menu, buttons and navigation, bootstrap getting started

Bootstrap getting started book (4) menu, buttons and navigation, bootstrap getting started

What we will learn next is some of the components provided by Bootstrap for us. These components are easy to use and can help us build websites conveniently and quickly, and can achieve a good display effect. The most important thing to note is that the structure of HTML and bootstrap provide classes and attributes added to the structure.

The interaction functions of these components depend on The Implementation of The jQuery library. Therefore, jQuery. js must be introduced before Bootstrap. js. If it is officially launched, you can use the compressed version as follows:

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

Menu

Basic usage

The drop-down menu component shown in the official document is as follows:

<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown" aria- haspopup = "true" aria-expanded = "true"> drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu" aria-labelledby = "dropdownMenu1"> <li> <a href = "#"> menu item 1 </a> </li> <a href = "#"> menu item 2 </a> </li> </ul> </div>

Which of the following attributes are required to control behaviors? Which part of the modification function does it play?

Let's simplify the Code:

<Div class = "dropdown"> <button class = "dropdown-toggle" data-toggle = "dropdown"> drop-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 chart before and after simplification:

When using the drop-down menu component in the Bootstrap framework, whether the structure is correctly applied is very important. If the structure and class name are not correctly used, it directly affects whether the component can be used normally. After the above simplification, we can see the following core requirements:

Use. the dropdown container wraps the entire drop-down menu element. In this example, the <div class = "dropdown"> </div> button is used as the parent menu, and define the class name. the dropdown-toggle and Custom data-toggle attributes must have the same value as the outermost class name. In this example, the data-toggle = "dropdown" drop-down menu item uses a ul list, and define a class named. dropdown-menu, this example is: <ul class = "dropdown-menu">

That is to say, we only need to remember these three steps to make the drop-down menu take effect. The <span> label in <button> is only used for displaying icons, make the menu clearer. However, I personally recommend that you add other attributes of the drop-down menu in the Bootstrap framework during actual use. This makes it more friendly for different customers, such: screen Reader provides a superior experience.

So how does this work?

View the CSS source code. dropdown-menu has a display: none, so the drop-down list items are hidden by default;

We continue to open the chrome developer tool (F12), and we can see that every time the items in the list are displayed ,. added a dropdown class. open Class; needless to say, it must be the class at work. We can continue to go back to the CSS source code to see:

.open > .dropdown-menu { display: block;}

This should not be explained too much here. When this. open Class is added, the. dropdown-menu is displayed naturally.

Drop-down menu Modification

Drop-down Separator

In the Bootstrap framework, the drop-down menu also provides a drop-down separator. If there are two groups in the drop-down menu, you can add an empty <li> between the group and the group, and add the class name for this <li>. divider to add a drop-down separator.

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

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

Menu title

In the previous section, you can add a drop-down menu group by adding divider. To make this group more visible, you can also add a header (title) to each group ): <li class = "dropdown-header"> the first part of the menu header </li>.

The two key points in the source code are: the title Font color is: color: #777;, and the padding: 3px 20px;

Alignment Mode

In the Bootstrap framework, the drop-down menu is left aligned by default, that is, adding. if you want to align the drop-down menu to the right of the parent container, you can. add one to the dropdown-menu (that is, the ul of your menu item. pull-right or. the dropdown-menu-right class name is as follows:

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

The source code is as follows:

. Dropdown-menu.pull-right,. dropdown-menu-right {/* Two Classes optional */right: 0; left: auto ;}

Of course, if you only perform this setting, there may be some strange situations. For example, if the list item goes to the far right of the screen, you must also add the float: left style for. dropdown.

.dropdown{ float: left;}

Menu item status

The default status (not required) of the drop-down menu items is suspended (: hover) and focus (: focus) (including the status mentioned below, which must contain the tag in li --)

In addition to the preceding statuses, the drop-down menu items include the current status (. active) and disabled status (. disabled ). To use these two statuses, you only need to add the corresponding class name on the corresponding menu item, for example: <li class = "disabled"> <a href = "#"> Tao </a> </li>

We can achieve the following results:

Button

In the Bootstrap getting started book (ii) form, we have learned how to use buttons in Bootstrap. Here we will continue to make some extensions!

Button group and toolbar

The use of a single button on a Web page sometimes does not meet our business needs. It is often seen that multiple buttons are combined for use, such as a group of small icon buttons in the rich text editor. In this case, we will need a button group.

The structure is very simple. Use a container named. btn-group to put multiple buttons in the container. For example:

<Div class = "btn-group"> <button type = "button" class = "btn-default"> left </button> <button type = "button" class = "btn-danger"> center </button> <button type = "button" class = "btn-default"> right </button> </div>

How to convert it into a toolbar? You only need to use one. btn-toolbar content. btn-group can be used for another package. btn-group-lg large button group ,. btn-group-xs: Add a series of classes in the ultra-small button group. the btn-group container controls the size of a group of buttons as follows:

<Div class = "btn-toolbar"> <! --...... --> <Div class = "btn-group"> <button type = "button" class = "btn-default"> left </button> <button type = "button "class =" btn-danger "> center </button> <button type =" button "class =" btn-default "> right </button> </div> <div class = "btn-group-sm"> <button type = "button" class = "btn-default"> left </button> <button type = "button" class = "btn-danger"> intermediate </button> <button type = "button" class = "btn- Default "> right </button> </div> <! --...... --> </Div>

The effects of the above two sections of Code are as follows:

Nested Group

The nested group is actually nested with a drop-down menu in the group button. When using this function, you only need to replace the. dropdown container created in the drop-down menu with. btn-group and put it at the same level as the normal button. As follows:

<Div class = "btn-group"> <button class = "btn-default" type = "button"> homepage </button> <div class = "btn-group"> <button class = "btn-default dropdown-toggle" data-toggle = "dropdown" type = "button"> product presentation <span class = "caret"> </span> </button> <ul class = "dropdown-menu"> <li> <a href = "#"> Company Profile </a> </li> <li> <a href = "#"> corporate culture </a> </li> <a href = "#"> organizational structure </a> </li> <li> <a href = "#"> customer service </a> </li> </ul> </div> <button class = "btn-default "type =" button "> about </button> </div>

Of course, we can also change from a horizontal button group to a vertical group, just the Class Name of the outermost container in the horizontal group. replace btn-group. btn-group-vertical to achieve the effect of vertical grouping.

Downward upward triangle of the button

We can see the downward triangle of a button in the drop-down menu and nested group. We add a <span> label element to the <button> label and name it caret, this triangle is completely implemented using CSS code:

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

Sometimes, the drop-down menu will pop up. In this case, we need to display the triangle in the upward direction. The implementation method is as follows. append the dropup class name to the btn-group class (this is also the class name used to pop up the drop-down menu ).

. Dropup. caret {content: ""; border-top: 0;/* the top and bottom changes here */border-bottom: 4px solid ;}

Now let's take a look at the different effects that can be achieved by adding the above Code and classes:

Navigation

Navigation should be familiar to a front-end developer. It can be said that navigation exists in each webpage, making it easy for users to find various functional services provided by the website. So how to use the Bootstrap framework to create a wide range of navigation?

Basic Style

The. nav style is used to create a navigation bar in the Bootstrap framework. The default. nav style does not provide the default navigation style. It must be appended with another style, such as nav-tabs and nav-pills.

<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 status (. active) and disabled status (. disabled). we add the current status to the first navigation, and add the disabled status to the last navigation. The effect is as follows:

Modify

Vertical stack navigation

In practical use, in addition to horizontal navigation, there are vertical navigation, just like the vertical arrangement button described above. To create a vertical stack navigation, you only need. add. the nav-stacked class name can be used. In addition, we can also use the split line examples between groups, just like the drop-down menu, you only need to add <li class = "nav-divider"> </li> between navigation items, such:

<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 it to the browser to see the effect!

You should have discovered that in vertical navigation, every navigation item occupies the left of the text, accounting for 100% of the width of the parent container. If you want a responsive effect, it should be used with the raster system. Why not use nav-tabs for vertical navigation? You can see why it is not used.

Adaptive Navigation

The Adaptive Navigation is the same as the adaptive button, but the class name is replaced with. nav-justified. Of course, he needs to work with. nav-tabs or. nav-pills.

Used together. It is responsive. When the width is sufficient, multiple navigation items are allocated equally space. When a critical value (768px) is reached, it will be the same as the vertical Navigation: each item is filled with the width of the parent container. The difference is that the text is centered.

Add a drop-down menu in the navigation bar (level 2 navigation)

The previous section describes how to create a level-1 navigation, but in many cases, the effect of level-2 navigation is often used on Web pages.

It is easier to create a second-level navigation in the Bootstrap framework. You only need to use li as the parent container, use class name. dropdown, and nest another list ul in li

<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>

Here we will not explain much about it, which is consistent with the nested button above.

Bread navigation

Breadcrumb is generally used for navigation. It mainly serves to tell the user the current location of the page ). The. breadcrumb class is usually used in articles, blogs, and lists.

<Ol class = "breadcrumb"> <li> <a href = "#"> personal homepage </a> </li> <a href = "#"> tag </a> </li> <li class = "active"> Bootstrap </li> </ol>

Possible results:

Is it concise and clear?

About Bootstrap entry books (4) about menus, buttons, and navigation. Next I will introduce you to Bootstrap entry books (5) navigation bar and paging navigation, if you are interested, continue to pay attention. Thank you!

Articles you may be interested in:

Every day, Bootstrap is a simple entry

Navigation bar required by Bootstrap every day

Introduction to Bootstrap (zero) Bootstrap

Bootstrap getting started book (I) typographical

Bootstrap entry books (iii) raster System

Bootstrap entry books (5) navigation bar and paging navigation