首先看看这个代码:

<div class='btn-group'>
<button type='button' class='btn'>计算机</button>
<button type='button' class='btn'>网络</button>
<button type='button' class='btn'>桌面项目</button>
</div>

将功能相近的按钮分成一组,bootstrap 为我们设定了该组的样式

如图:

还可以进行更加复杂的分组

<div class='btn-toolbar'>
<div class='btn-group'>
<button type='button' class='btn'>计算机</button>
<button type='button' class='btn'>网络</button>
<button type='button' class='btn'>桌面项目</button>
</div>
<div class='btn-group'>
<button type='button' class='btn'>按钮一</button>
<button type='button' class='btn'>按钮二</button>
<button type='button' class='btn'>按钮三</button>
</div>
</div>

如图:

使用这种方法可以为网站创建复杂的工具栏

Bootstrap页面布局14 - BS按钮群组的更多相关文章

  1. Bootstrap页面布局13 - BS按钮

    bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='butt ...

  2. Bootstrap页面布局15 - BS带下拉菜单的按钮

    带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...

  3. Bootstrap历练实例:基本按钮群组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  5. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  6. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  7. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

  8. Bootstrap页面布局18 - BS导航路径以及分页器

    导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...

  9. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

随机推荐

  1. PHP 判断数组里的值是否有存在

     一维数组检测<?php  $a = array('as','ddf','ddf','as','qwe','wer','ert'); $res = array_unique($a); var_d ...

  2. Inno setup 简单打包教程

    转自:http://blog.csdn.net/ruifangcui7758/article/details/6662646 前段时间关注了VC6.0自带的Installshield打包的使用方法,感 ...

  3. 我对序列化(Serializable)的理解

    转自:http://blog.tianya.cn/blogger/post_show.asp?BlogID=764&PostID=3231409 序列化是把一个对象的状态写入一个字节流的过程. ...

  4. Android开发规范——命名 (转)

    转自: http://blog.sina.com.cn/s/blog_3f5dd7810101j4u2.html 在讲解命名规范前,先初略介绍下当前主要的标识符命名法和英文缩写规则. 标识符命名法 标 ...

  5. Android SQLite总结(一) (转)

    Android SQLite总结(一)  郑海波 2012-08-21 转载请声明:http://blog.csdn.net/nuptboyzhb/article/details/7891887 前言 ...

  6. struts乱码问题

    我觉得很有必要记录一下,在我搜便了网上乱码问题的解决方案无果之后几乎绝望. 一定要在提交的form 加上 methd =  post

  7. C# EventWaitHandle

    线程同步模型: http://www.xue5.com/Developer/CSharp/755821_2.html http://www.cftea.com/c/2012/03/5518.asp h ...

  8. Codeforces 55D (数位DP+离散化+数论)

    题目链接: http://poj.org/problem?id=2117 题目大意:统计一个范围内数的个数,要求该数能被各位上的数整除.范围2^64. 解题思路: 一开始SB地开了10维数组记录情况. ...

  9. TYVJ P1075 硬币游戏 Label:dp

    背景 农民John的牛喜欢玩硬币,所以John就为它们发明了一个新的两人硬币游戏,叫做Xoinc. 描述 最初地面上有一堆n个硬币(5<=n<=2000),从上面数第i个硬币的价值为C_i ...

  10. (译)V8引擎介绍

    V8是什么? V8是谷歌在德国研发中心开发的一个JavaScript引擎.开源并且用C++实现.可以用于运行于客户端和服务端的Javascript程序. V8设计的初衷是为了提高浏览器上JavaScr ...