美文网首页前端
Bootstrap下拉菜单

Bootstrap下拉菜单

作者: 马佳乐 | 来源:发表于2022-03-28 10:27 被阅读0次
  • 需要两层div,最外层div需要.dropdown,用来包裹按钮和下拉菜单里的内容
  • 按钮层的按钮和向下箭头可合在一起或分开写
  • 可通过.bt-*设置按钮颜色
  • 向下箭头需添加.dropdown-toggle属性进行箭头的显示
  • 如果按钮和箭头分开写,需要添加.btn-group进行合并显示
  • 可添加.dropdown-toggle-split把按钮和箭头进行紧凑显示
  • 下拉菜单项需要放在一个div里,并添加.dropdown-menu属性
  • 每个下拉菜单项可是一个超链接,需添加.dropdown-item属性
  • 每个下拉菜单项可添加.active.disabled进行选中或不可选
  • 可添加<div class="dropdown-divider"></div>对每个下拉菜单项进行分隔
  • 可添加.btn-lg.btn-sm对按钮进行设置大小
  • 可在外层div里添加.dropup.dropleft.dropright设置箭头的方向
  • 可对包含菜单项的div添加.dropdown-menu-right设置菜单项的对齐方式,默认左对齐
    练习:
        <div class="dropdown btn-group">
            <!--<button class="btn btn-success dropdown-toggle " data-toggle="dropdown">下拉菜单</button>-->
            <button class="btn btn-success btn-lg">下拉菜单</button>
            <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item active">选项一</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">选项二</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item disabled">选项三</a>
            </div>
        </div>
        <br /><br />
        <div class="dropdown btn-group dropup">
            <!--<button class="btn btn-success dropdown-toggle " data-toggle="dropdown">下拉菜单</button>-->
            <button class="btn btn-info btn-lg">下拉菜单(箭头向上)</button>
            <button class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item active">选项一</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">选项二</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item disabled">选项三</a>
            </div>
        </div>

相关文章

  • Bootstrap 10.12

    下拉菜单 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文...

  • Bootstrap 学习 - 菜单 - 按钮 - 导航

    1、下拉菜单(基本用法) 在使用 Bootstrap 框架的下拉菜单时,必须调用 Bootstrap 框架提供的 ...

  • 第十九谈:下拉菜单

    本节课我们来开始学习 Bootstrap 的提供的下拉菜单组件。 一.下拉菜单 下拉菜单组件依赖于 Popper....

  • Bootstrap - 菜单2

    下拉菜单(对齐方式) 实现右对齐方法: Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容...

  • bootstrap 导航

    bootstrap导航加下拉菜单(二级导航) 如图 说明在Bootstrap框架中制作二级导航,只需要将li当作父...

  • Bootstrap - 菜单1

    下拉菜单(基本用法)- 跳转页面 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同...

  • Bootstrap

    Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站...

  • Bootstrap - 下拉菜单

    代码: 注意:可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代...

  • Bootstrap下拉菜单

    需要两层div,最外层div需要.dropdown,用来包裹按钮和下拉菜单里的内容 按钮层的按钮和向下箭头可合在一...

  • Bootstrap(基础二)

    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...

网友评论

    本文标题:Bootstrap下拉菜单

    本文链接:https://www.haomeiwen.com/subject/tnfpjrtx.html