首页 > 网站 > WEB开发 > 正文

Bootstrap--全局CSS样式之排版

2024-04-27 14:09:18
字体:
来源:转载
供稿:网友

Bootstrap--全局CSS样式之排版

Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式。

(1)标题

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

代码如下:

Code
   <div class="container">        <h1>h1</h1>        <h2>h2</h2>        <h3>h3</h3>        <h4>h4</h4>        <h5>h5</h5>        <h6>h6</h6>           </div>

结果如下:

1

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

Code
<div class="container">        <h1>h1. Bootstrap heading <small>Secondary text</small></h1>        <h2>h2. Bootstrap heading <small>Secondary text</small></h2>        <h3>h3. Bootstrap heading <small>Secondary text</small></h3>        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>        <h6>h6. Bootstrap heading <small>Secondary text</small></h6>    </div>

2

(2)页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

实例

Code
  <div class="container">        <p>            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.        </p>    </div>

3

(3)中心内容

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

Code
  <div class="container">        <div class="lead">            Welcome to our world        </div>        <p>            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.        </p>    </div>

4

(4 )内联文本元素

通过添加 <mark>标签可以为元素添加背景颜色并高亮文本。

实例:

Code
    <div class="container">        <div class="lead">            Welcome to our <mark>world</mark>        </div>           </div>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表