zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 26. 下拉菜单标题

      Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样

    <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"><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>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      </ul>
    </div> 
    
    
    <div class="dropdown">
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                选择运动
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">第一部分标题</li>
                <li><a href="javascript:void(0)">足球</a></li>
                <li><a href="javascript:void(0)">篮球</a></li>
                <li><a href="javascript:void(0)">乒乓球</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">蔬菜</li>
                <li><a href="javascript:void(0)">足球</a></li>
                <li><a href="javascript:void(0)">篮球</a></li>
                <li><a href="javascript:void(0)">乒乓球</a></li>
            </ul>
    </div>
  • 相关阅读:
    深入了解CSS字体度量,行高和vertical-align
    解决ios手机上传竖拍照片旋转90度问题
    HTML5图片上传本地预览
    前端本地文件操作与上传
    前端基础进阶(一):内存空间详细图解
    js小知识-数组去重
    SQL Server物化视图学习笔记
    MindMaster学习笔记
    c#Lock学习笔记
    oauth2.0学习笔记(摘抄简化)
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4601114.html
Copyright © 2011-2022 走看看