最近学习的关于bootstrap的页面排版

页面排版

Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

标题

Bootstrap 分别对h1 ~ h6 进行了CSS 样式的重构，并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

在h1 ~ h6 元素之间，还可以嵌入一个small 元素作为副标题

内联文本元素

    添加标记

<p>Bootstrap<mark>框架</mark></p>   //各种加线条的文本

<del>Bootstrap 框架</del> //删除的文本

<s>Bootstrap 框架</s> //无用的文本

<ins>Bootstrap 框架</ins> //插入的文本

<u>Bootstrap 框架</u> //效果同上，下划线文本

    各种强调的文本

<small>Bootstrap 框架</small> //标准字号的85%

<strong>Bootstrap 框架</strong> //加粗700

<em>Bootstrap 框架</em> //倾斜

对齐

<p class="text-left">Bootstrap 框架</p> //居左

<p class="text-center">Bootstrap 框架</p> //居中

<p class="text-right">Bootstrap 框架</p> //居右

<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳

<p class="text-nowrap">Bootstrap 框架</p> //不换行

大小写

<p class="text-lowercase">Bootstrap 框架</p> //小写

<p class="text-uppercase">Bootstrap 框架</p> //大写

<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

<address>

<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

列表排版

//移出默认样式

<ul class="list-unstyled">

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

</ul>

//设置成内联

<ul class="list-inline">

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

</ul>

//水平排列描述列表

<dl class="dl-horizontal">

<dt>Bootstrap</dt>

<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

</dl>