在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

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

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

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

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

/*源码请查看bootstrap.css文件中第274行~280行*/

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：
/*源码请查看bootstrap.css文件中第467行~469行*/

p {

 margin: 0 0 10px;

}

如果你对CSS预处理器有所了解，那么你完全可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：

LESS版本：

@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14

Sass版本：

$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14

第一条语句用于设置字体大小，第二条语句用于设置行高。系统默认使用这两个值产生整个页面相应的margin、padding和line-height的值。换句话说，你只需要修改这两个变量的值，然后重新编译，就可以自定义自己的Bootstrap排版样式。（有兴趣的同学可以尝试一下，此处对于LESS或Sass版本运用不做过多阐述）。

强调内容

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

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

<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>

<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>

效果查看最右侧结果窗口。

“.lead”对应的样式如下：
/*源码查看bootstrap.css文件第470行~480行*/

.lead {

margin-bottom: 20px;

font-size: 16px;

font-weight: 200;

line-height: 1.4;

}

@media (min-width: 768px) {/*大中型浏览器字体稍大*/

.lead {

font-size: 21px;

  }

}

除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {

  font-weight: bold; /*文本加粗*/

}

/*源码查看bootstrap.css文件第481行~第484行*/

small,.small {

  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/

}

/*源码查看bootstrap.css第485行~第487行*/

cite {

font-style: normal;

}

Bootstrap（二）段落+强调内容的更多相关文章

  1. 手机自动化测试：appium源码分析之bootstrap二

    手机自动化测试:appium源码分析之bootstrap二   在bootstrap项目中的io.appium.android.bootstrap.handler包中的类都是对应的指令类, priva ...

  2. 3.bootstrap练习笔记-媒体内容

    bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...

  3. Bootstrap系列 -- 4. 文本内容强调

    一. 文本强调基本样式 .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d ...

  4. android 学习随笔二十一（内容提供者 ）

    一.内容提供者* 应用的数据库是不允许其他应用访问的* 内容提供者的作用就是让别的应用访问到你的私有数据* 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查 ...

  5. Lodop打印二维码内容长度不同如何大小相同

    利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...

  6. bootstrap 设置表格固定宽度 内容换行

    在项目中开发的时候用的bootstrap,但是有些表格的内容 会显示的很长 那么我第一时间想到的就是 修改td或者th的width,但是我设置了 之后不起作用 于是百度找到了解决方法: 学习源头: h ...

  7. 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容

    引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储    首先考虑用二维数组存储所有行数,列数   ...

  8. Flutter扫码识别二维码内容

    前面一篇写了生成二维码图片,这篇来写使用相机扫描识别二维码 识别二维码需要用到插件 barcode_scan 首先在 pubspec.yaml 文件中添加以下依赖,添加依赖后在 pubspec.yam ...

  9. ThoughtWorks.QRCode 生成二维码名片（实现二维码内容换行）

    最近在写一个很简单的功能,按照Vcard的格式,生成二维码名片.本来以为分分钟完事的事情,替换数据,直接调用dll去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...

随机推荐

  1. IOS 10 微信 ajax readystate=0 status=0 解决方法

    最近做了一个 基于微信访问的网页系统 发现IOS10.2.1 版本 访问的时候 AJAX报错,安卓和IOS11.4.1 没有这样的问题. 通过Fiddler抓包发现,AJAX请求时 报错信息为  {& ...

  2. 使用Percona监控插件监控MySQL

    1.使用Percona监控插件监控MySQL yum install http://www.percona.com/downloads/percona-release/redhat/0.1-3/per ...

  3. 使用Erlang实现简单的排序算法：快速排序，冒泡排序，插入排序

    [排序算法] -module(sort). -compile(export_all). %%快速排序 qsort([]) -> []; qsort([Pivot|T]) -> qsort( ...

  4. linux 上拷贝文件到windows 上 文件出现锁的文件

    要在linux上拷贝出文件到windows上,那么文件必须是777的最高权限. chmod wb_redis -R

  5. 程序包 javax.servlet 不存在 解决办法

    其原因是java编译器没有找到软件包javax.servlet. 下载servlet.jar放到lib下没有效果,后发现需要在jdk中添加,如下: 解决办法: 从tomcat lib目录下拷贝一个se ...

  6. bugzilla部署记录

    这两天部署了个bugzilla,记录如下. 1.主要参考文章 Bugzilla安装过程.Bugzilla使用手册及解决方案 如果你使用的系统是win7或者IIS是7.0的话,你可能还需要Win7 安装 ...

  7. 解决ubuntu中文乱码问题

    方法一: Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在 /etc/environment中看到:sudo gedit /etc/environment可以看到如下内容:PATH= ...

  8. Root（hdu5777+扩展欧几里得+原根）

    Root                                                                          Time Limit: 30000/1500 ...

  9. 我自己曾经经历的CMMI3认证通过关于软件测试的访谈【转载】

    转自<http://blog.csdn.net/jcy58/article/details/51908884> 因为当初我在公司里是负责软件测试工作的,所以CMMI3和测试相关的访谈,就是 ...

  10. 【BZOJ4205】卡牌配对 最大流

    [BZOJ4205]卡牌配对 Description 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值 ...