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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
vue实现循环滚动列表
Jun 30 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python提取页面内url列表的方法
2015/05/25 Python
Python人脸识别初探
2017/12/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Selenium的使用详解
2018/10/19 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python输出数学符号实例
2020/05/11 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python tkinter实现连连看游戏
2020/11/16 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
法学专业应届生求职信
2013/10/16 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
《在家里》教后反思
2014/03/01 职场文书
律政俏佳人观后感
2015/06/09 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书