Bootstrap页面布局14 - BS按钮群组
首先看看这个代码:
<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按钮群组的更多相关文章
- Bootstrap页面布局13 - BS按钮
bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a> <button></button> <input type='butt ...
- Bootstrap页面布局15 - BS带下拉菜单的按钮
带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...
- Bootstrap历练实例:基本按钮群组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局19 - BS提示信息
提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...
- Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
随机推荐
- 最新php环境搭建
参考文章:http://jingyan.baidu.com/article/29697b912f6539ab20de3cf8.html
- PHP“Cannot use object of type stdClass as array” (php在调用json_decode从字符串对象生成json对象时的报错)
php再调用json_decode从字符串对象生成json对象时,如果使用[]操作符取数据,会得到下面的错误 错误:Cannot use object of type stdClass as arra ...
- oracle 10g 学习之游标使用和异常介绍(11)
一.游标 1. 使用游标 要求: 打印出 80 部门的所有的员工的工资: salary: xxx declare --1. 定义游标 cursor salary_cursor is select sa ...
- linux tricks 之 bitmap分析.
------------------------------------------- 本文系作者原创, 欢迎大家转载! 转载请注明出处:netwalker.blog.chinaunix.net -- ...
- 电赛总结(二)——AD芯片总结之AD7705
1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...
- MATLAB学习笔记(九)——MATLAB符号计算
(一)符号对象 一.建立符号对象 1.建立符号变量和符号常量(sym,syms): 只可以建立一个符号变量 可以一次性建立多个符号变量 PS:符号常量计算的结果是精确的数学表达式,而数值常量是进行约分 ...
- awk命令
awk 手册 原文 Table of Contents 1. awk简介 2. awk命令格式和选项 2.1. awk的语法有两种形式 2.2. 命令选项 3. 模式和操作 3.1. 模式 3.2 ...
- 二分查找法 java
前几天去面试,让我写二分查找法,真是哔了狗! 提了离职申请,没事写写吧! 首先二分查找是在一堆有序的序列中找到指定的结果. public class Erfen { public static int ...
- 不用写软件,纯JS 实现QQ空间自动点赞
这里分享一个自己写的点赞JS,已实现了好友动态.右侧栏猜你喜欢 点赞,有兴趣的朋友可以加上去玩玩.打开浏览器的开发者模式运行就可以看到效果了 var count = 0; var total = 0; ...
- DP/最短路 URAL 1741 Communication Fiend
题目传送门 /* 题意:程序从1到n版本升级,正版+正版->正版,正版+盗版->盗版,盗版+盗版->盗版 正版+破解版->正版,盗版+破解版->盗版 DP:每种情况考虑一 ...