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>


目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
58 3
|
2月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
101 1
|
22天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
9天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
2月前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
129 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
2月前
|
搜索推荐 前端开发 算法
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
本文介绍了一个基于用户画像和协同过滤算法的音乐推荐系统,使用Django框架、Bootstrap前端和MySQL数据库构建,旨在为用户提供个性化的音乐推荐服务,提高推荐准确性和用户满意度。
110 7
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
|
2月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
40 4
|
1月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
34 0
|
2月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
33 0

热门文章

最新文章

下一篇
无影云桌面