Bootstrap入门

一、网格系统

container->row->col
表格-》行-》列（12列）

网格系统时小设备优先，可以给列定义多种类型的样式。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3">
            这样定义的意思就是，如果是手机的话占6列，电脑的话占3列
        <div>
    </div>
</div>

项目	超小设备手机	小型设备平板电脑	台式电脑	大屏
范围	小于768	大于768	大于992	大于1200
类名	.col-xs-	.col-sm-	.col-md-	.col-lg-
最大列宽	auto	60px	78px	95px

1. .clearfix用来重置栅格属性定义，意思就是不管上一行的列有没有被占满，强行开启下一行，会配合visible-xs使用，意思就是，如果是超小屏的话就强行换行。

<div class="clearfix visible-xs"></div>

1. 偏移列：`col-md-offset-3左边偏移3列
2. 列排序：.col-pull-md-* .col-push-md-* pull是把当前列往前拉3列，push是把当前列往后推3列，拉/推的宽度，根据自己所处容器的宽度来划分决定

二、排版

1 几种常用的标签

标签	效果
<strong>加粗</strong>	加粗、黑体
<em>斜体</em>	斜体
<abbr title="缩写的内容">缩写</abbr>	缩写
<address>北京胡同<br>186号</address>	北京胡同 186号
<blockquote></blockquote>	引用

由于<address>默认为display:block;，您需要使用<br> 标签来为封闭的地址文本添加换行。
<blockquote></blockquote>用来添加引用，可以在这个标签里面使用样式.pull-right或者blockquote-reverse来让引用居右
.initialism可用于<abbr></abbr>用来产生字体较小的缩写，且可以把字母转换成大写

2 几种常用的样式

样式	效果
.leader	使段落突出显示
.small	设定小文本85%
.text-left	居左
.text-right	居右
.text-center	居中
.text-justify	自动换行
.text-nowrap	不自动换行（出现滚动条）
.pre-scrollable	允许出现滚动条，如果不设这个属性，内容过多，就会自动撑大
.text-lowercase	小写文本
.text-uppercase	大写文本
.text-capitalize	首字母大写

3 标记文本颜色的几种展示方法

样式	效果
.text-primary	重要的，主要的
.text-success	成功的
.text-info	提示
.text-warning	警告
.text-danger	危险

三、列表

• 没有样式的列表.list-unstyled
• 内联样式列表.list-inline：列表显示到一行
• 定义列表

<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

• 水平的定义列表

<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

四、内容可滚动

`html
<pre class="pre-scrollable">
内容可滚动超过边界时可出现滚动条
</pre>


五、代码

标签	效果
<code>代码</code>	var i=0;//嵌入一段代码
<pre>代码</pre>	var i=0;//嵌入一块区域代码
<var>x</var>=<var>a</var>+<var>b</var> 用来定义变量	x=a+b
<kbd>Ctrl+C</kbd>(按键提示)	Ctrl+C拷贝代码
<samp>电脑输出结果：x=100<samp>	电脑输出结果：x=100

六、表格

表格类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

<tr>, <th> 和 <td> 类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

七、响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。