Bootstrap-CL:按钮组
ylbtech-Bootstrap-CL:按钮组 |
1.返回顶部 |
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:
Class | 描述 | 代码示例 |
---|---|---|
.btn-group | 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 |
<div class="btn-group"> |
.btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件。 |
<div class="btn-toolbar" role="toolbar"> |
.btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。 |
<div class="btn-group btn-group-lg">...</div> |
.btn-group-vertical | 该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。 |
<div class="btn-group-vertical"> |
基本的按钮组
下面的实例演示了上面表格中讨论到的 class .btn-group 的使用:
实例
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
结果如下所示:

按钮工具栏
下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用:
实例
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
结果如下所示:

按钮的大小
下面的实例演示了上面表格中讨论到的 class .btn-group-* 的使用:
实例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
结果如下所示:

嵌套
您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时,就会用到这个。
实例
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>
结果如下所示:

垂直的按钮组
下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用:
实例
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>
结果如下所示:

2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
Bootstrap-CL:按钮组的更多相关文章
- bootstrap完善按钮组bug
.btn.active { border: 1px solid #ff9400 !important; color: #ff9400 !important; } <div class=" ...
- Bootstrap<基础十三> 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap按钮组
种类 -a, input , button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...
- Bootstrap系列 -- 29. 按钮组
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...
- Bootstrap入门(十)组件4:按钮组与下拉菜单结合
Bootstrap入门(十)组件4:按钮组与下拉菜单结合 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...
- Bootstrap入门(九)组件3:按钮组
Bootstrap入门(九)组件3:按钮组 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...
- ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
随机推荐
- for 循环进化史
ECMAScript 6已经逐渐普及,经过二十多年的改进,很多功能也有了更成熟的语句,比如 for 循环 这篇博客将介绍一下从最初的 for 循环,到 ES6 的 for-of 等四种遍历方法 先定义 ...
- Linux上利用NFS实现远程挂载
两台服务器 192.168.1.1 [WEB服务器] 192.168.1.2 [录音服务器] 说明 在192.168.1.2服务器上每天有许多录音文件生成,192.168.1.1作为WEB服务器,里面 ...
- android官方Api 理解Activity生命周期的回调机制(适合有基础的人看)
原文地址:http://www.android-doc.com/training/basics/activity-lifecycle/starting.html#lifecycle-states 此处 ...
- gulp - sass 插件一直安装不好?
1.没有sass,只存在与scss 任务 gulp.task('scss', function() { return gulp.src(app.srcPath + '/sass/*.scss') .p ...
- 杭电1708Fibonacci String
Fibonacci String Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 手写 redux 和 react-redux
1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentStat ...
- spring 事件模式 源代码导读
一,jdk 事件对象基类 package java.util; import java.io.Serializable; public class EventObject implements Ser ...
- mac上的xampp出现Access forbidden! You don’t have permission to access the requested object. It is either
一个Joomla!程序,之前是在win上的xampp上运行得非常好的,当我把它拿到mac下面的xampp上去运行的时候,发现有问题,没法运行,报以下的错误: Access forbidden! Yo ...
- 使用外部 toolchain 编译 openwrt
默认编译 openwrt 时会先编译一套 toolchain. 这个步骤耗时较长. 使用外部 toolchain 可以多个 project 共用一套 toolchain , 而且也不重再编译它了. 省 ...
- html-基本form元素---ShinePans
<html> <meta http-equiv="content-type" content="text/html;charset=UTF-8" ...