首页 > Web开发 > 详细

Bootstrap--全局CSS样式之排版

时间:2015-05-17 18:31:20      阅读:329      评论:0      收藏:0      [点我收藏+]

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

 

 

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

Bootstrap--全局CSS样式之排版

原文:http://www.cnblogs.com/yuanking/p/4510080.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!