全面解析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 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
js评分组件使用详解
Jun 06 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
基于header的一些常用指令详解
2013/06/06 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
详解PHP PDO简单教程
2019/05/28 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Vue计算属性的使用
2017/08/04 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
详解Python中的文本处理
2015/04/11 Python
快速入手Python字符编码
2016/08/03 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
材料采购员岗位职责
2013/12/17 职场文书
开会迟到检讨书
2014/02/03 职场文书
早会主持词
2014/03/17 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL