主要学习Bootstrap全局CSS中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。

一、页面排版

1.页面主体

Bootstrap将全局font-size设置未14pix，line-height行高设置为1.428（20pix），<p>段落元素被设置等于1/2行高（10pix），颜色设置为#333（深灰色）。
事例 标标签p 和class="lead"配合使用

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

lead css.png

lead显示样式.png

2.标题

可直接用h1-h6标签，也可使用 类来表示 class="h1" ，可在标题内容中插入<small></small>

<h1>Bootstrap框架</h1>
<h1>Bootstrop<small>框架</small></h1>
<h2>Bootstrap框架</h2>
<h3>Bootstrap框架</h3>
<h4>Bootstrap框架</h4>
<h5>Bootstrap框架</h5>
<h6>Bootstrap框架</h6>

图片.png

3.内联文本元素

添加<mark></mark>标签或class="mark"类 mark类会把整行都改变
添加各种线条的文本<del></del> <s></s> 删除 <ins></ins> <u></u>下划线
强调文本使用标签 small 字体变小 strong字体变粗 em斜体

    <p><mark>Bootstrap框架</mark></p>
    <p class="mark">Bootstrap</p>
    <p>Bootstrap</p>

    <p><del>Bootstrap框架</del></p>
    <p><s>Bootstrap框架</s></p>
    <p><ins>Bootstrap框架</ins></p>
    <p><u>Bootstrap框架</u></p>

    <p><strong>Bootstrap框架</strong></p>
    <p><small>Bootstrap框架</small></p>
    <p><em>Bootstrap框架</em></p>

mark.png

线条+强调文本.png

4.对齐

class="text-left"
class="text-center"
class="text-right"
class="text-justify" 两端对齐
class="text-nowrap" 不换行

    <div class="text-right">
        <p>div右对齐</p>
        <p>DIV</p>
   </div>
    <p class="text-left">框架</p>
    <p class="text-center">框架</p>
    <p class="text-right">框架</p>
    <p class="text-justify">框架框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>
    <p class="text-nowrap">框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>

图片.png

5.大小写

class="text-lowercase"
class="text-uppercase"
class="text-capitalize" ， 首字母大写

6.缩略语

<abbr class="initialism">bs</abbr>
字母会变成大写

7. 地址文本

<address>中国北京</address>

去掉了倾斜，设置了行高

8.引用文本

blockquote标签
居右 class=“blockquote-reverse” / class="pull-right"

    <blockquote>这是引用文本</blockquote>
    <blockquote class="blockquote-reverse">这是引用文本居右</blockquote>
    <blockquote class="pull-right">这是引用文本居右</blockquote>

图片.png

9.列表排版

ul ol移除默认样式 class="list-unstyled"
class="list-inline"变成一行

<ul class="list-unstyled list-inline">
    <li>cat</li>
    <li>dog</li>
    <li>fish</li>
</ul>

水平排列描述列表 dl dt dd,class="dl-horizontal"

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

图片.png

<dl class="dl-horizontal">
        <dt>Bootstrap</dt>
        <dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用</dd>
    </dl>

图片.png

10.代码

内联代码 code
用户输入 kbd
代码块 pre

<code>&lt;section&gt;</code>
press <kbd>ctrl+,</kbd>
<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

图片.png