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> < ...
随机推荐
- linux tricks 之数据对齐。
转载:http://blog.chinaunix.net/uid-20608849-id-3027953.html 内核为了保持最大的兼容性和代码灵活性,不可能直接对某个数据类型定义它的大小范围. ...
- SSH 框架学习之初识Java中的Action、Dao、Service、Model-收藏
SSH 框架学习之初识Java中的Action.Dao.Service.Model-----------------------------学到就要查,自己动手动脑!!! 基础知识目前不够,有感性 ...
- 利用PowerDesigner比较2个数据库结构
主要实现思路 建立新旧数据库ODBC 导入原始数据模型 选择并比较对象 .PowerDesigner中可以对2个数据模型进行比较,所以想到用这个功能来实现对比数据库的目的.到底怎样利用PowerDes ...
- SpringBoot相关
快速构建项目 第 1 步:将这个 Spring Boot 项目的打包方式设置为 war. <packaging>war</packaging> SpringBoot 默认有内嵌 ...
- Unity资源Assetmport New Asset对话框
Unity资源Assetmport New Asset对话框 1.2.2 资源 开发游戏一定会使用很多东西,如网格.纹理.电影.动画.声音.音乐.文本等等.这些文件都被Unity称为资源(Asset ...
- NGUI全面实践教程(大学霸内部资料)
NGUI全面实践教程(大学霸内部资料) 试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国 ...
- Google不支持小于12px字体 终极办法
每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员. 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸). 2.探索 2.1 CSS HAC ...
- MD5算法 简介
MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用. MD5功能 l 输入任 ...
- css 层叠样式表
css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...
- List.Sort以及快速排序ZZ
经常看到有人因为使用.net中的集合类处理海量数据时性能不够理想,就武断的得出.net不行,c#也不行这样的结论.对于.net framework这样的类库来说,除了性能以外,通用性和安全性同样重要, ...