源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

全面解析Bootstrap排版使用方法(文字样式)

  • 时间:2020-03-20 01:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:全面解析Bootstrap排版使用方法(文字样式)
[b]一、段落[/b]   段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1、全局文本字号为14px(font-size)。 2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。 3、颜色为深灰色(#333); [b]二、文字样式[/b]   在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。  [b]1.粗体:[/b]在Bootstrap中,可以使用[b]<b>和<strong>[/b]标签让文本直接加粗。 [b]2.斜体:[/b]在Bootstrap中,可以使用[b]<em>或<i>[/b]来实现文本斜体。 [b]三、强调类[/b] [b].text-muted:[/b]提示,使用浅灰色(#999) [b].text-primary:[/b]主要,使用蓝色(#428bca) [b].text-success:[/b]成功,使用浅绿色(#3c763d) [b].text-info:[/b]通知信息,使用浅蓝色(#31708f) [b].text-warning:[/b]警告,使用黄色(#8a6d3b) [b].text-danger:[/b]危险,使用褐色(#a94442)
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

效果如下: [img]http://files.jb51.net/file_images/article/201511/20151130105206886.jpg?20151030105216[/img] [b] 四、文本对齐[/b]   在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:   ☑  左对齐,[b]取值left[/b]   ☑  居中对齐,[b]取值center[/b]   ☑  右对齐,[b]取值right[/b]   ☑  两端对齐,[b]取值justify[/b] 为了简化操作,方便使用,Bootstrap通过[b]定义四个类名[/b]来控制文本的对齐风格:   ☑   .text-left:[b]左对齐[/b]   ☑   .text-center:[b]居中对齐[/b]   ☑   .text-right:[b]右对齐[/b]   ☑   .text-justify:[b]两端对齐[/b] 有了文字样式,使得排版效果更清晰简洁,希望大家在自己的作品中多使用一些简单大方的文字样式,使作品脱颖而出,更加具有吸引力。 如果大家还想深入学习,可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习,再为大家附两个精彩的专题:[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 本文系列教程整理到:[url=http://www.1sucai.cn/Special/907.htm]Bootstrap基础教程[/url] 专题中,欢迎点击学习。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部