Bootstrap响应式前端框架笔记八——按钮组

简介: Bootstrap响应式前端框架笔记八——按钮组

在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代码如下:


 <p>正常的按钮组</p>

 <div class="btn-group">

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <button class="btn btn-primary">右按钮</button>

 </div>



   也可以将一组按钮组包裹在btn-toolbar类中,使其组合成为按钮组工具栏,示例如下:


 <p>按钮组工具栏</p>

 <div class="btn-toolbar">

  <div class="btn-group">

   <button class="btn btn-default">左按钮</button>

   <button class="btn btn-danger">中心按钮</button>

   <button class="btn btn-primary">右按钮</button>

  </div>

  <div class="btn-group">

   <button class="btn btn-default">左按钮</button>

   <button class="btn btn-primary">右按钮</button>

  </div>

  <div class="btn-group">

   <button class="btn btn-primary">独立按钮</button>

  </div>

 </div>


按钮组也可以进行嵌套,使用按钮组嵌套的方式也可以实现下拉菜单效果,示例如下:


 <div class="btn-group">

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <div class="btn-group">

   <button class="btn btn-info dropdown-toggle">菜单

   <span class="caret"></span>

   </button>

   <ul class="dropdown-menu">

    <li><a>金牛</a></li>

    <li><a>狮子</a></li>

   </ul>

  </div>

 </div>


   默认的按钮组是水平排列的,为其设置btn-group-vertical类可以将其设置为竖直排列的,示例如下:


 <p>竖直排列的按钮组</p>

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

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <button class="btn btn-primary">右按钮</button>

 </div>


   如果需要使按钮组填充其父容器,需要设置btn-group-justified类,并且使用a标签作为按钮,示例如下:


 <p>设置按钮组宽度充满父容器</p>

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

  <a class="btn btn-default">左按钮</a>

  <a class="btn btn-danger">中心按钮</a>

  <a class="btn btn-primary">右按钮</a>

 </div>


   通过按钮组,可以十分方便的实现分裂式下拉菜单,示例如下:


 <p>分裂式下拉菜单</p>

 <div class="btn-group">

  <button type="button" class="btn btn-danger">金牛</button>

  <button type="button" class="btn btn-danger dropdown-toggle">

      <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 class="divider"></li>

   <li>

    <a href="#">无</a>

   </li>

  </ul>

 </div>


目录
相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
|
前端开发
Bootstrap5 按钮组1
Bootstrap 5 的按钮组功能允许将多个按钮排列在同一行。通过在 `&lt;div&gt;` 元素上添加 `.btn-group` 类来实现。还可以使用 `.btn-group-lg` 或 `.btn-group-sm` 类来调整按钮组的大小。示例代码展示了如何创建不同大小的按钮组。
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` 类来实现相同效果。示例代码展示了如何应用这些类和属性。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1174
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    519
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    402
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    396
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    512
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    684
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1223
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    275
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1018
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    474