一. 概述一下理念bootstrap基于h5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。
响应式图片：max-width:100% height:auto;
可以加上：.img-responsive类
排版方面的基本样式为：
body的margin为0，背景色为白色，行间距为20/14倍
使用normalize.css库，使各个浏览器差别最小化
居中容器container有一个最大范围。（最大左右margin为auto，和设备有关）
二. 文字基础排版（全局设置）1.标题（h标记和small标记）1
2
3
4
5
6
h1>header1small>small标记的副标题small>h1>
h2>header2small>small标记的副标题small>h2>
h3>header3small>small标记的副标题small>h3>
h4>header4small>small标记的副标题small>h4>
h5>header5small>small标记的副标题small>h5>
h6>header6small>small标记的副标题small>h6>
所有标题元素里的内容的字体颜色都是灰色（#999999），行间距都为1。
内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%；而在h4、h5、h6下则是75%。
a. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。
b. 突出显示
当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class=lead
1
span class=lead>email mespan>
如图.lead和h1的对比效果：
2. 强调文本强调元素 表现
small
（可以直接套用.small类）
小号文本
strong 着重（加粗）
em 斜体
cite 引用来源，字体大小为85%
3. 缩略语abbr和.initialism两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。
4. 地址address用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。
1
2
3
4
5
6
7
8
9
10
address>
strong>twitter, inc.strong>br>
795 folsom ave, suite 600br>
san francisco, ca 94107br>
abbr title=phone>p:abbr>(123) 456-7890
address>
address>
strong>汤姆大叔strong>br>
a href=mailto:#>tomxu@outlook.coma>
address>
效果如图
5. 引用blockquote引用的一般格式是
1
2
3
4
爱情不是你想买想买就能买
出自爱情买卖
当然，small换成footer也是一样的效果。
默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。
6. 列表（1）ul-li无序列表bootstrap下，普通列表的ul-li框架和默认基本是一样的。
a. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。
注意：如果是列表嵌套列表，对祖父级的ul应用.list-unstyle类，孙代li是不会继承的。
b. 内联列表：正常的ul-li是竖着显示的。在很多场合，最典型的就是导航，需要把li打横排列。这时可以使用内联列表的.list-inline类
1
2
3
4
5
ul class=list-inline>
li>homeli>
li>articleli>
li>aboutli>
ul>
（2）有序列表ol-li更换了字体，显示更加柔和
（3）dl-dt-dd定义列表定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。
1
2
3
4
5
6
7
8
dl>
dt>标题1dt>
dd>描述1dd>
dt>标题2dt>
dd>描述2dd>
dt>标题3dt>
dd>描述3dd>
dl>
我想在横向展示一个商品列表，包括描述信息。如果给dl加上class=dl-horizontal
7. 代码包括code单行代码，kbd用户输入代码和pre多行代码块。
代码样式的用法示例如下：
1
2
3
code><body></body>code>br>
kbd><body></body>kbd>
pre><body></body>pre>
（1）codecode内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色
（2）kbdkbd表示需要用户输入，可以配合input元素使用。
1
请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码
（3）多行代码块prepre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。
粘贴进去会有空格。
类似还有可以格式化代码。用较为标准的字体和行间距显示
8.其它h5标记补充（1）,也可以使用.mark
1
p class=mark>this is mark textp>
（2）del标记和s标记1
del>i am delated.del>
（3）ins标记和u标记下划线，ins定义已经被插入文档中的文本。u标记语义和ins不同，如果文本不是超链接，就不要对其使用u标记
（4）对齐相关——text-left
——text-center
——text-right
文本居左中右。
——text-justify：自己判断——齐行定义单词间的间隔对齐，跟避头尾法则类似。注意css3中也有相应的属性。
——text-nowrap：浏览器缩小时始终保持1行
（5）大小写相关：text-lowercase小写
text-uppercase大写
text-capitalize首字母大小
【例3.1】文本排版练习1
2
3
4
5
6
7
8
div class=text-justify>
h3 class=text-center>i am afraid small>william shakespearesmall>h3>
p class=text-capitalize>you say that you love rain, but you open your umbrella when it rains.you say that you love the sun, but you find a shadow spot when the sun shines.you say that you love the wind, but you close your windows when wind blows.p>
p>this is why i am afraid, you say that u love me too.p>
ins>em>译文em>ins>
p>你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。p>
p>你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。p>
div>
三. 表格相关css表格实现是给table加上.table类
【例3.2】做一个5行5列的表格，记录信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
table>
thead>tr>
td>idtd>
td>titletd>
td>authortd>
td>pubdatetd>
td>pricetd>
tr>thead>
tbody>
tr>
td>1td>
td>西游记td>
td>吴承恩td>
td>10.99td>
td>2010-1-1td>
tr>
tr>
td>2td>
td>三国演义td>
td>罗贯中td>
td>20.99td>
td>2010-1-2td>
tr>
tr>
td>3td>
td>水浒传td>
td>施耐庵td>
td>30.99td>
td>2010-1-3td>
tr>
tr>
td>4td>
td>红楼梦td>
td>曹雪芹td>
td>40.99td>
td>2010-1-4td>
tr>
tbody>
table>
无任何class样式时显示：
1.table基础样式（1） 给table标签加上class=table，效果就变为：
秒变高富帅了有木有？
（2）隔行变色.table-stripedtable-striped：斑马线
使用css3的:nth-child实现。
（3）添加边框使用.table-bordered可以为所有单元格添加1px的边框。
（4）悬停高亮使用.table:hover可以让当前行悬停高亮
（5）紧凑型表格table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。
代码清单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
table class=table table-bordered table-striped table-hover table-condensed>
thead>tr>
td>idtd>
td>titletd>
td>authortd>
td>pubdatetd>
td>pricetd>
tr>thead>
tbody>
tr>
td>1td>
td>西游记td>
td>吴承恩td>
td>10.99td>
td>2010-1-1td>
tr>
tr>
td>2td>
td>三国演义td>
td>罗贯中td>
td>20.99td>
td>2010-1-2td>