标签：样式 外边距 效果 基础 center 功能 控件 form 居中
1.标题
h1到h6元素重新定义了标准，并设置了上下外边距
h1到h6等6个class样式和以上元素样式一样，但没有上下外边距
在标题内使用small元素，显示小一点的字体，颜色为灰色，行间距为1,h1h2h3内字体为正常字体65%，h4h5h6则是75%。
2.页面主题
全局字体设置为14px,inline-height为20px,p元素中会有一个额外的10px的margin-bottom。
如果让一个段落突出，使用.lead样式，作用是增大字体大小、粗细、行间距、下边距。
3.强调文本
b,strong元素 样式为粗体
small,.small样式为标准字体85%
cite样式为标准字体
对齐方式
text-left 左对齐
text-right 右对齐
text-center 居中
text-justify 两端对齐
4.缩略语
abbr 元素实现了缩略语的功能，缩略词下面有虚横线，鼠标移动到缩略词上有手型图标，显示title属性。
5.地址元素
address 元素设置了20px下外边距，20px行间距
6.引用
blockquote元素里可以引用任意html内容，一般推荐p
样式为上下内边距10px,左右内边距20px,下外边距20px,字号17.5px，左边一个5px的竖线
引用样式加pull-right结果为 右内边距15px,左内边距0，向右对其，右边有5px竖线,左边无竖线
7.列表
ul li无序列表
ol li 有序列表
ul class=‘list-unstyled‘去点列表
ul class=‘list-inline‘ 内联列表
dl列表 dl dt dd 此列表有缩进，有层次感
dl class=‘dl-horizontal‘ 水平定义列表
8.代码
code元素显示内联代码，文字颜色为深红，背景颜色为浅红，设置圆角
kbd元素包含的内容是表示改该内容需要用户键盘输入，文字颜色为白色，背景颜色为深黑色，圆角，阴影
pre 用于显示大块代码段，并保证原有格式不变，在pre元素上应用pre-scrollable样式，控制最大高度为340px,并可以在y轴滚动
9.表格
一般格式
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
table上加样式table,增加单元格的内边距，在thead底部设置一条2px的粗线，以及在每行记录的顶部有一个1px的细线
table上在现有table样式基础上，
应用一个.table-striped，添加了隔行加背景色的设置；
应用一个.table-bordered，为所有单元格提供了一条一像素的边框
应用一个.table-hover，添加一个鼠标悬停高亮的效果
应用一个.table-condensed，表格比普通表格紧凑一些
------------------------------------------------------------------------------------------------------------------------------
为表格的tr元素，添加5种样式，控制tr颜色
tr.active 表示当前活动的信息 灰色
tr.success 表示成功或正确的信息 绿色
tr.info 表示中立的信息或行为 蓝色
tr.warning 表示警告，特别注意 黄色
tr.danger 表示危险或错误的行为 红色
--------------------------------------------------------------------------------------------------------------------------------
响应式表格 在table元素外部加一个div .table-responsive，当小于768像素时出现水平滚动条
10.表单
10-1，一般格式
<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form>
在select、input、textarea上默认应用.form-control样式，宽度会变为100%.
lable和input放在一个样式为.form-group的div里，提供一个下外边距为15px的样式
checkbox类型input放在一个样式为.checkbox的div里，提供上下10px外边距，块，10px的左内边距,、
10-2，内联表单
form元素应用一个.form-inline，将所有控件放在一行表单上
对于select、input、textarea等因为其默认100%,在内联表单中无效，要在外面加一层带有.form-group或.checkbox的div
如果要加label，input等又要换行，因此要加一个div包裹label。
10-3，横向表单
横向表单样式为label何控件水平并排布局
使用方法，在form上应用.form-horizontal样式，而此样式只设置了内外边距，还要应用栅格类，才能将label和控件并排，form-group类似于row,因此无需加row
此中的.radio .checkbox .control-label样式皆为7px上内边距。
10-4，表单控件
input必须设置type
textarea元素rows定义高度，cols定义宽度，但如果应用.form-control，则变为100%，cols不起作用。
checkbox和radio用div包住，并加.radio或.checkbox，div内包含label，添加checkbox-inline或radio-inline，再包住input实现内联样式
10-5，控件大小，在input上使用.input-lg .input-sm样式
11.按钮
11-1，按钮样式
标签：样式 外边距 效果 基础 center 功能 控件 form 居中
原文地址：http://www.cnblogs.com/cumting/p/6790948.html
