Example tutorial of Bootstrap drop-down menu

零下一度
Release: 2017-07-18 16:34:21
Original
1726 people have browsed it

This chapter will explain how to use the Bootstrap class to add a drop-down menu to a button. To add a drop-down menu to a button, simply place the button and drop-down menu in a .btn-group . You can also use to indicate that the button acts as a drop-down menu.

The following example demonstrates a basic simple button drop-down menu:

Example

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>
Copy after login

Basic usage

Using the drop-down menu in the Bootstrap framework When using a component, it is very important to use its structure correctly. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally

 1. Use a container named "dropdown" to wrap the entire Drop-down menu element

<div class="dropdown"></div>
Copy after login

 2. Use a

Copy after login


[Menu title]

You can add a title to any drop-down menu to indicate a group of actions

<li class="dropdown-header">Dropdown header</li>
Copy after login
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
Copy after login
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">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"><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>
Copy after login


[Alignment]

The drop-down menu in the Bootstrap framework is left aligned by default. If you want the drop-down menu to be right-aligned relative to the parent container, you can add a dropdown-menu on "dropdown-menu" "dropdown-menu-right" class name

.dropdown-menu-right {
  right: 0;
  left: auto;
}
Copy after login

Since

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template