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 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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文件上传实例详解!!!
2007/01/02 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
vue弹窗组件的实现示例代码
2018/09/10 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
原生js实现随机点名功能
2019/11/05 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python 回溯法模板详解
2020/02/26 Python
PyTorch的torch.cat用法
2020/06/28 Python
python下载的库包存放路径
2020/07/27 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python图片合成的示例
2020/11/09 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
总经理岗位职责描述
2014/02/08 职场文书
新任教师自我鉴定
2014/02/24 职场文书
路政管理求职信
2014/06/18 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
五年级作文之想象作文
2019/10/30 职场文书