添加缩放功能 <meta name="viewport" content="width=device-width, initial-scale=1">
去除缩放功能 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局,
-行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
| 手机 (<768px) | 平板 (≥768px) | 桌面显示器 (≥992px) | 大桌面显示器 (≥1200px) |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">第一列占4个格栅</div>
<div class="col-sm-6 col-md-3 col-lg-3">第二列占4个格栅</div>
<div class="col-sm-6 col-md-3 col-lg-3">第三列占4个格栅</div>
<div class="col-sm-6 col-md-3 col-lg-3">第四列占4个格栅</div>
</div>
</div>
清除浮动：
<div class="clearfix visible-xs"></div> 添加div 在div中设置在哪种分辨率下添加清除浮动
/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px){ div{}}
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { div{ }}
?
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { div{ }}
?
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { div{}}
```html
给图片添加响应式显示 添加 .img-responsive 类 <img src="" class="img-responsive" > ```
<p class="lead text-left/right/center">
随便写点...
</p>
注释：lead 强调
text-left 左对齐
text-right 右对齐
text-right 居中对齐
<small>变小</small>
<strong>加粗强调</strong>
<b>加粗强调</b>
<em>斜体强调</em>
<cite>斜体变大</cite>
<abbr title="鼠标移入显示我" class="initialism">过来呀bootstrap</abbr>
initialism转为大写字母
<blockquote>
<p>
在引用的文字旁边加一条大大的竖线，强调一下是引用来的。
</p>
</blockquote>
<ul>
<ol class="list-unstyle"></ol>
</ul>
<ul class="list-inline">
<li><a href="#">中国</a></li>
<li><a href="#">俄罗斯</a></li>
</ul>
<dl class="dl-horizontal">
<dt>java</dt>
<dd>java是一门面向对象的语言。</dd>
</dl>
<code>
public static void sting[]
</code>
<kbd>
alt+f;
</kbd>
<pre>
public class hello
{
public static void main(sting args[])
{
System.out.printlen("hello world!")
}
}
</pre>
<var>斜体显示</var>
<samp>"hello wrold"</samp>
<table class="table">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
<table class="table table-borderde">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
<table class="table table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
<table class="table table-condensed">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
<table class="table table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
</table>
注：需要在表格外面加一层div，在div中添加class类
<div class="table-responsive">
<table class="table table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
<form >
<fieldset>这个标签用于整理所有元素~~~~~~~~~~~~~~
<legend>用户登录</legend>表单头部加上这个标签挺好看的~~~~~~~~~~~~~~
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out