Bootstrap（一）

Bootstrap：响应式设计的实现。也就是根据用户行为以及设备环境进行相应的相应和9调整（系统平台，屏幕大小，屏幕定向等）。

一、栅格系统

 通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询。

原理：

①一行数据（row）必须包含在.container中（固定宽度）或.container-fluid中（100%宽度）
②通过行（row）在水平方向创建一组列（column）
③通过指定1-12的值，来表示其跨越范围

用法：

①列的组合：通过更改数字来合并（css：左浮动和宽度百分比）

Z3EAO}S{3KUNCYDU~Z$8LYB.png L@C6EJYYNT78CS{BV`DS010.png

②列偏移：让两个相邻的列分开

.col-md-offset-*

列偏移 列偏移

③列嵌套：在一个列里声明一个或多个行

Level * :.col-md-*

列嵌套 列嵌套

④列排序：改变列的方向（改变左右浮动，设置浮动距离）

.col-md-push-*
.col-md-pull-*

列排序 列排序

二、排版

1、标题

<h1>主标题 <small>副标题</small></h1>
<h2>主标题<small>副标题</small></2>
.
.
.

图片.png 图片.png

2、页面主体
Bootstrap将全局font-size设置为14px，line-height 设置为1.428。

<p>……</p>

3、强调文本
通过添加.lead类让让段落突出显示

<p class="lead">....</p>

图片.png 图片.png

4、缩略语
鼠标移动到缩略词上显示声明在title里的属性值

①abbr
②.initialism

代码① 显示title值① 代码② 显示缩写句②

5、地址元素

<address>
地址

</address>

地址

6、引用

<blockquote>
<p>引用句</p>
</blockquote>

可以配合使用small和cite元素。.pull-right 右对齐

引用

7、列表

①普通列表：

<ul>
<li>.....</li>
</ul>

普通列表

②有序列表：

<ol>
<li>......</li>
</ol>

有序列表

③去点列表：

<ul class="list-unstyled">
<li>.......</li>
……
</ul>

去点列表

④内联列表：将列表水平显示

list-inline

内联列表

⑤定义列表：

<dl>
<dt>……</dt>
<dd>……<dd>
</dl>

定义列表

⑥水平定义列表：

dl-horizontal

 <dl  class="dl-horizontal">
 <dt>……</dt>
 <dd>……</dd>
 </dl>

水平定义列表 水平定义列表