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>


目录
相关文章
|
8天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
6天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
8天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
8天前
|
前端开发
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
|
8天前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
8天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
8天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
8天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0
|
8天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
37 0
|
8天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
22 1

热门文章

最新文章