Bootstrap系列 -- 32. 按钮垂直分组

简介:   实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。 首页 产品展示 案例分析 联系我们 关于我们 ...

 

  实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

<div class="btn-group-vertical">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">公司简介</a></li>
        <li><a href="##">企业文化</a></li>
        <li><a href="##">组织结构</a></li>
        <li><a href="##">客服服务</a></li>
    </ul>
  </div>
</div>

<div class="btn-group-vertical">

        <button class="btn btn-default">首页</button>
        <button class="btn btn-default">公司介绍</button>
        <div class="btn-group">
            <button class="btn btn-default" data-toggle="dropdown">联系我们<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">蔬菜</a></li>
            </ul>
        </div>
</div>

 

相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `&lt;a&gt;`、`&lt;button&gt;` 或 `&lt;input&gt;` 元素。
Bootstrap5 按钮5
加载按钮示例:通过添加不同的类,可以创建带有加载动画的按钮,包括旋转加载和增长加载效果,同时支持禁用状态。
Bootstrap5 按钮4
按钮组件支持激活和禁用状态。使用 `.active` 类表示按钮处于激活状态,而 `disabled` 属性用于禁用按钮,使其不可点击。对于 `&lt;a&gt;` 标签,由于不支持 `disabled` 属性,可以通过添加 `.disabled` 类来实现相同效果。示例代码展示了如何应用这些类和属性。
|
前端开发
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 保姆级教程(五):按钮组 & 徽章