Bootstrap CSS组件之按钮组(btn-group)


Posted in Javascript onDecember 17, 2016

.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical
容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的。

容器的多个分组以table风格进行显示,每组之间保持5px的left margin

//源码
.btn-toolbar:before,
.btn-toolbar:after{
 display:table;
 content:" ";
}
.btn-toolbar:after{
 clear:both;
}

.btn-toolbar {
 margin-left: -5px;
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
 float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
 margin-left: 5px;
}

例子见按钮组.html?普通分组,嵌套分组,垂直分组

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
 <!-- btn-toolbar/btn-group 按钮组和按钮栏-->
 <div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
   <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">middle</button>
   <button type="button" class="btn btn-default">right</button>
  </div>
  <div class="btn-group">
   <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">middle</button>
   <button type="button" class="btn btn-default">right</button>
  </div>
  <div class="btn-group btn-group-sm">
   <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">middle</button>
   <button type="button" class="btn btn-default">right</button>
  </div>
  <div class="btn-group btn-group-xs">
   <button type="button" class="btn btn-default">left</button>
   <button type="button" class="btn btn-default">middle</button>
   <button type="button" class="btn btn-default">right</button>
  </div>
 </div>

 <!-- 嵌套分组:
   平常经常下拉菜单和按钮组排列在一起,只需要把dropdown下拉菜单外部包装一个div容器元素,
   并在div元素上重新应用.btn-group样式,并且和普通的按钮放在同一级
   未在dropdown-menu的父容器的div上设置dropdown样式,因为btn-group里设置了该相对定位,就省略了dropdown样式-->
 <div class="btn-group">
  <button type="button" class="btn btn-default">首页</button>
  <button type="button" class="btn btn-default">个人简介</button>
  <button type="button" class="btn btn-default">作品</button>
  <div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
    图书<span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">js</a></li>
   </ul>
  </div>
 </div>

 <!-- 垂直分组:
   需要注意的是,btn-group-vertical不是在现有的btn-group样式基础上决定的
   -->
 <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>
 </div>

 <!-- 自定义分组:
   .btn-group-justified样式提供了一个特殊的功能,就是在.btn-group容器上,如果使用了该样式,则所有按钮都会100%充满容器元素
   利用了display:table,display:table-cell属性实现的-->
 <div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-default">左</a>
  <a href="#" class="btn btn-default">中</a>
  <a href="#" class="btn btn-default">右</a>
 </div>
 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue :src 文件路径错误问题的解决方法
May 15 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
javascript 数组去重复(在线去重工具)
Dec 17 #Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 #Javascript
You might like
php 设计模式之 工厂模式
2008/12/19 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
深入理解Python装饰器
2016/07/27 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python绘图实现显示中文
2019/12/04 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
护理自我鉴定范文
2013/10/06 职场文书
汽车运用工程毕业生自荐信
2013/10/29 职场文书
人事助理岗位职责
2013/11/18 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
医学生个人求职信范文
2014/02/07 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
护士年终考核评语
2014/12/31 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript