编程 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 相关文章推荐

Javascript将string类型转换int类型

Dec 09 Javascript

JavaScript排序算法之希尔排序的2个实例

Apr 04 Javascript

require.js深入了解 require.js特性介绍

Sep 04 Javascript

node.js中的fs.open方法使用说明

Dec 17 Javascript

JS实现数组去重方法总结(六种方法)

Jul 14 Javascript

Angular2开发环境搭建教程之VS Code

Dec 15 Javascript

vue自定义一个v-model的实现代码

Jun 21 Javascript

vue中使用echarts制作圆环图的实例代码

Jul 27 Javascript

Vue2.0生命周期的理解

Aug 20 Javascript

webpack的CSS加载器的使用

Sep 11 Javascript

轻量级富文本编辑器wangEditor结合vue使用方法示例

Oct 10 Javascript

javascript数组元素删除方法delete和splice解析

Dec 09 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 和 HTML

2006/10/09 PHP

php与XML、XSLT、Mysql的结合运用实现代码

2009/11/19 PHP

php curl的深入解析

2013/06/02 PHP

php使用cookie保存用户登录的用户名实例

2015/01/26 PHP

php中判断数组相等的方法以及数组运算符介绍

2015/03/30 PHP

php解决和避免form表单重复提交的几种方法

2016/08/31 PHP

PHP封装的数据库模型Model类完整示例【基于PDO】

2019/03/14 PHP

jquery 插件学习（二）

2012/08/06 Javascript

jQuery怎么解析Json字符串(Json格式/Json对象)

2013/08/09 Javascript

jQuery中size()方法用法实例

2014/12/27 Javascript

jQuery实现的经典滑动门效果

2015/09/22 Javascript

jquery基本选择器匹配多个元素的实现方法

2016/09/05 Javascript

jQuery EasyUI封装简化操作

2016/09/18 Javascript

js中this对象用法分析

2018/01/05 Javascript

js+html5 canvas实现ps钢笔抠图

2019/04/28 Javascript

Python中__new__与__init__方法的区别详解

2015/05/04 Python

分数霸榜! python助你微信跳一跳拿高分

2018/01/08 Python

python字符串常用方法

2018/06/14 Python

解决Mac下首次安装pycharm无project interpreter的问题

2018/10/29 Python

python中调试或排错的五种方法示例

2019/09/12 Python

Python 面向对象之封装、继承、多态操作实例分析

2019/11/21 Python

python 实现生成均匀分布的点

2019/12/05 Python

AUC计算方法与Python实现代码

2020/02/28 Python

python从PDF中提取数据的示例

2020/10/30 Python

JACK & JONES瑞典官方网站：杰克琼斯欧式风格男装

2017/12/23 全球购物

Myprotein亚太地区：欧洲第一在线运动营养品牌

2020/12/20 全球购物

旅游管理本科生求职信

2013/10/14 职场文书

大一军训感言

2014/01/09 职场文书

音乐学专业求职信

2014/07/22 职场文书

生活部的活动方案

2014/08/19 职场文书

工作业绩不及格检讨书

2014/10/28 职场文书

见习报告格式范文

2014/11/08 职场文书

2015年大学生实习评语

2015/03/25 职场文书

2015年售后服务工作总结

2015/04/25 职场文书

2015年环境监察工作总结

2015/07/23 职场文书

Python测试框架pytest核心库pluggy详解

2022/08/05 Golang