Bootstrap 基本css样式

1.标题
1级标题<h1> 38px 是默认大小的2.7倍
2级标题<h2> 32px 是默认大小的2.25倍
3级标题<h3> 24px 是默认大小的1.70倍
4级标题<h4> 18px 是默认大小的1.25倍
5级标题<h5> 14px 是默认大小的1.00倍
6级标题<h6> 12px 是默认大小的0.85倍
添加<small>标签会得到比标题字体更小的文本。
<h1><small>这里会得到比h1更小的文本</small></h1>
2.页面主体
bootstrap定义了一个和其他段落有所区别的中心段落。
要想创建一个中心段落，可以把lead类添加到段落中。
<p class = "lead">这是一个中心段落。</p>
3.排版元素
强调内联元素、对齐、强调类、缩略语、地址、引用、列表
3.1强调内联元素
<strong>字体设置为粗体,文本比周围其他文本重要。<b>元素没有任何语义上的含义，只是粗体。
<em>设置为斜体重点强调。注意与<i>的区分，<i>无语义上的含义。
<mark>用于突出显示从其他地方引用过来的文本
<u>为文本添加下划线
<del>删除线
3.2对齐类
text-left：在其父级块元素中左对齐。与text-align：left效果一样。
text-center：右对齐。
text-right：居中。
text-justify：类似Word排版中的文字两端对齐。
3.3强调类
text-muted：文本情景颜色设置为浅灰色。用来降低文本的重要性。
text-warning:文本情景颜色设置为橙色。表示警告或出现错误。
text-danger:文本情景颜色设置为红色。表示危险的动作、问题或很重要的错误。
text-success:文本情景颜色设置为绿色。某个动作执行成功。
text-info:文本情景颜色设置为蓝色。一般信息
text-primary:文本情景颜色设置为天蓝色。表示文本具有一定的优先级。
同样，有情景背景色。
bg-primary\bg-success\bg-info\bg-warning\bg-danger
3.4地址
<address>
<a href = "mailto:1214443035@qq.com">Contact me</a>
</address>
3.5引用
将<p>元素放入<blockquote>来显示引用。在引用的的左侧加入了一条5像素长的浅灰色线。
<blockquote>
<p>这一段是引用</p>
</blockquote>
3.6缩略语
<abbr>HTML</abbr>
在缩略语的底部添加浅灰色的短线。有个title属性。有个辅助光标。
3.7列表
无序列表、有序列表、描述列表的外边距和内边距变的一直。
<li> <ol> <dl>
4.表格
在<table>中添加class = “table”这个类。
table-bordered#设置边框
table-striped#设置斑马条纹
为某个单元格添加情景颜色使用success、warning、danger、info、active类。
5.按钮
可以在<a>或<input>元素上使用button类
<button type = "button" class = "btn btn-default"></button>
<button type = "button" class = "btn btn-primary"></button>
<button type = "button" class = "btn btn-success btn-lg"></button>
<button type = "button" class = "btn btn-info btn-sm"></button>
<button type = "button" class = "btn btn-waning btn-xs"></button>
<button type = "button" class = "btn btn-danger"></button>
<button type = "button" class = "btn btn-link"></button>
6.表单
正常、内联、水平
<form role = "form"></form>
<form role = "form" class = "form-inline"></form> #相同元素的处于同一行中。
<form role = "form" class = "form-horizontal"></form> #表单具有水平的布局
7.代码
<code>代码片段<code/>#将内联的代码片段包起来。如果有多个片段，就要使用<pre>标签。
<code>标签中的尖括号必须要用&lt;和&gt;来代替。
8.图片
<img src = "1.png" class = "img-rounded" height = "150" width = "130">#方角
<img src = "1.png" class = "img-circle">#圆角
<img src = "1.png" class = "img-thumbnail" height = "75" width = "75">#缩略图
还可以使用img-responsive类让图片成为响应式的。
9.字体
Bootstrap默认包含sans-serif、serif、monospace
10.字体尺寸