Bootstrap下拉菜单（Dropdowns）和按钮

忘是亡心i 2022-08-23 08:16 277阅读 0赞

1.下拉菜单

<div class="dropdown">
       <button type="button" class="btn dropdown-toggle" 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="#">Java</a>
          </li>
          <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.增加下拉菜单标题

<li role="presentation" class="dropdown-header">下拉菜单标题</li>

3.按钮组

.btn-group:形成基本的按钮组
    .btn-toolbar:把几个按钮组组合在一起
    .btn-group-lg,.btn-group-sm,.btn-group-xs:整个按钮组大小的调整
    .btn-group-vertical:按钮垂直堆叠显示，而不是水平堆叠显示

//按钮组，三个按钮在一行水平显示
    <div class="btn-group">
      <button type="button" class="btn btn-default">按钮 1</button>
      <button type="button" class="btn btn-default">按钮 2</button>
      <button type="button" class="btn btn-default">按钮 3</button>
    </div>

//按钮在一行显示，三个为一组
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
      <button type="button" class="btn btn-default">按钮 1</button>
      <button type="button" class="btn btn-default">按钮 2</button>
      <button type="button" class="btn btn-default">按钮 3</button>
     </div>
      <div class="btn-group">
      <button type="button" class="btn btn-default">按钮 4</button>
      <button type="button" class="btn btn-default">按钮 5</button>
      <button type="button" class="btn btn-default">按钮 6</button>
      </div>
     </div>

//按钮嵌套
    <div class="btn-group"> //大的按钮组
      <button type="button" class="btn btn-default">按钮 1</button>
      <button type="button" class="btn btn-default">按钮 2</button>
    
      <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">
          <li><a href="#">下拉链接 1</a></li>
          <li><a href="#">下拉链接 2</a></li>
        </ul>
      </div>
    </div>

4.分割的按钮下拉菜单

<div class="btn-group">
       <button type="button" class="btn btn-default">默认</button>//先定义一个普通按钮，显示文字为默认
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">//再定义一个按钮，显示为黑色小三角
          <span class="caret"></span>
          <span class="sr-only">切换下拉菜单</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>

5.按钮上拉菜单  
在`.btn-group`容器中添加`.dropup`