Bootstrap

页面主体

Bootstrap 将全局
font-size 设置为 14px
line-height 行高设置为 1.428(即20px)

<p>

<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

h1~h6

h1~h6被重构
支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题
//在标题元素内插入 small 元素

<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；
h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。
在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

文本样式

标记

//添加标记，<mark>元素或.mark 类

<p>Bootstrap<mark>框架</mark></p>

Bootstrap框架

线条

<del>Bootstrap 框架</del> //删除的文本<s>Bootstrap 框架</s> //无用的文本<ins>Bootstrap 框架</ins> //插入的文本<u>Bootstrap 框架</u> //效果同上，下划线文本

Bootstrap 框架 //删除的文本
Bootstrap 框架 //无用的文本
Bootstrap 框架 //插入的文本
Bootstrap 框架 //效果同上，下划线文本

强调

<small>Bootstrap 框架</small> //标准字号的 85%<strong>Bootstrap 框架</strong> //加粗 700<em>Bootstrap 框架</em> //倾斜

Bootstrap 框架 //标准字号的 85%
Bootstrap 框架 //加粗 700
Bootstrap 框架 //倾斜

对齐

<p class="text-left">Bootstrap 框架</p> //居左<p class="text-center">Bootstrap 框架</p> //居中<p class="text-right">Bootstrap 框架</p> //居右<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p> //不换行

大小写

<p class="text-lowercase">Bootstrap 框架</p> //小写<p class="text-uppercase">Bootstrap 框架</p> //大写<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

地址

<address><strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> [phone]</address>

引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距<blockquote>Bootstrap 框架</blockquote>//反向<blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>

列表

//移出默认样式<ul class="list-unstyled"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//设置成内联<ul class="list-inline"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//水平排列描述列表<dl class="dl-horizontal"><dt>Bootstrap</dt><dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd></dl>

代码文本

//内联代码<code>&lt;section&gt;</code>//用户输入press <kbd>ctrl + ,</kbd>//代码块<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

色调字体

        <p class="text-muted">柔和灰</p>    <p class="text-primary">主要蓝</p>    <p class="text-success">成功绿</p>    <p class="text-info">信息蓝</p>    <p class="text-warning">警告黄</p>    <p class="text-danger">危险红</p>

情景背景色

    <p class="bg-primary">主要蓝</p>    <p class="bg-success">成功绿</p>    <p class="bg-info">信息蓝</p>    <p class="bg-warning">警告黄</p>    <p class="bg-danger">危险红</p>

关闭按钮

    <button type="button" class="close">&times;</button>    <button type="button" class="">&times;</button>

三角符号

<span class="caret"></span>

快速浮动

<div class="pull-left">左边</div><div class="pull-right">右边</div>

注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。

块级居中

<div class="center-block">居中</div>

注：就是 margin:x auto；并且设置了 display:block;

清理浮动

<div class="clearfix"></div>

注：这个 div 可以放在需要清理浮动区块的前面即可.

显示和隐藏

<div class="show">show</div><div class="hidden">hidden</div>

响应式工具

 //超小屏幕激活显示<div class="visible-xs-block a">Bootstrap</div>//超小屏幕激活隐藏<div class="hidden-xs a">Bootstrap</div>

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

表格

基本格式

<table class="table">

条纹状表格

//让<tbody>里的行产生一行隔一行加单色背景效果<table class="table table-striped">//注：表格效果需要基于基本格式.table

带边框的表格

//给表格增加边框<table class="table table-bordered">

悬停鼠标表格

<table class="table table-hover">

状态类背景样式表格

//可以单独设置每一行的背景样式<tr class="success">

注：一共五种不同的样式可供选择。
样式 说明
active 鼠标悬停在行或单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或需要用户注意
danger 表示危险或潜在的带来负面影响的动作

隐藏某一行

<tr class="sr-only">

响应式表格

略

按钮

可作为按钮使用的标签或元素

<a href="###" class="btn btn-default">Link</a><button class="btn btn-default">Button</button><input type="button" class="btn btn-default" value="input">

注意事项有三点：

(1).针对组件的注意事项
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持
<button> 元素。
(2).链接被作为按钮使用时的注意事项
如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于
链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=”button” 属性。
(3).跨浏览器展现
我们总结的最佳实践是：用 强烈建议尽可能使用 <button> 元素来获得在各个浏览器上
获得相匹配的绘制效果。
另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻
止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在
Firefox 浏览器上不能完全和其他按钮保持一致的高度。

按钮预定义样式

<button class="btn btn-default">default</button><button class="btn btn-success">success</button><button class="btn btn-info">info</button><button class="btn btn-warning">warning</button><button class="btn btn-danger">danger</button><button class="btn btn-primary">primary</button><button class="btn btn-link">link</button>

样式 说明
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式

按钮尺寸大小

<button class="btn btn-lg">Button</button><button class="btn">Button</button><button class="btn btn-sm">Button</button><button class="btn btn-xs">Button</button>

块级按钮

<button class="btn btn-block">Button</button><button class="btn btn-block">Button</button>

激活按钮状态

<button class="btn active">Button</button>

禁用按钮状态

<button class="btn active disabled">Button</button>

按钮组件

//基本样式<div class="btn-group"><button type="button" class="btn btn-default">左</button><button type="button" class="btn btn-default">中</button><button type="button" class="btn btn-default">右</button></div>

将多个按钮组整合起来便于管理

//将多个按钮组整合起来便于管理<div class="btn-toolbar"><div class="btn-group"><button type="button" class="btn btn-default">左</button><button type="button" class="btn btn-default">中</button><button type="button" class="btn btn-default">右</button></div><div class="btn-group"><button type="button" class="btn btn-default">1</button><button type="button" class="btn btn-default">2</button><button type="button" class="btn btn-default">3</button></div></div>

组件大小

//组件大小<div class="btn-group btn-group-lg">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>    </div>    <div class="btn-group">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>    </div>    <div class="btn-group btn-group-sm">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>    </div>    <div class="btn-group btn-group-xs">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>    </div>

嵌套下拉菜单

//嵌套一个分组，比如下拉菜单<div class="btn-group">        <button type="button" class="btn btn-default">左</button>        <button type="button" class="btn btn-default">中</button>        <button type="button" class="btn btn-default">右</button>        <div class="btn-group">            <button class="btn btn-default dropdown-toggle"            data-toggle="dropdown">            下拉菜单            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">首页</a></li>            <li><a href="#">资讯</a></li>            <li><a href="#">产品</a></li>            <li><a href="#">关于</a></li>        </ul>        </div>    </div>

注意：这里

中并没有实现 class=”dropdown”，通过源码分析知道嵌套本身已经
有定位就不需要再设置。而右边的圆角只要多加一个 class=”dropdown-toggle”即可。

按钮组垂直排列

<!-- 设置按钮组垂直排列 --><!-- <div class="btn-group-vertical"> -->    <div class="btn-group-vertical">        <button type="button" class="btn btn-default">左</button>        <button type="button" class="btn btn-default">中</button>        <button type="button" class="btn btn-default">右</button>        <div class="btn-group">            <button class="btn btn-default dropdown-toggle"            data-toggle="dropdown">            下拉菜单            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">首页</a></li>            <li><a href="#">资讯</a></li>            <li><a href="#">产品</a></li>            <li><a href="#">关于</a></li>        </ul>        </div>    </div>

两端对齐按钮组，使用<a>标签

//设置两端对齐按钮组，使用<a>标签    <div class="btn-group-justified">        <a type="button" class="btn btn-default">左</a>        <a type="button" class="btn btn-default">中</a>        <a type="button" class="btn btn-default">右</a>    </div>

   //如果需要使用<button>标签，则需要对每个按钮进行群组    <div class="btn-group-justified">        <div class="btn-group">            <button type="button" class="btn btn-default">左</button>        </div>        <div class="btn-group">            <button type="button" class="btn btn-default">中</button>        </div>        <div class="btn-group">            <button type="button" class="btn btn-default">右</button>        </div>    </div>

群组按钮下拉菜单

    <!-- //群组按钮下拉菜单 -->    <div class="btn-group">        <button type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">        下拉菜单        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">首页</a></li>        <li><a href="#">资讯</a></li>        <li><a href="#">产品</a></li>        <li><a href="#">关于</a></li>    </ul></div><!-- //分裂式按钮下拉菜单 --><div class="btn-group">    <button type="button" class="btn btn-default">下拉菜单</button>    <button type="button" class="btn btn-default dropdown-toggle"    data-toggle="dropdown">    <span class="caret"></span></button><ul class="dropdown-menu">    <li><a href="#">首页</a></li>    <li><a href="#">资讯</a></li>    <li><a href="#">产品</a></li>    <li><a href="#">关于</a></li></ul></div>

//向上弹出式<div class="btn-group dropup">

表单

基本样式

<form>        <div class="form-group">            <label>电子邮件</label>            <input type="email" class="form-control"            placeholder="请输入您的电子邮件">        </div>        <div class="form-group">            <label>密码</label>            <input type="password" class="form-control"            placeholder="请输入您的密码">        </div>    </form>

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件
包括：text、password、datetime、datetime-local、date、month、time、week、
number、email、url、search、tel 和 color。

内联表单

<form class="form-inline">        <div class="form-group">            <label>电子邮件</label>            <input type="email" class="form-control"            placeholder="请输入您的电子邮件">        </div>        <div class="form-group">            <label>密码</label>            <input type="password" class="form-control"            placeholder="请输入您的密码">        </div>    </form>

注：当小于 768px，会恢复独占样式（上图）

表单合组

    <div class="input-group">        <div class="input-group-addon">￥</div>        <input type="text" class="form-control">        <div class="input-group-addon">.00</div>    </div>;

水平排列

    <!-- 让表单内的元素保持水平排列 -->    <form class="form-horizontal">        <div class="form-group">            <label class="col-sm-2 control-label">电子邮件</label>            <div class="col-sm-10">                <input type="email" class="form-control" placeholder="请输                入您的电子邮件">            </div>        </div>    </form>

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和
父元素样式同步。

复选框和单选框

//设置复选框，在一行    <div class="checkbox">        <label>            <input type="checkbox">体育        </label>    </div>    <div class="checkbox">        <label>            <input type="checkbox">音乐        </label>    </div>    <br>    //设置禁用的复选框    <div class="checkbox disabled">        <label>            <input type="checkbox" disabled>音乐        </label>    </div>    <br>    //设置内联一行显示的复选框    <br>    <label class="checkbox-inline">        <input type="checkbox">体育    </label>    <label class="checkbox-inline disabled">        <input type="checkbox" disabled>音乐    </label>    <br>    //设置单选框    <div class="radio disabled">        <label>            <input type="radio" name="sex" disabled>男        </label>    </div>

下拉列表

    <select class="form-control">        <option>1</option>        <option>2</option>        <option>3</option>        <option>4</option>        <option>5</option>    </select>

校验状态

    <!-- 错误状态 -->    <div class="form-group has-error">       <!-- label 标签同步相应状态 -->        <label class="control-label">Input with success</label>    </div>    <!-- 成功状态 -->    <div class="form-group has-success">        <label class="control-label">Input with success</label>    </div>    <!-- 警告状态 -->    <div class="form-group has-warning">        <label class="control-label">Input with success</label>    </div>

添加额外图标

<div class="form-group has-feedback">        <label>电子邮件</label>        <input type="email" class="form-control">        <span class="glyphicon glyphicon-ok form-control-feedback"></span>    </div>

注：除了 glyphicon-ok 外，还有几个如下表：
样式 说明
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态

<div class="form-group has-feedback">        <label>电子邮件</label>        <input type="email" class="form-control">        <span class="glyphicon glyphicon-ok form-control-feedback"></span>    </div>    <div class="form-group has-feedback">        <label>电子邮件</label>        <input type="email" class="form-control">        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>    </div>    <div class="form-group has-feedback">        <label>电子邮件</label>        <input type="email" class="form-control">        <span class="glyphicon glyphicon-remove form-control-feedback"></span>    </div>

控制尺寸

<input type="text" class="form-control input-lg" value="大">    <br><br>    <input type="text" class="form-control" value="中">    <br><br>    <input type="text" class="form-control input-sm" value="小">

图片

图片形状

<img src="img/pic.png" alt="图片" class="img-rounded"><img src="img/pic.png" alt="图片" class="img-circle"><img src="img/pic.png" alt="图片" class="img-thumbnail">

响应式图片

<img src="img/pic.png" alt="图片" class="img-responsive">

小图标

http://v3.bootcss.com/components/#glyphicons

    <!-- 使用小图标 --><i class="glyphicon glyphicon-star"></i><span class="glyphicon glyphicon-star"></span>

    <button class="btn btn-default btn-lg">        <span class="glyphicon glyphicon-star"></span>    </button>    <button class="btn btn-default btn">        <span class="glyphicon glyphicon-star"></span>    </button>    <button class="btn btn-default btn-sm">        <span class="glyphicon glyphicon-star"></span>    </button>    <button class="btn btn-default btn-xs">        <span class="glyphicon glyphicon-star"></span>    </button>

下拉菜单

<div class="dropdown">        <button class="btn btn-default" data-toggle="dropdown">            下拉菜单            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">首页</a></li>            <li><a href="#">资讯</a></li>            <li><a href="#">产品</a></li>            <li><a href="#">关于</a></li>        </ul>    </div>

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置
data-toggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能
自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。

//设置向上触发<div class="dropup">

//设置菜单的分割线<li class="divider"></li>

---

//设置菜单的标题，不要加超链接<li class="dropdown-header">网站导航</li>

---

//设置菜单的禁用项<li class="disabled"><a href="#">产品</a></li>

---

//让菜单默认打开<div class="dropdown open">