首先看看这个代码:

<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. 关于WM_CTLCOLOREDIT的处理的一些问题

    在为duilib封装系统控件的过程中, 再一次遇到了系统EDIT控件文字颜色/文字背景颜色的处理问题. 不要小看这个消息, 她很可能不会让你如愿以偿. 其实我要的目的很简单: 1. 改变文字颜色    ...

  2. Java Hour 53 HQL

    上回写到一个一个最基本的HQL 查询语句写出来都没有什么自信,这一课时就补上HQL 相关的知识. 这种东西笔者最喜欢的官方的原版说明文档了. http://docs.jboss.org/hiberna ...

  3. WCF例子

    WCF入门简单教程(图文) VS2010版 http://hi.baidu.com/grayworm/item/5bb61792fec5b54af142159f http://hi.baidu.com ...

  4. Selenium学习

    Web测试:Selenium使用 2008-12-23 10:49 by 敏捷的水, 17940 阅读, 16 评论, 收藏, 编辑 本文包含的主要内容: Selenium简介 我应该使用哪一个Sel ...

  5. JdbcTemplate主要提供以下五类方法:

    execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修改.删除等语句:batchUpdate方法用于执 ...

  6. 图文详解YUV420, yuv格式2

    YUV格式有两大类:planar和packed. 对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V. 对于packed的YUV格式,每个像素点的Y ...

  7. 2016.6.21 PHP与MqSQL交互之图片读取

    <td width="265"> <?php mysql_select_db("member"); mysql_query("set ...

  8. WCF 超时情形

    在做WCF开发时,会经常碰到超时的情况,总结了一下,主要是由一下原因引起: 1.客户端没有正确地Close. 确保每次客户端调用完毕之后,就要调用Close,保证连接数. 另外,服务端配置最大连接数: ...

  9. VMware12版虚拟机怎么安装win7系统

    工具/原料   VMware workstation 12 windows7镜像ios系统文件 链接:http://pan.baidu.com/s/1c0YrDgG 密码:vna1 建立一个新的虚拟机 ...

  10. TYVJ P1063 数字串 Label:双指针 线性扫描

    描述 给你一个长度为n的数字串,数字串里会包含1-m这些数字.如果连续的一段数字子串包含了1-m这些数字,则称这个数字字串为NUM串.你的任务是求出长度最短的NUM串是什么,只需要输出这个长度即可.1 ...