Bootstrap--全局CSS样式之排版

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

(1)标题

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

代码如下:

技术分享Code

结果如下:

 

技术分享

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

技术分享Code

 

 

技术分享

 

(2)页面主体

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

 

实例

技术分享Code

 

 

技术分享

 

(3)中心内容

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

技术分享Code

 

 

技术分享

(4 )内联文本元素

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

实例:

技术分享Code

 

 

技术分享

在上面的结果中,world背景颜色变成了#fcf8e3,图片上看不清,大家可以在自己的浏览器中查看下,而且world也被高亮了。

(5)被删除的文本

我们要显示某些被删除的文本,可以使用<del>标签。

实例:

技术分享Code


技术分享

 

 

 

(6)无用文本

对于没有用的文本我们可以使用<s>标签。

实例:

技术分享Code

 

 

技术分享

对于这个<s>标签的结果我没有看出来和上面那个<del>标签的结果有什么不同,也许只是表达方式不同吧,有知道有什么不同的大神,请告知。下面的插入文本和带下划线的文本也是。

(7)插入文本

额外插入的文本使用 <ins> 标签。

实例:

技术分享Code

 

 

技术分享

 

(8)带下划线的文本

为文本添加下划线,使用 <u> 标签。

技术分享Code

 

 

技术分享

(9)对齐

通过文本对齐类text-*,可以简单方便的将文字重新对齐。

实例:

技术分享Code


技术分享

 

 

(10)改变大小写

通过下面几个类改变文本的大小写。

技术分享Code

 

 

(11)地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

技术分享Code

 

 

对于其他的排版内容,大家可以查看官方文档。谢谢

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。