首页 > 代码库 > Bootstrap全局CSS样式之排版
Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素，这里不再赘述，详细可參考我还有一篇文章《html的文本元素总结》，这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。
.small——当前元素字体大小的 85%，经常使用作副标题时，也可用<small>来取代；
.lead——让段落突出显示;
.text-left、.text-center、.text-right——将文字于左、居中、于右对齐；
.text-lowercase、.text-uppercase、.text-capitalize——分别相应：全部字母大写、全部字母小写、首字母大写。
.blockquote-reverse——让引用呈现内容右对齐；
.list-unstyled——设置列表为无样式。
.list-inline——设置列表元素放置于同一行。并加入少量的内补（padding）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS全局样式排版</title>
<link rel="stylesheet" href="http://www.mamicode.com/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
<h1>欢迎訪问远地资产</h1>
<h2>欢迎訪问远地资产</h2>
<h3>欢迎訪问远地资产</h3>
<h4>欢迎訪问远地资产<small>你可信赖的理財伙伴</small></h4>
<p>宏运球迷赛后狂骂郜林及其太太 <abbr title="广州恒大前锋">郜林</abbr>扔鞋反击</p>
<p class="lead">宏运球迷赛后狂骂郜林及其太太 郜林扔鞋反击</p>
<p>宏运球迷赛后狂骂郜林及其太太 <mark>郜林</mark>扔鞋反击</p>
<p class="text-left">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-center">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-right">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-lowercase">AHALjjls</p>
<p class="text-uppercase">AHALjjls</p>
<p class="text-capitalize">fkdla</p>
<address>
<strong>远地资产</strong><br/>
上海市，黄浦区<br/>
西藏中路725弄12号3楼<br/>
<abbr title="电话">P:</abbr>(021) 6553 2332
</address>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<ul class="list-unstyled">
<li>鲁媒：上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
<li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
<li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
</ul>
<ul class="list-inline">
<li>鲁媒：上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
<li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
<li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
</ul>
</div>
</body>
</html>
Bootstrap全局CSS样式之排版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。