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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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解码unicode编码的中文字符代码分享
2014/08/13 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
layui表格数据重载
2019/07/27 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python中bisect的用法
2014/09/23 Python
python实现文本文件合并
2015/12/29 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
对python中dict和json的区别详解
2018/12/18 Python
python设置环境变量的作用整理
2020/02/17 Python
Python中return函数返回值实例用法
2020/11/19 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
外贸采购员岗位职责
2015/04/03 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js