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> < ...
随机推荐
- Sonar+Hudson+Maven构建系列之二:迁移Sonar
摘要:由于昨天在一台机器上安装的东西太多了,导致Linux机器上非常卡,一台Linux负担了jira, fisheye, confluence, sonar, hudson, mysql 等等,本来已 ...
- String.split使用竖线做为分隔符
String.split使用竖线做为分隔符时会发现得到的数组不对,每个字符都被拆分成数组里的一个值: 解决办法:竖线需要转义才可以作为split的参数,String.split("\\|&q ...
- 使用ASP.NET 5开发AngularJS应用
今天推荐的是一个系列文章,讲述了如何使用ASP.NET 5来开发AngularJS应用,一共7篇文章. 在Visual Studio 2015中由于优化了项目结构,优化了前端JS框架的引用方式,所以开 ...
- Java Serializable(序列化)
1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存object states,但 ...
- Bitset 用法(STL)
std::bitset是STL的一个模板类,它的参数是整形的数值,使用位的方式和数组区别不大,相当于只能存一个位的数组.下面看一个例子 bitset<20> b1(5); cout< ...
- nmon性能监控工具总结
一.nmon工具介绍 nmon 是一个分析aix和linux性能的免费工具(主要是ibm为自己的aix操作系统开发的,但是也可以用在linux操作系统),而nmon_analyser是nmon的一个工 ...
- SU suplane命令学习
各位博友,不足之处,批评指正! 用其他软件打开看看, 注意:下图中应该是倾角,dip=Δt/Δx,单位为ms/traces,
- 游戏控制杆OUYA游戏开发快速入门教程
游戏控制杆OUYA游戏开发快速入门教程 1.2.2 游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4 游戏控制杆各个角度的 ...
- CodeForces Round 198
总体感觉这次出的题偏数学,数学若菜表示果断被虐.不过看起来由于大家都被虐我2题居然排到331,rating又升了74.Div2-AA. The Walltime limit per test1 sec ...
- 寒冰王座[HDU1248]
寒冰王座 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...