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

datagrid框架的删除添加与修改

Apr 08 Javascript

JavaScript中setInterval的用法总结

Nov 20 Javascript

JQuery中使用.each()遍历元素学习笔记

Nov 08 Javascript

node.js超时timeout详解

Nov 26 Javascript

jquery利用命名空间移除绑定事件的方法

Mar 11 Javascript

JQuery实现带排序功能的权限选择实例

May 18 Javascript

js 动态生成json对象、时时更新json对象的方法

Dec 02 Javascript

Node.js Mongodb 密码特殊字符 @的解决方法

Apr 11 Javascript

用Axios Element实现全局的请求loading的方法

Mar 15 Javascript

Vue.js中provide/inject实现响应式数据更新的方法示例

Oct 16 Javascript

JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】

Apr 28 Javascript

详解JavaScript类型判断的四种方法

Oct 21 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

discuz Passport 通行证整合笔记

2008/06/30 PHP

php的chr和ord函数实现字符加减乘除运算实现代码

2011/12/05 PHP

关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况

2013/01/06 PHP

解析zend studio中直接导入svn中的项目的方法步骤

2013/06/21 PHP

输入值/表单提交参数过滤有效防止sql注入的方法

2013/12/25 PHP

浅析ThinkPHP中的pathinfo模式和URL重写

2014/01/06 PHP

jQuery 开天辟地入门篇一

2009/12/09 Javascript

JavaScript组件焦点与页内锚点间传值的方法

2015/02/02 Javascript

jQuery xml字符串的解析、读取及查找方法

2016/03/01 Javascript

概述一个页面从输入URL到页面加载完的过程

2016/12/16 Javascript

微信小程序传值取值的几种方法总结

2017/01/16 Javascript

js轮播图透明度切换（带上下页和底部圆点切换）

2017/04/27 Javascript

客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解

2017/08/26 Javascript

VUE2.0+Element-UI+Echarts封装的组件实例

2018/03/02 Javascript

vue如何引入sass全局变量

2018/06/28 Javascript

在小程序中使用canvas的方法示例

2018/09/17 Javascript

解决使用layui对select append元素无效或者未及时更新的问题

2019/09/18 Javascript

微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

2019/11/01 Javascript

跟老齐学Python之关于类的初步认识

2014/10/11 Python

Django重装mysql后启动报错：No module named ‘MySQLdb’的解决方法

2018/04/22 Python

pandas的排序和排名的具体使用

2019/07/31 Python

Django REST框架创建一个简单的Api实例讲解

2019/11/05 Python

修复iPhone的safari浏览器上submit按钮圆角bug

2012/12/24 HTML / CSS

Trunki英国官网：儿童坐骑式行李箱

2017/05/30 全球购物

美国现代家具网站：Design Within Reach

2018/07/19 全球购物

澳大利亚买卖正宗二手奢侈品交易平台：Luxe.It.Fwd

2019/10/16 全球购物

StubHub中国：购买和出售全球活动门票

2020/01/01 全球购物

日语专业推荐信

2013/11/12 职场文书

办公室驾驶员岗位职责

2013/11/15 职场文书

职业技术学校毕业生推荐信

2013/12/03 职场文书

《口技》教学反思

2014/02/21 职场文书

商场周年庆活动方案

2014/08/19 职场文书

房屋买卖协议书范本

2014/09/27 职场文书

教代会闭幕词

2015/01/28 职场文书

2016年学校禁毒宣传活动工作总结

2016/04/05 职场文书

Python Pandas pandas.read_sql_query函数实例用法分析

2021/06/21 Python