码迷,mamicode.com
首页 > 其他好文 > 详细

基于Bootstrap的页面排版知识

时间:2016-09-09 18:37:23      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

标题:


Bootstrap定义了所有HTML的标题样式,<h1>...<h6>标签或者在标签内加入.h1 class等可以得到一样的效果

技术分享

效果:

技术分享

副标题:

标签<small>或者添加.small class

技术分享

效果:

技术分享

缩写:

<abbr>标签,title属性中写全称

<abbr title="World Trade Organization">WTO</abbr>

当鼠标移动到文本上时显示:

技术分享

列表:

 .list-unstyled class的应用(去除列表前面的样式)

技术分享

效果:

技术分享

.list-inline class(列表会显示在一行上)

技术分享

效果:

技术分享

 

.dl-horizontal class应用于定义列表

技术分享

效果:

技术分享

更多的类

 .lead 突出显示

.text-left 文本左对齐

.text-center 文本居中对齐

.text-right 文本右对齐

.tetx-nowrap 文本段落不换行

.text-justify 自动换行

.text-uppercase 文本大写

.text-lowercase 文本小写

.text-capitalize 首字母大写

基于Bootstrap的页面排版知识

标签:

原文地址:http://www.cnblogs.com/it-body/p/5857492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!