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去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...
随机推荐
- 开发中可能会用到的几个小tip----QT, pycharm, android, 等
QT: 如果是在windows下开发的话,添加外部库,外部包含头文件路径的时候,要注意用相对路径,或者在项目上右键添加外部库的路径或者头文件路径,否则,会卡在这里开始怀疑人生... 如果是在linux ...
- 2013 年最好的 20 款免费 jQuery 插件
2013 年最好的 20 款免费 jQuery 插件 oschina 发布于: 2014年01月11日 (8评) 分享到 新浪微博腾讯微博 收藏+99 互联网上面有很多 jQuery 插件,这里我们 ...
- Java异常封装（自定义错误码和描写叙述，附源代码）
真正工作了才发现.Java里面的异常在真正工作中使用还是十分普遍的. 什么时候该抛出什么异常,这个是必须知道的. 当然真正工作里面主动抛出的异常都是经过分装过的,自己能够定义错误码和异常描写叙述. 以 ...
- CyclicBarrier的工作原理及其实例
CyclicBarrier是多线程中一个重要的类,主要用于线程组内部之间的线程的相互等待问题. 1.CyclicBarrier的工作原理 CyclicBarrier大致是可循环利用的屏障,顾名思义,这 ...
- python3读取BJDA药品经营企业数据
#-*- coding:utf-8 -*- #读取北京FDA的药品经营企业数据 # 20161125 zhangshaohua import re import urllib.request impo ...
- 如何使用eclipse创建Maven工程及其子模块
http://blog.csdn.net/jasonchris/article/details/8838802 http://www.tuicool.com/articles/RzyuAj 1,首先创 ...
- Spring 定时作业
Spring定时任务的几种实现 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几种实现方式,由于项目采用spring框架,所以我 ...
- Office 365系列(-)
昨天参加上海微软TechED技术大会,看见很多传说中的大牛,听了涂曙光老师等人的讲座,激情澎湃啊,看见他们对技术以及程序员社区的投入及激情,十分敬佩.自己搞IT行业也已经10多年了,平常都很少写博客和 ...
- shell 字符串处理汇总（查找，替换等等）
字符串: 简称“串”.有限字符的序列.数据元素为字符的线性表,是一种数据的逻辑结构.在计算机中可有不同的存储结构.在串上可进行求子串.插入字符.删除字符.置换字符等运算. 字符: 计算机程序设计及操作 ...
- Redis主从、事务、哨兵、消息、代理分片
安装 wget http://download.redis.io/releases/redis-3.0.5.tar.gz tar -zxvf redis-3.0.5.tar.gz cd redis-3 ...