Bootstrap基本组件学习笔记之按钮组(8)


Posted in Javascript onDecember 07, 2016

按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单。

0x01 基本用法

直接看下面的例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>按钮组</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3">
  <h3>水平排列</h3>
  <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>
 <div class="col-lg-3">
  <h3>垂直排列</h3>
  <div class="btn-group btn-group-vertical">
   <button type="button" class="btn btn-default">Top</button>
   <button type="button" class="btn btn-default">Middle</button>
   <button type="button" class="btn btn-default">Bottom</button>
  </div>
 </div>
 <div class="col-lg-3">
  <h3>两端对齐</h3>
  <div class="btn-group btn-group-justified">
   <a href="#" class="btn btn-default">Left</a>
   <a href="#" class="btn btn-default">Middle</a>
   <a href="#" class="btn btn-default">Right</a>
  </div>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本组件学习笔记之按钮组(8)

需要注意的是,两端对齐的样式只对a标签有效,对button无效。

0x02 嵌套下拉菜单

下面是一个按钮组嵌套下拉菜单的例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>按钮嵌套下拉菜单</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h3>按钮嵌套下拉菜单</h3>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default">按钮1</button>
 <button type="button" class="btn btn-default">按钮2</button>
 <a href="#" class="btn btn-default">超链接</a>
 <div class="btn-group">
  <div class="dropdown">
  <button type="button" class="btn btn-primary" data-toggle="dropdown">
   下拉菜单
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
   <li class="active"><a href="#">菜单1</a></li>
   <li><a href="#">菜单2</a></li>
   <li class="divider"></li>
   <li><a href="#">菜单3</a></li>
   <li><a href="#">菜单4</a></li>
  </ul>
  </div>
 </div>
 <button type="button" class="btn btn-default">按钮3</button>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本组件学习笔记之按钮组(8)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
提高 DHTML 页面性能
Dec 25 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 #Javascript
浅述Javascript的外部对象
Dec 07 #Javascript
vue2.0开发实践总结之疑难篇
Dec 07 #Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 #Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 #Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 #Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
php中的三元运算符使用说明
2011/07/03 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jquery实现弹出层效果实例
2015/05/19 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
班主任自我评价范文
2015/03/11 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS