编程 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的过滤器.filter()方法想到的

Sep 29 Javascript

浅谈angular.js中实现双向绑定的方法$watch $digest $apply

Oct 14 Javascript

理解JS绑定事件

Jan 19 Javascript

浅谈js之字面量、对象字面量的访问、关键字in的用法

Nov 20 Javascript

深入理解vue路由的使用

Mar 24 Javascript

完美解决浏览器跨域的几种方法(汇总)

May 08 Javascript

Vue通过URL传参如何控制全局console.log的开关详解

Dec 07 Javascript

JS面试题大坑之隐式类型转换实例代码

Oct 14 Javascript

详解react阻止无效重渲染的多种方式

Dec 11 Javascript

Vue开发之封装上传文件组件与用法示例

Apr 25 Javascript

jquery实现加载更多"转圈圈"效果(示例代码)

Nov 09 jQuery

vue的项目如何打包上线

Apr 13 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 上一篇,下一篇文章实现代码与原理说明

2010/05/09 PHP

php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法

2014/11/11 PHP

PHP的Yii框架中移除组件所绑定的行为的方法

2016/03/18 PHP

php中foreach结合curl实现多线程的方法分析

2016/09/22 PHP

php+javascript实现的动态显示服务器运行程序进度条功能示例

2017/08/07 PHP

JS的replace方法详细介绍

2012/11/09 Javascript

几种延迟加载JS代码的方法加快网页的访问速度

2013/10/12 Javascript

javascript窗口宽高,鼠标位置,滚动高度(详细解析)

2013/11/18 Javascript

js取模（求余数）隔行变色

2014/05/15 Javascript

jQuery对象的length属性用法实例

2014/12/27 Javascript

javascript制作sql转换为stringBuffer的小工具

2015/04/03 Javascript

javascript中数组方法汇总

2015/07/07 Javascript

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

2016/01/15 Javascript

利用css+原生js制作简单的钟表

2020/04/07 Javascript

Bootstrap 布局组件（全）

2016/07/18 Javascript

JS实现直接运行html代码的方法

2017/03/13 Javascript

js事件委托和事件代理案例分享

2017/07/25 Javascript

关于vue中 $emit的用法详解

2018/04/12 Javascript

nodejs前端模板引擎swig入门详解

2018/05/15 NodeJs

详解从NodeJS搭建中间层再谈前后端分离

2018/11/13 NodeJs

在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

2018/11/28 Javascript

JS实现换肤功能的方法实例详解

2019/01/30 Javascript

Python enumerate遍历数组示例应用

2008/09/06 Python

Python实现测试磁盘性能的方法

2015/03/12 Python

Python命令行参数解析模块getopt使用实例

2015/04/13 Python

Python进阶学习之特殊方法实例详析

2017/12/01 Python

Python编程之gui程序实现简单文件浏览器代码

2017/12/08 Python

Python实现基于C/S架构的聊天室功能详解

2018/07/07 Python

python leetcode 字符串相乘实例详解

2018/09/03 Python

PyCharm代码提示忽略大小写设置方法

2018/10/28 Python

python读取hdfs上的parquet文件方式

2020/06/06 Python

英国最受欢迎的手表网站：Watch Shop

2016/10/21 全球购物

焦裕禄精神心得体会

2014/09/02 职场文书

2014年城管个人工作总结

2014/12/08 职场文书

会计求职自荐信

2015/03/26 职场文书

安全责任协议书范本

2016/03/23 职场文书