Bootstrap中的段落和强调内容
Bootstrap中的段落和强调内容
9秒教育 发表于2年前
Bootstrap中的段落和强调内容
  • 发表于 2年前
  • 阅读 130
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: Bootstrap中的段落和强调内容

u=2721599714,2937226223&fm=21&gp=0

段落是排版中另一个重要元素之一。在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、paddingline-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>
<p>Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。</p>
<p>Seashen.cn是国内领先的HTML5学习社区!</p></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还通过元素标签:<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; }

粗体

粗体就是给文本加粗,在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。
/*源码查看bootstrap.css文件第55行~第58行*/

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

例如,下面的代码使用<strong>标签定义了强调文本:

<p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>

斜体

在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em><i>来实现。
例如,下面的代码使用了<em><i>标签定义了强调文本:

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

强调相关的类

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性,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>


共有 人打赏支持
粉丝 3
博文 24
码字总数 32297
×
9秒教育
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: