首先看看这个代码:

<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. wpa_supplicant.conf

    转自:http://w1.fi/gitweb/gitweb.cgi?p=hostap.git;a=blob_plain;f=wpa_supplicant/wpa_supplicant.conf ### ...

  2. java类加载时机与过程

    转自:http://www.tuicool.com/articles/QZnENv 说明:本文的内容是看了<深入理解Java虚拟机:JVM高级特性与最佳实践>后为加印象和理解,便记录了重要 ...

  3. iOS开发网络篇—网络请求(HTTP协议)小结(转)

    1. 聊一下HTTP协议(协议的完整的通信过程) 2.通信过程 1> 请求 * 客户端 --> 服务器 * 请求的内容 a. 请求行(请求方法\HTTP协议\请求资源路径) b. 请求头( ...

  4. Maven打包部署脚本

    #!/bin/sh SVN_USER_NAME= SVN_PASSWORD= ROOT_PATH PROJECT_NAME ACTION SVN_LIB_ROOT USER_ACCOUNT PASSW ...

  5. sybase常用SQL语句,工作中积累的

    -------创建sybase设备 语句--------- disk init name="DEV_DB_CLIENT_DAT26", physname="F:\syba ...

  6. 网页中meta标记

    网页中常常看见有这样的标记,他们是清浏览器缓存用的    <meta http-equiv="> PS:清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页 ...

  7. CPU的性能对比

    笔记本CPU之前的性能对比 下面的分数都是根据PerformanceTest测试的出来的结果,现在的笔记本CPU有很多种,你在购买笔记本的时候只看到CPU的型号,而且现在的CPU型号太多而且命名方式也 ...

  8. kinect学习笔记(四)——各种数据流

    一.kinect开发的一个流程图 1.我们可以知道一个简单的框架就是几部分 (1)选择使用的kinect传感器 KinectSensor.KinectSensors[] (2)打开需要的数据流 _ki ...

  9. PHP 5.4 中经 htmlspecialchars 转义后的中文字符串为空,DeDeCMS在PHP5.4下编辑器中文不显示问题

    在加入 发布招聘功能的时候,出现问题了,就是修改招聘信息的时候.编辑器内容不显示,只显示英文,中文不显示,以前记得开发此功能没这问题啊!然后各种原因找不出,没办法,从编辑器函数入手,一步一步查,查到 ...

  10. Spark Streaming中向flume拉取数据

    在这里看到的解决方法 https://issues.apache.org/jira/browse/SPARK-1729 请是个人理解,有问题请大家留言. 其实本身flume是不支持像KAFKA一样的发 ...