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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
angular十大常见问题
Mar 07 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js实现跳一跳小游戏
Jul 31 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
python实现划词翻译
2020/04/23 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python线程信号量semaphore使用解析
2019/11/30 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang