1. Drop-down menu (basic usage)
When using the pull-down menu Bootstrap framework, it must call the Bootstrap framework provided by the bootstrap.js
file. Of course, if you are using a non-compiled version, in js folder you can find a named dropdown.js
file. You can also call this js file. When using the drop-down menu component in the Bootstrap framework, the correct use of its structure is very important. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
…
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
2. Drop-down menu (principle analysis)
Bootstrap framework drop-down menu component, its drop-down menu item is hidden by default, because dropdown-menu
the default style set display:none
, when the user clicks on the parent menu item, the drop-down menu will be displayed when the user clicks again, the drop-down menu will continue to hide . Now let's analyze the implementation principle is very simple, js through technical means, to the parent container div.dropdown
to add or remove a class name open
to control drop-down menu to show or hide. That is, by default, div.dropdown
no class name open
, when the user first clicks, div.dropdown
will add the class name open
; when the user clicks again, div.dropdown
the container class name open
will be removed.
3. Drop-down menu (drop-down divider)
Drop-down menu Bootstrap framework also provides a separation line pull-down, pull-down menu has assumed two groups, by adding a blank between the group and that group <li>
, and to this <li>
was added the name of the class divider
to implement the function of adding the pull-down separation line.
4. Drop-down menu (menu title)
By adding a divider
pull-down menu can be grouped, in order to make the grouping more obvious, you can also add a header (title) to each group.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
…
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
…
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div
5. Drop-down menu (alignment)
Bootstrap framework drop-down menu default is left-aligned, if you want the drop-down menu right-aligned relative to the parent container, you can dropdown-menu
add one pull-right
or dropdown-menu-right
class name. Also be sure to to .dropdown
add float:left
css styles.
.dropdown{
float: left;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
…
</ul>
</div>
6. Drop-down menu (menu item status)
The default state of the drop-down menu item (without setting) has the floating state ( :hover
) and the focus state ( :focus
). In addition to the above two states, the drop-down menu item also has the current state ( .active
) and the disabled state ( .disabled
).
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
….
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
7. Button (button group)
Buttons and drop-down menu component group, need to rely on the button.js
plugin to run. But we can also directly call only bootstrap.js
file. Because this file has integrated button.js
plug-in function. For the structure, it is very simple. Using a named btn-group
container, the plurality of buttons into the container. In addition to use <button>
than the elements, elements other labels may be used, such as <a>
labels. The only guarantee is: no matter what label is used .btn-group
, the label element in the container needs to have a class name .btn
.
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>
glyphicon glyphicon-search
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-download
glyphicon glyphicon-upload
8. Button (button toolbar)
So Bootstrap framework button on the toolbar also provides such production methods, you only need to button group btn-group
by group in a large container btn-toolbar
, the container is designed to allow realization of the principle of multiple packets btn-group
elements float, and the group remains with the group before 5px
Left margin. Introducing a button, the button is we know through btn-lg
, btn-sm
and btn-xs
three to adjust the class name padding
, font-size
, line-height
and border-radius
property values change button size. Then the size of the button group, we can also use a similar method.
<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>
9. Buttons (nested grouping)
Many times, we often arrange drop-down menus and ordinary button groups together to achieve an effect similar to navigation menus. When in use, just need to make the drop-down menu of the original dropdown
vessel replaced btn-group
, and normal button on the same level.
<div class="btn-group">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>
10. Buttons (vertical grouping)
In actual use, you will always encounter the effect of vertical display. This style is also provided in the Bootstrap framework. We just need to level grouping of btn-group
the class name changed btn-group-vertical
to.
11. Button (Equal division button)
The effect of the equal division button is particularly practical on the mobile terminal. The width of the entire button group is 100% of the container, and each button in the button group equally divides the entire container width. For example, if there are five buttons in your button group, then each button is 20% wide, if there are four buttons, then each button is 25% wide, and so on. Aliquots button also often referred adaptive grouping button, its implementation is very simple, just set the button btn-group
is added on a btn-group-justified
class name, the principle is very simple to achieve, the btn-group-justified
analog form as ( display:table
), and the inside of the button Simulate as a table cell ( display:table-cell
). In the production decile groups of buttons to make use of <a>
the label element to create a button, because the use of <button>
the label elements, using display:table
in part browser does not support friendly.
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
<a class="btnbtn-default" href="#">首页</a>
<a class="btnbtn-default" href="#">产品展示</a>
<a class="btnbtn-default" href="#">案例分析</a>
<a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>
12. Button drop-down menu
Button drop-down menu is actually a common drop-down menu, but the <a>
label element into the <button>
label element. The only difference is that the outer container div.dropdown
replaced div.btn-group
.
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>
13. The downward and upward triangle of the button
Down triangle button, we are by <button>
adding a tag <span>
label element, and the name caret
, sometimes we drop down menu will pop up (the next section will introduce a), this time we need the direction of the triangle facing up display, implementation: the need in .btn-group
class on an additional dropup
class name (which is the name of the class to do pop up the drop-down menu to use).
14. Drop-down menu that pops up
Some menus need to pop up. For example, your menu is at the bottom of the page, and this menu happens to have a drop-down menu. In order to give users a better experience, the drop-down menu has to pop up. In the Bootstrap framework, a class name is specially provided for this effect dropup
. Usage As previously shown, only need to btn-group
add the name of the class (of course, if an ordinary pop-up drop-down menu, you only need dropdown
an additional class name based on the dropup
class name).
<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>
15. Navigation (basic style)
Making navigation bar Bootstrap framework, mainly through .nav
style. The default .nav
style does not provide a default navigation style, you must attach another style to be effective, for example nav-tabs
, nav-pills
and the like.
16. Navigation (tab navigation)
Tabbed navigation, also known as tab navigation. Especially when a lot of content is displayed in blocks, it is very suitable to use this tab to group. Navigation through the tab-shaped nav-tabs
achieved style. In the original need to navigate in the production of label-shaped navigation nav
append these names on, in fact, the effect on patients and we usually see tab effect is not the same. Under normal circumstances, the tab church has a currently selected item. In fact, it is also provided in the Bootstrap framework. Suppose we want the Home
entries for the currently selected item, just add the class name on its label class="active"
can be. In addition to the current item, the card also comes with some options disabled, to achieve this effect, just add the label on the item class="disabled"
can be.
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
17. Navigation (capsule-shaped pills navigation)
Pills navigation sounds a bit awkward because it looks a bit like a capsule. But it is more like the mass navigation that we usually see. The current item is highlighted with rounded corners. This is accomplished and nav-tabs
the like, the same configuration, only the name of the class should nav-tabs
be replaced nav-pills
to.
<ul class="nav nav-pills">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
18. Navigation (vertically stacked navigation)
In actual use, in addition to horizontal navigation, there is also vertical navigation, which is similar to the vertical arrangement of buttons described earlier. Production vertically stacked navigation only need nav-pills
to add a base nav-stacked
class name.
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
19. Adaptive navigation (use)
Adaptive navigation means that the navigation occupies the entire width of the container, and the menu items can adapt to the width just like the cells of the table. And adaptive navigation previously used btn-group-justified
production adaptive button group are the same. It's just that another class name was changed when making adaptive navigation nav-justified
. And of course he needs nav-tabs
or nav-pills
fit together.
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
20. Adaptive navigation (implementation principle)
The realization principle is not difficult <ul>
. Set the width on the list ( ) to 100%, and then set each menu item ( <li>
) display:table-cell
to display the list items in the form of simulated table cells.
21. Navigation plus drop-down menu (secondary navigation)
The previous introduction is to use the Bootstrap framework to make the first-level navigation, but in many cases, the effect of the second-level navigation is inseparable from the Web page. Then it is easier to make secondary navigation in the Bootstrap framework. Just want li
as a parent container, class name dropdown
, while li
nest another list ul
, use the drop-down menu approach described earlier can be.
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
22, breadcrumb navigation
Breadcrumb is generally used for navigation, and its main function is to tell the user where the page is currently (current location).
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
appendix
Read the original text:https://blog.mazey.net/1962.html