文档章节

Bootstrap中的段落和强调内容

9
 9秒教育
发布于 2015/12/04 12:58
字数 1683
阅读 144
收藏 1

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>


© 著作权归作者所有

共有 人打赏支持
9
粉丝 2
博文 24
码字总数 32297
作品 0
东城
私信 提问
Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了...

wybo521
2016/01/25
7
0
Bootstrap响应式前端框架笔记二——排版标签与类

Bootstrap响应式前端框架笔记二——排版标签与类 Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行...

珲少
2016/12/03
60
0
BootStrap

bootstrap下载: 英文网址: 中文网址: 选择编译压缩版本,可下载到本地使用,也可网上引用CDN bootstrap应用 - 引用框架(基础)与注意点: bootstrap学习 文中带 . 的标号为选择器,如.le...

大仁孙
2016/07/13
37
0
Bootstrap 缩略图

本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带...

wybo521
2016/01/28
14
0
Bootstrap 3 How-To #2 标题,链接与按钮

Bootstrap 3 How-To #2 标题,链接与按钮 这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书,但是,这本书的内容是基于以前版本的,与最新的 3.0 并不一致。 为了...

麦克风
2015/07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊Token通证或者代币的真正作用是什么?

上一篇文章以太坊(Ethereum)与以太(Ether)中,你应该很好地理解以太坊是如何构建以太坊应用程序网络的,这些应用程序需要一个名为Ether的加密货币来运行。现在是时候引入一个更深层的概念...

笔阁
21分钟前
3
0
PHP - 利用P3P实现跨域

P3P是什么 P3P Platform for Privacy Preferences, 是W3C公布的一项隐私保护推荐标准,以为用户提供隐私保护。 P3P标准的构想是:Web 站点的隐私策略应该告之访问者该站点所收集的信息类型、...

hansonwong
22分钟前
2
0
传统SSM框架之微信授权登陆

1、jdbc.properties (下面瞎写的值) WEIXIN_APP_ID=wx5438496a99c8d26acbWEIXIN_APP_SECRET=d070fjcwiefhwr38942dw 2、获取配置属性 /** * @Author:Mujiutian * @Description:微信参......

木九天
22分钟前
2
0
以太坊(Ethereum)与以太(Ether)为什么容易混淆?

客观的来说,以太坊与以太这两个概念很容易混淆。 当我们听到以太坊Ethereum这个词时,我们通常会将它与加密货币(比如比特币)联系起来。虽然这个定义并不完全错误。但重要的是要理解以太坊...

geek12345
24分钟前
2
0
ROS实操笔记四 msg 和srv

msg: msg files are simple text files that describe the fields of a ROS message. They are used to generate source code for messages in different languages. srv: an srv file descr......

placido
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部