• 技术文章 >web前端 >Bootstrap教程

    三分钟带你了解bootstrap下拉菜单

    醉折花枝作酒筹醉折花枝作酒筹2021-03-31 16:25:29原创117
    本篇文章给大家介绍一下Bootstrap 按钮式下拉菜单。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    在按钮中加上.btn-group就可以作为按钮触发菜单了。

    单按钮下拉菜单

    在按钮中做一些改变,就可以作为下拉菜单。

    <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            示例<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">列表1</a></li>
              <li><a href="#">列表2</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">列表3</a></li>
          </ul>
        </div>

    I1UUB4(ABHPTAL{LX9EPO%5.png

    分裂式列表下拉菜单

    与单按钮下拉菜单极为相似,不同的是分裂式的多一个按钮。

    <div class="btn-group">
        <button type="button" class="btn btn-danger">示例</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">示例</span>//为了残障人士设计,不影响正常的阅读,屏幕阅读器能识别并阅读出来
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">列表1</a></li>
            <li><a href="#">列表2</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">列表3</a></li>
        </ul>
    </div>

    RFM][}I62@9MCR3RY)BG6Q2.png

    尺寸

    下拉菜单都支持尺寸操作,且支持不同尺寸大小。

    <div class="btn-group">
            <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            大尺寸菜单<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">列表1</a></li>
                <li><a href="#">列表2</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">列表3</a></li>
            </ul>
        </div>
          
          <div class="btn-group">
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            中等尺寸菜单<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">列表1</a></li>
                <li><a href="#">列表2</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">列表3</a></li>
            </ul>
        </div>
          
          <div class="btn-group">
            <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            小尺寸菜单<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">列表1</a></li>
                <li><a href="#">列表2</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">列表3</a></li>
            </ul>
        </div>

    {O]U$N5TVQ}8[22LHW@YG9C.png

    推荐学习:Bootstrap视频教程

    以上就是三分钟带你了解bootstrap下拉菜单的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:Bootstrap
    上一篇:聊聊Bootstrap中的导航条 下一篇:一招搞定bootstrap警告框
    第15期线上培训班

    相关文章推荐

    • bootstrap有没有日历控件• 详细了解Bootstrap中的导航组件• 浅谈Bootstrap Blazor组件的用法• 详解Bootstrap中的辅助类• 浅谈Bootstrap中的下拉菜单类(dropdown-menu)• 聊聊Bootstrap中的导航条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网