Bootstrap--全局CSS样式之排版

来源：网络整理时间:2015-05-17 关键词:

本篇文章主要介绍了"Bootstrap--全局CSS样式之排版"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： Bootstrap的排版样式大致和html基本元素一样，没什么大的区别，就是对元素加了样式。（1）标题HTML 中的所有标题标签，

到 &l...

Bootstrap的排版样式大致和html基本元素一样，没什么大的区别，就是对元素加了样式。
（1）标题
HTML 中的所有标题标签，

到均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

代码如下：

Code

   
class="container">
        h1
        h2
        h3
        h4
        h5
        h6

结果如下：

其实就是html元素标签的h1-h6.不过，在标题内还可以包含标签或赋予 .small 类的元素，可以用来标记副标题。

Code


class="container">
        h1. Bootstrap heading Secondary text
        h2. Bootstrap heading Secondary text
        h3. Bootstrap heading Secondary text
        h4. Bootstrap heading Secondary text
        h5. Bootstrap heading Secondary text
        h6. Bootstrap heading Secondary text

（2）页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

实例

Code

  
class="container">
        
            Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

            Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

（3）中心内容

通过添加 .lead 类可以让段落突出显示。

Code

  
class="container">
        
class="lead">
            Welcome to our world

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.