Bootstrap全局CSS样式及代码展示

1.排版

1.1页面主题

Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式

<div class="container">

<p>人生</p>

<p class="lead">从csdn开始</p>

<p>走向人生巅峰</p>

</div>

1.2标题

在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样。

        1.2.1标题h1--h6和html中的效果一样

        1.2.2副标题：在<h1><small>副标题</small></h1>

<h1>卓越人生，<small>从csdn开始</small></h1>

        1.2.3样式：class=”h1”...class=”h6”

<p class="h1">卓越人生，从csdn开始</p>

<p class="h2">卓越人生，从csdn开始</p>

<p class="h3">卓越人生，从csdn开始</p>

<p class="h4">卓越人生，从csdn开始</p>

<p class="h5">卓越人生，从csdn开始</p>

<p class="h6">卓越人生，从csdn开始</p>

1.3内联文本元素

        1.3.1标记：class=”mark”

        I <span class="mark"> like </span> you 很久了

         1.3.2线条

删除：<del>I like </del> 或者<s>I like</s>

下划线：<ins>I like </ins> 或者<u>I like</u>

        1.3.3强调文本

 小字体<small>：标准字号的85%

<small>海萍</small>

文本加粗：<strong>

<strong>海萍</strong>

文本倾斜：<em>

<em>海萍</em>

1.4对齐 

        1.4.1居左：class=”text-left”

示例代码:<p class="text-left">卓越人生，从csdn开始</p>

        1.4.2居中：class=”text-center”

 <p class="text-center">卓越人生，从csdn开始</p>

        1.4.3居右：class=”text-right”

 <p class="text-right">卓越人生，从csdn开始</p>

1.5改变大小写 

        1.5.1大写：class=”text-uppercase”

<span class="text-uppercase">i like you</span>

        1.5.2小写：class=”text-lowercase”

<span class="text-lowercase">I like you</span>

        1.5.3首字母大写：class=”text-capitalize”

<span class="text-capitalize">i like you</span>

 1.6缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容