全面解析Bootstrap排版使用方法（文字样式）

网络编程 2024/11/18 佚名

3 1 2

一、段落

　　段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

二、文字样式

　　在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

1.粗体：在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

2.斜体：在Bootstrap中，可以使用<em>或<i>来实现文本斜体。

三、强调类

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#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>

效果如下：

四、文本对齐

　　在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

"color: #800000">取值left

"color: #800000">取值center

"color: #800000">取值right

"color: #800000">取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

"color: #800000">左对齐

"color: #800000">居中对齐

"color: #800000">右对齐

"color: #800000">两端对齐

有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

bootstrap,排版,文字样式

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“全面解析Bootstrap排版使用方法（文字样式）”

暂无评论...

更新日志

2024年11月18日

全面解析Bootstrap排版使用方法（文字样式）

基于js实现微信发送好友如何分享到朋友圈、微博

javascript中eval和with用法实例总结

评论“全面解析Bootstrap排版使用方法（文字样式）”

更新日志

友情链接