Bootstrap（二）段落+强调内容
在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（二）段落+强调内容的更多相关文章
- 手机自动化测试：appium源码分析之bootstrap二
手机自动化测试:appium源码分析之bootstrap二 在bootstrap项目中的io.appium.android.bootstrap.handler包中的类都是对应的指令类, priva ...
- 3.bootstrap练习笔记-媒体内容
bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...
- Bootstrap系列 -- 4. 文本内容强调
一. 文本强调基本样式 .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d ...
- android 学习随笔二十一（内容提供者 ）
一.内容提供者* 应用的数据库是不允许其他应用访问的* 内容提供者的作用就是让别的应用访问到你的私有数据* 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查 ...
- Lodop打印二维码内容长度不同如何大小相同
利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...
- bootstrap 设置表格固定宽度 内容换行
在项目中开发的时候用的bootstrap,但是有些表格的内容 会显示的很长 那么我第一时间想到的就是 修改td或者th的width,但是我设置了 之后不起作用 于是百度找到了解决方法: 学习源头: h ...
- 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容
引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
- Flutter扫码识别二维码内容
前面一篇写了生成二维码图片,这篇来写使用相机扫描识别二维码 识别二维码需要用到插件 barcode_scan 首先在 pubspec.yaml 文件中添加以下依赖,添加依赖后在 pubspec.yam ...
- ThoughtWorks.QRCode 生成二维码名片（实现二维码内容换行）
最近在写一个很简单的功能,按照Vcard的格式,生成二维码名片.本来以为分分钟完事的事情,替换数据,直接调用dll去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...
随机推荐
- angularjs中的路由介绍详解 ui-route
这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧 首先给大家介绍angular-ui-router的基本用 ...
- tornado 初学
tornado第一个例子 import tornado.ioloopimport tornado.web class MainHandler(tornado.web.RequestHandler): ...
- ubuntu16.04上安装深度学习基本框架caffe2 pytorch tensorflow opencv
anaconda3.5.2.0----python3.6: conda install tensorflow-gpu -y --prefix /media/wkr/diskHgst/ubun ...
- 禁止"Windows Media Player Network Sharing Service"服务自动启动
开始 -> 运行 -> gpedit.msc -> 计算机配置 -> 管理模板 -> Windows 组件 -> Windows Media Player -> ...
- PHP性能：序——谈性能
PHP性能:序——谈性能 这里不谈PHP的性能和其他语言的性能,这里讨论PHP自身的性能问题. 性能是什么? 通俗的来讲,性能,就是在固定的环境下能做的事情的多少. 为什么要性能? 1.每一个软件或网 ...
- php_screw加密安装
php_screw的安装与使用 1.下载:http://sourceforge.net/projects/php-screw/files/ php文件通常以文本格式存贮在服务器端, 很容易被别人读到源 ...
- 自定义验证----required属性
1,required属性 - 表示字段不能为空(注意:只有用户单击“提交”按钮提交表单的时候,浏览器才会执行验证.目前HTML5不支持指定验证的时间,而且验证消息的样式和内容各个浏览器不大一样,不能修 ...
- Lumen开发：lumen源码解读之初始化(4)——服务提供(ServiceProviders)与路由(Routes)
版权声明:本文为博主原创文章,未经博主允许不得转载. 前面讲了singleton和Middleware,现在来继续讲ServiceProviders和Routes,还是看起始文件bootstrap/a ...
- spring mvc 伪静态处理
spring mvc 伪静态处理 @RequestMapping(value = JsonUrlCommand.webshare_get_opuss+"/u{u:[\\w\\W]+}p{p: ...
- python 基础 9.6 设计表结构
一. 设计表结构 在操作设计数据库之前,我们先要设计数据库表结构,我们就来分析分析经典的学生,课程,成绩,老师这几者他们之间的关系,我们先来分析各个主体他们直接有什么属性,并确定表结构,在实际开 ...