编程 Javascript

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个精彩的专题：

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

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

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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