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

JQuery 无废话系列教程(一) jquery入门 [推荐]

Jun 23 Javascript

javascript中"/"运算符常见错误

Oct 13 Javascript

flash遮住div问题的正确解决方法

Feb 27 Javascript

jQuery旋转木马式幻灯片轮播特效

Dec 04 Javascript

js面向对象的写法

Feb 19 Javascript

微信小程序 WXDropDownMenu组件详解及实例代码

Oct 24 Javascript

关于Jquery中的bind(),on()绑定事件方式总结

Oct 26 Javascript

JS中对数组元素进行增删改移的方法总结

Dec 15 Javascript

vue二级菜单导航点击选中事件的方法

Sep 12 Javascript

javascript canvas API内容整理

Feb 16 Javascript

JavaScript面试中常考的字符串操作方法大全(包含ES6)

May 10 Javascript

Vuex的热更替如何实现

Jun 05 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

thinkphp浏览历史功能实现方法

2014/10/29 PHP

PHP生成不重复随机数的方法汇总

2014/11/19 PHP

php操作memcache缓存方法分享

2015/06/03 PHP

Laravel利用gulp如何构建前端资源详解

2018/06/03 PHP

PHP strripos函数用法总结

2019/02/11 PHP

区分JS中的undefined,null,"",0和false

2007/03/08 Javascript

ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

2012/03/14 Javascript

Javascript获取窗口(容器)的大小及位置参数列举及简要说明

2012/12/09 Javascript

parentElement,srcElement的使用小结

2014/01/13 Javascript

js判断浏览器是否支持html5

2014/08/17 Javascript

Node.js中的缓冲与流模块详细介绍

2015/02/11 Javascript

javascript获取select值的方法分析

2015/07/02 Javascript

微信小程序简单教程实例详解

2017/01/13 Javascript

利用vue + element实现表格分页和前端搜索的方法

2017/12/25 Javascript

Bootstrap开发中Tab标签页切换图表显示问题的解决方法

2018/07/13 Javascript

layui 点击重置按钮, select 并没有被重置的解决方法

2019/09/03 Javascript

layui 实现二级弹窗弹出之后关闭一级弹窗的方法

2019/09/18 Javascript

使用vue编写h5公众号跳转小程序的实现代码

2020/11/27 Vue.js

[02:41]辉夜杯现场一家三口 “我爸玩风行我玩血魔”

2015/12/27 DOTA

通过Python来使用七牛云存储的方法详解

2015/08/07 Python

Python 使用with上下文实现计时功能

2018/03/09 Python

破解安装Pycharm的方法

2018/10/19 Python

python的re模块使用方法详解

2019/07/26 Python

Python随机函数库random的使用方法详解

2019/08/21 Python

使用python检查yaml配置文件是否符合要求

2020/04/09 Python

如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑

2020/10/15 Python

一个J2EE项目团队的主要人员组成是什么

2012/06/04 面试题

《秋姑娘的信》教学反思

2014/02/28 职场文书

产品质量承诺书

2014/03/27 职场文书

会展策划与管理专业求职信

2014/06/09 职场文书

生物科学专业自荐书

2014/06/20 职场文书

领导班子遵守党的政治纪律情况对照检查材料

2014/09/26 职场文书

科长个人四风问题整改措施思想汇报

2014/10/13 职场文书

2014年前台文员工作总结

2014/12/08 职场文书

先进工作者申报材料

2014/12/23 职场文书

店长岗位职责

2015/02/11 职场文书