编程 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 ThickBox插件使用心得(不建议使用)

Sep 08 Javascript

js实现杯子倒水问题自动求解程序

Mar 25 Javascript

javascript入门教程基础篇

Nov 16 Javascript

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

Feb 16 Javascript

学JavaScript七大注意事项【必看】

May 04 Javascript

JavaScript必知必会（二) null 和undefined

Jun 08 Javascript

Vue-router 类似Vuex实现组件化开发的示例

Sep 15 Javascript

浅谈webpack4.x 入门(一篇足矣)

Sep 05 Javascript

详解VUE前端按钮权限控制

Apr 26 Javascript

JavaScript Dom 绑定事件操作实例详解

Oct 02 Javascript

Vue 中使用lodash对事件进行防抖和节流操作

Jul 26 Javascript

vue任意关系组件通信与跨组件监听状态vue-communication

Oct 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

php使用Jpgraph绘制复杂X-Y坐标图的方法

2015/06/10 PHP

盘点PHP和ASP.NET的10大对比！

2015/12/24 PHP

PHP常用的三种设计模式

2017/02/17 PHP

AJAX的使用方法详解

2017/04/29 PHP

Bootstrap+PHP实现多图上传功能实例详解

2018/04/08 PHP

PHP 获取客户端 IP 地址的方法实例代码

2018/11/11 PHP

PHP的curl函数的用法总结

2019/02/14 PHP

php+mysql开发中的经验与常识小结

2019/03/25 PHP

jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

2010/09/10 Javascript

JavaScript日历实现代码

2010/09/12 Javascript

jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法

2011/01/19 Javascript

深入理解JavaScript 闭包究竟是什么

2013/04/12 Javascript

跟我学习javascript的全局变量

2015/11/16 Javascript

jQuery实现页面顶部显示的进度条效果完整实例

2015/12/09 Javascript

jquery ajax双击div可直接修改div中的内容

2016/03/04 Javascript

Node.js安装配置图文教程

2017/05/10 Javascript

vue 权限认证token的实现方法

2018/07/17 Javascript

微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

2018/10/09 Javascript

Javascript实现秒表倒计时功能

2018/11/17 Javascript

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

2019/08/06 Javascript

vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

2019/09/01 Javascript

layuiAdmin循环遍历展示商品图片列表的方法

2019/09/16 Javascript

小程序使用wxs解决wxml保留2位小数问题

2019/12/13 Javascript

JavaScript 实现轮播图特效的示例

2020/11/05 Javascript

pandas去重复行并分类汇总的实现方法

2019/01/29 Python

python实现对象列表根据某个属性排序的方法详解

2019/06/11 Python

django框架使用orm实现批量更新数据的方法

2019/06/21 Python

Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)

2019/08/12 Python

Python3连接Mysql8.0遇到的问题及处理步骤

2020/02/17 Python

Python图像处理库PIL的ImageFilter模块使用介绍

2020/02/26 Python

Python中如何定义一个函数

2016/09/06 面试题

理工类毕业自我鉴定

2014/02/20 职场文书

动员大会主持词

2014/03/20 职场文书

2016年大学生党员公开承诺书

2016/03/24 职场文书

详解Laravel框架的依赖注入功能

2021/05/27 PHP

十大经典日本动漫排行榜海贼王第三,犬夜叉仅第八

2022/03/18 日漫