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


Posted in Javascript onNovember 30, 2015

一、段落

段落是排版中另一个重要元素之一。在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>

效果如下:

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

 四、文本对齐

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

  ☑  左对齐,取值left

  ☑  居中对齐,取值center

  ☑  右对齐,取值right

  ☑  两端对齐,取值justify

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

  ☑   .text-left:左对齐

  ☑   .text-center:居中对齐

  ☑   .text-right:右对齐

  ☑   .text-justify:两端对齐

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
VUE长按事件需求详解
Oct 18 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
javascript中eval和with用法实例总结
Nov 30 #Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 #Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 #Javascript
Bootstrap每天必学之js插件
Nov 30 #Javascript
Bootstrap每天必学之面板
Nov 30 #Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
js简单实现交换Li的值
2014/05/22 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python 提取文件的小程序
2009/07/29 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python如何查看网页代码
2020/06/07 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
销售经理工作职责范文
2013/12/03 职场文书
物业品质提升方案
2014/06/08 职场文书
应届大专生自荐书
2014/06/16 职场文书
学雷锋的心得体会
2014/09/04 职场文书
2014财务年终工作总结
2014/12/08 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
PyTorch的Debug指南
2021/05/07 Python
Python基础之元组与文件知识总结
2021/05/19 Python