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去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...
随机推荐
- mysql合并同一列的值
我有例如以下的查询条件显示: 我希望终于显示的效果如图: 将id同样的group_name合并到一行.实现方法:在group_name前面加keywordgroup_concat.然后在sql语句 ...
- iOS UIView添加阴影
_bottomView.layer.masksToBounds = NO; _bottomView.backgroundColor = [UIColor whiteColor]; _bottomVie ...
- [译]GLUT教程 - 整合代码6
Lighthouse3d.com >> GLUT Tutorial >> Extras >> The Code So Far VI 下面代码以窗体模式启动.你可以在 ...
- Android实现点击通知栏后，先启动应用再打开目标Activity ，极光推送等推送的也可以参考一下（转）
我因为项目中集成了极光推送,推送的通知栏点开需要确定进入哪个界面就参考了这边文章,感谢作者的无私. 标签: 情况简述 在开发Android app的过程中,遇到这样一个需求:app中启动一个Servi ...
- unity批量修改AssetBundleName与Variant
批量修改指定路径下的资源的AssetBundleName与Variant. 脚本代码如下: using System.Collections; using System.Collections.Gen ...
- web 网页截取图片
关于在UIwebview上添加滚动图片 两种滚动手势会混淆,应为webview有webview.scrollview的属性 故参照昨天的随笔 scrollview嵌套解决方案. 本篇随笔主要讲循环使用 ...
- C语言基础知识【变量】
C 变量1.变量其实只不过是程序可操作的存储区的名称.C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上.变量的名称可以由字母.数字和下 ...
- Centos 初始化服务器防火墙没有启动找不到/etc/sysconfig/iptables
个人博客:https://blog.sharedata.info/ 具体步骤:添加规则然后重启防火墙自动生成防火墙文件1.iptables -P OUTPUT ACCEPT #添加出规则2.servi ...
- Hadoop生态优秀文章集锦
如何用形象的比喻描述大数据的技术生态?Hadoop.Hive.Spark 之间是什么关系? https://www.zhihu.com/question/27974418 HBase 和 Hive 的 ...
- 6.2-SingletonBeanRegistry-DefaultSingletonBeanRegistry
SingletonBeanRegistry package org.springframework.beans.factory.config; public interface SingletonBe ...