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> < ...
随机推荐
- 关于WM_CTLCOLOREDIT的处理的一些问题
在为duilib封装系统控件的过程中, 再一次遇到了系统EDIT控件文字颜色/文字背景颜色的处理问题. 不要小看这个消息, 她很可能不会让你如愿以偿. 其实我要的目的很简单: 1. 改变文字颜色 ...
- 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(三)码农网
12. 安装 Apache Tomcat Tomcat 是由 Apache 设计的用来运行 Java HTTP web 服务器的 servlet 容器.按照下面的方法安装 tomcat,但需要指出的是 ...
- Servlet跳转方式
servlet之间的跳转,有两种方式: 1.redirect方式,是新的请求,数据不相同 2.forward方式是同一个请求,数据相同
- json学习系列(7)JSONBuilder的用法
JSONBuilder可以向文件中写入写入json字符串.如下面的例子: public class Test { public static void main(String args[]) thro ...
- 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用
基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...
- Unity3D中Update和Lateupdate的区别
Unity中Update和Lateupdate的区别.Lateupdate和Update每一祯都被执行,但是执行顺序不一样,先执行Updatee然后执行lateUpdate. 如果你有两个脚本JS1. ...
- android studio ndk 调试
一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...
- unity scroolView 和 groupview
#pragma strict var scrollPosition:Vector2; function Start () { scrollPosition[0]=50; scrollPosition[ ...
- POJ 2117 (割点+连通分量)
题目链接: http://poj.org/problem?id=2117 题目大意:在一个非连通图中,求一个切除图中任意一个割点方案,使得图中连通分量数最大. 解题思路: 一个大陷阱,m可以等于0,这 ...
- BZOJ3238: [Ahoi2013]差异 (后缀自动机)
Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...