编程 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里模拟sleep(两种实现方式)

Jan 25 Javascript

jquery中animate动画积累的解决方法

Oct 05 Javascript

配置Grunt的Task时通配符支持和动态生成文件名问题

Sep 06 Javascript

微信小程序链接传参并跳转新页面

Nov 29 Javascript

基于JavaScript实现新增内容滚动播放效果附完整代码

Aug 24 Javascript

关于vue中watch检测到不到对象属性的变化的解决方法

Feb 08 Javascript

详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）

Feb 02 Javascript

vue设置导航栏、侧边栏为公共页面的例子

Nov 01 Javascript

autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

May 03 Javascript

Vue使用axios引起的后台session不同操作

Aug 14 Javascript

JavaScript语法约定和程序调试原理解析

Nov 03 Javascript

微信小程序实现多张图片上传功能

Nov 18 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

合作指挥官：孟斯克

2020/03/16 星际争霸

PHP中CURL方法curl_setopt()函数的参数分享

2013/01/19 PHP

php实现redis数据库指定库号迁移的方法

2015/01/14 PHP

PHP中十六进制颜色与RGB颜色值互转的方法

2019/03/18 PHP

用javascript实现的支持lrc歌词的播放器

2007/05/17 Javascript

js导航菜单(自写)简单大方

2013/03/28 Javascript

JS 实现Table相同行的单元格自动合并示例代码

2013/08/27 Javascript

JavaScript生成SQL查询表单的方法

2015/08/13 Javascript

JavaScript学习笔记之数组随机排序

2016/03/23 Javascript

Node.js学习入门

2017/01/03 Javascript

JS使用正则截取两个字符串之间的字符串实现方法详解

2017/01/06 Javascript

除Console.log()外更多的Javascript调试命令

2018/01/24 Javascript

Es6 Generator函数详细解析

2018/02/24 Javascript

详解javascript 正则表达式之分组与前瞻匹配

2018/05/30 Javascript

JavaScript选择排序算法原理与实现方法示例

2018/08/06 Javascript

react中使用css的7中方式(最全总结)

2019/02/11 Javascript

Vue代码整洁之去重方法整理

2019/08/06 Javascript

JS实现图片切换特效

2019/12/23 Javascript

[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品

2014/11/21 DOTA

安装docker-compose的两种最简方法

2019/07/30 Python

Python封装成可带参数的EXE安装包实例

2019/08/24 Python

python数据库编程 ODBC方式实现通讯录

2020/03/27 Python

Python键鼠操作自动化库PyAutoGUI简介(小结)

2020/05/17 Python

利用Python实现斐波那契数列的方法实例

2020/07/26 Python

CSS3制作翻转效果_动力节点Java学院整理

2017/07/11 HTML / CSS

h5页面唤起app如果没安装就跳转下载(iOS和Android)

2020/06/03 HTML / CSS

SmartBuyGlasses意大利：购买太阳镜、眼镜和隐形眼镜

2018/11/20 全球购物

瑞士设计师家具和家居饰品网上商店：Bruno Wickart

2019/03/18 全球购物

医疗纠纷协议书

2014/04/16 职场文书

教师反腐倡廉演讲稿

2014/09/03 职场文书

课堂打架检讨书200字

2014/11/21 职场文书

立项申请报告范本

2015/05/15 职场文书

刑事上诉状范文

2015/05/22 职场文书

《角的初步认识》教学反思

2016/02/17 职场文书

深入详解JS函数的柯里化

2021/06/09 Javascript

vue中使用mockjs配置和使用方式

2022/04/06 Vue.js