首先看看这个代码:

<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. 随机sample文件Python程序

    经常遇到由于样本巨大,需要sample一部分文件进行案例分析的情况,下面的程序主要为了随机抽取一个大文件中的N行. #!/usr/bin/python # -*- coding: <encodi ...

  2. uva 562

    Description   It's commonly known that the Dutch have invented copper-wire. Two Dutch men were fight ...

  3. JNI NDK开发Crash错误定位 调试

    总结: 搜索backtrace  然后: $ /d/android-ndk-r10c/toolchains/arm-linux-androideabi-4.9/prebuilt/windows-x86 ...

  4. Stay教你程序员泡妞攻略

    七天大长假,得瑟的人们又要粗来秀恩爱晒旅途了,苦逼的程序员们要么加班(说好的三倍呢),要么宅家自lu.想想都觉得悲哀.一来我们抱怨生活只有代码,二来只让代码充斥自己的生活.在Stay看来,学会生活要比 ...

  5. js:语言精髓笔记7----原型继承

    面向对象有三个基本特性:封装,继承,多态:如果都满足的话称为面向对象语言:而部分满足则称为基于对象语言: 数据类型实现模型描述: JavaScript对象模型: 构造过程:函数->构造器 构造器 ...

  6. logback 配置详解【讲解较全的博客网站】

    http://blog.csdn.net/haidage/article/category/812478 详解(一)http://blog.csdn.net/haidage/article/detai ...

  7. 简单几何(线段相交)+模拟 POJ 3449 Geometric Shapes

    题目传送门 题意:给了若干个图形,问每个图形与哪些图形相交 分析:题目说白了就是处理出每个图形的线段,然后判断是否相交.但是读入输出巨恶心,就是个模拟题加上线段相交的判断,我第一次WA不知道输出要按字 ...

  8. HDU3657 Game(最小割)

    题目大概说,给一个n×m的格子,每个格子都有数字,选择一个格子就能加上格子数字的分数,有k个格子必须选择,如果两个相邻的格子都被选择了那分数要减去两个格子数字的与再乘2.问能取得的最大分数. 已经知道 ...

  9. partial(C# 参考)

    分部类型定义允许将类.结构或接口的定义拆分到多个文件中. 在 File1.cs 中:     namespace PC { partial class A { } } 在 File2.cs 中:   ...

  10. BZOJ4304 : 道路改建

    首先求出SCC,把图缩点成一个DAG. 通过拓扑排序+DP求出: dp0[x]:从x点出发能到的点的集合. dp1[x]:能到x的点的集合. 对于一条边x->y,将它改为双向边后,形成的新的SC ...