编程 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 1.5最新版本的改进细节分析

Jan 19 Javascript

json的前台操作和后台操作实现代码

Jan 20 Javascript

web的各种前端打印方法之jquery打印插件PrintArea实现网页打印

Jan 09 Javascript

js动态调用css属性的小规律及实例说明

Dec 28 Javascript

js统计录入文本框中字符的个数并加以限制不超过多少

May 23 Javascript

JQuery实现网页右侧随动广告特效

Jan 17 Javascript

AngularJS中实现用户访问的身份认证和表单验证功能

Apr 21 Javascript

微信小程序模板和模块化用法实例分析

Nov 28 Javascript

JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

Feb 21 Javascript

layer实现弹出层自动调节位置

Sep 05 Javascript

微信小程序实现打开并下载服务器上面的pdf文件到手机

Sep 20 Javascript

Vue使用Element实现增删改查+打包的步骤

Nov 25 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文件上传实例详解！！！

2007/01/02 PHP

php根据isbn书号查询amazon网站上的图书信息的示例

2014/02/13 PHP

php 使用curl模拟ip和来源进行访问的实现方法

2017/05/02 PHP

PHP实现求连续子数组最大和问题2种解决方法

2017/12/26 PHP

JavaScript Base64编码和解码，实现URL参数传递。

2006/09/18 Javascript

利用javascript实现一些常用软件的下载导航

2009/08/03 Javascript

JQERY limittext 插件0.2版(长内容限制显示)

2010/08/27 Javascript

jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

2016/01/04 Javascript

javascript原型继承工作原理和实例详解

2016/04/07 Javascript

原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

2016/10/29 Javascript

win系统下nodejs环境安装配置

2017/05/04 NodeJs

vue弹窗组件的实现示例代码

2018/09/10 Javascript

axios实现文件上传并获取进度

2020/03/25 Javascript

jquery轻量级数字动画插件countUp.js使用详解

2019/10/17 jQuery

原生js实现随机点名功能

2019/11/05 Javascript

Vue实现多标签选择器

2019/11/28 Javascript

[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报

2015/05/29 DOTA

在Windows8上的搭建Python和Django环境

2014/07/03 Python

python 字典修改键(key)的几种方法

2018/08/10 Python

浅谈python函数调用返回两个或多个变量的方法

2019/01/23 Python

在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法

2019/06/18 Python

python 回溯法模板详解

2020/02/26 Python

PyTorch的torch.cat用法

2020/06/28 Python

python下载的库包存放路径

2020/07/27 Python

基于Python的一个自动录入表格的小程序

2020/08/05 Python

python图片合成的示例

2020/11/09 Python

pandas 按日期范围筛选数据的实现

2021/02/20 Python

HTML5实现晶莹剔透的雨滴特效

2014/05/14 HTML / CSS

Html5调用手机摄像头并实现人脸识别的实现

2018/12/21 HTML / CSS

BannerBuzz加拿大：在线定制横幅印刷、广告和标志

2020/03/10 全球购物

总经理岗位职责描述

2014/02/08 职场文书

新任教师自我鉴定

2014/02/24 职场文书

路政管理求职信

2014/06/18 职场文书

2014老师三严三实对照检查材料思想汇报

2014/09/18 职场文书

2015幼儿园庆元旦活动方案

2014/12/09 职场文书

五年级作文之想象作文

2019/10/30 职场文书