Bootstrap中的段落和强调内容-白红宇

Bootstrap中的段落和强调内容

阅读量：7242 次

发布时间：2019-06-29

本文共 4226 字，大约阅读时间需要 14 分钟。

段落是排版中另一个重要元素之一。在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版本运用不做过多阐述）。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

Seashen.cn是国内领先的HTML5学习社区！</body>

</html>

强调内容

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

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

我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，

我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。

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

“.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; /*文本加粗*/ }

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

我在学习Bootstrap，我要掌握Bootstrap的所有知识。

斜体

在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。

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

我在seashen.cn网上跟大海一起学习Bootstrap的使用。我一定要学会Bootstrap。

强调相关的类

在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; }    
    
      
     强调相关的类 
     
         
      
       .text-muted 效果
      
 
      
       .text-primary效果
      
 
      
       .text-success效果
      
 
      
       .text-info效果
      
 
      
       .text-warning效果
      
 
      
       .text-danger效果

在排版中离不开文本的对齐方式。在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; }

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

我居左

我居中

我居右

我两端对齐

转载于:https://my.oschina.net/u/2526725/blog/539271

你可能感兴趣的文章

论go语言中goroutine的使用

查看>>

解决td标签上的position:relative属性在各浏览器中的兼容性问题

[译]Chipmunk教程 - 3 初始化

android用sharepreference保存输入框中的内容

查看>>

C# 鼠标穿透窗体功能

查看>>

Windows平台上C++开发内存泄漏检查方法

jQuery data(key, value)函数在匹配的元素上随心所欲的存放数据 (2

查看>>

经典排序之冒泡排序

查看>>

PHP 定义栈结构，实现min函数，获取栈最小元素，要求时间复杂度为O(1)