编程 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 无符号右移赋值操作

Apr 17 Javascript

javascript写的日历类(基于pj)

Dec 28 Javascript

javascript常见数据验证插件大全

Aug 03 Javascript

jQuery获取元素父节点的方法

Jun 21 Javascript

js编写的treeview使用方法

Nov 11 Javascript

js控制按钮,防止频繁点击响应的实例

Feb 15 Javascript

JS触摸事件、手势事件详解

May 04 Javascript

Javascript中this关键字指向问题的测试与详解

Aug 11 Javascript

node使用Koa2搭建web项目的方法

Oct 17 Javascript

Mint UI 基于 Vue.js 移动端组件库

Nov 07 Javascript

vue-cli3+typescript新建一个项目的思路分析

Aug 06 Javascript

JavaScript检测是否开启了控制台（F12调试工具）

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

我的论坛源代码(七)

2006/10/09 PHP

PHP中获取内网用户MAC地址（WINDOWS/linux）的实现代码

2011/08/11 PHP

PHP简单实现断点续传下载的方法

2015/09/25 PHP

YII框架http缓存操作示例

2019/04/29 PHP

laravel框架学习笔记之组件化开发实现方法

2020/02/01 PHP

[原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结

2007/03/12 Javascript

JS中生成随机数的用法及相关函数

2016/01/09 Javascript

JS实现图片垂直居中显示小结

2016/12/13 Javascript

nodejs的压缩文件模块archiver用法示例

2017/01/18 NodeJs

jQuery页面弹出框实现文件上传

2017/02/09 Javascript

利用Node.js对文件进行重命名

2017/03/12 Javascript

Vue中保存用户登录状态实例代码

2017/06/07 Javascript

Angular在模板驱动表单中自定义校验器的方法

2017/08/09 Javascript

vue.js使用v-model指令实现的数据双向绑定功能示例

2018/05/22 Javascript

微信小程序中换行空格（多个空格）写法详解

2018/07/10 Javascript

详解vue项目打包步骤

2019/03/29 Javascript

使用 node.js 模仿 Apache 小部分功能

2019/07/07 Javascript

详解elementui之el-image-viewer(图片查看器)

2019/08/30 Javascript

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

2019/10/25 Javascript

JavaScript鼠标拖拽事件详解

2020/04/03 Javascript

[01:05:00]2018国际邀请赛表演赛 Pain vs OpenAI

2018/08/24 DOTA

Python实现PS滤镜Fish lens图像扭曲效果示例

2018/01/29 Python

python爬取个性签名的方法

2018/06/17 Python

python单例模式实例解析

2018/08/28 Python

Python实现TCP探测目标服务路由轨迹的原理与方法详解

2019/09/04 Python

如何将 awk 脚本移植到 Python

2019/12/09 Python

Python之变量类型和if判断方式

2020/05/05 Python

解决运行出现'dict' object has no attribute 'has_key'问题

2020/07/15 Python

Python requests上传文件实现步骤

2020/09/15 Python

JAVA和C++区别都有哪些

2015/03/30 面试题

中专毕业自我鉴定

2013/10/16 职场文书

学校十一活动方案

2014/02/01 职场文书

初三开学计划书

2014/04/27 职场文书

基于Redis的List实现特价商品列表功能

2021/08/30 Redis

java版简单三子棋游戏

2022/05/04 Java/Android

java实现自定义时钟并实现走时功能

2022/06/21 Java/Android