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="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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-10-20 20:25:57