Bootstrap中的段落和强调内容

时间 2019-11-09

原文原文链接

段落是排版中另外一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：css

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

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

三、颜色为深灰色（#333）；bootstrap

四、字体为"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行*/less

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版本运用不作过多阐述）。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>段落（正文文本）</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合做开发,是一个CSS/HTML框架。
Seashen.cn是国内领先的HTML5学习社区！</body>

</html>

强调内容

在实际项目中，对于一些重要的文本，但愿突出强调的部分都会作另外的样式处理。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还经过元素标签:、、和<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; }

粗体

粗体就是给文本加粗，在普通的元素中咱们通常经过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可使用和标签让文本直接加粗。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {   font-weight: bold; /*文本加粗*/ }

例如，下面的代码使用标签订义了强调文本：

<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知识。</p>

斜体

在排版中，除了用加粗来强调突出的文本以外，还可使用斜体。斜体相似于加粗同样，除了能够给元素设置样式font-style值为italic实现以外，在Bootstrap中还能够经过使用标签或来实现。
例如，下面的代码使用了和标签订义了强调文本：

<p>我在seashen.cn网上跟<em>大海</em>一块儿学习<i>Bootstrap</i>的使用。我必定要学会<i>Bootstrap</i>。</p>

强调相关的类

在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（相似前面说的“.lead”）,这些强调类都是经过颜色来表示强调，具本说明以下：

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

具本源码查看bootstrap.css文件第500行~第532行：

.text-muted { color: #999; } .text-primary { color: #428bca; } a.text-primary:hover { color: #3071a9; } .text-success { color: #3c763d; } a.text-success:hover { color: #2b542c; } .text-info { color: #31708f; } a.text-info:hover { color: #245269; } .text-warning { color: #8a6d3b; } a.text-warning:hover { color: #66512c; } .text-danger { color: #a94442; } a.text-danger:hover { color: #843534; } <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>强调相关的类</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div>.text-muted 效果</div> <div>.text-primary效果</div> <div>.text-success效果</div> <div>.text-info效果</div> <div>.text-warning效果</div> <div>.text-danger效果</div> </body> </html>

在排版中离不开文本的对齐方式。在CSS中经常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操做，方便使用，Bootstrap经过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

具体源码查看bootstrap.css文件第488行~第499行：

.text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }

例以下面的四行代码，分别定义文本的四种不一样的对齐风格：

<p>我居左</p> <p>我居中</p> <p>我居右</p> <p>我两端对齐</p>