首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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代码
Aug 05 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
对node.js中render和send的用法详解
May 14 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 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
二维数组(2) 循环(3) IDEA(2) OpenLayer(1) android studio(3) 嵌套(1) 多维数组(1) 分块(1) 移动开发(2) 安卓(1)
You might like
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
六行python代码的爱心曲线详解
2019/05/17 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python实现简单学生信息管理系统
2020/04/09 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python 在函数上添加包装器
2020/07/28 Python
基于Python正确读取资源文件
2020/09/14 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
2014庆六一活动方案
2014/03/02 职场文书
什么是就业协议书
2014/04/17 职场文书
志愿者活动总结
2014/04/28 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android