章节
问答
课签
笔记
评论
占位
占位

强调内容

在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。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;
}

任务

我也来试试:完成下面任务

请在右侧代码编辑器第10、11行输入正确代码。将下面的内容完成:

第一个是普通的内容:“我是一个普通的段落,我不需要强调显示”。

第二个是强调的内容:“这部分内容需要特别的强调,我和别人长得不一样”。

?不会了怎么办

参考代码如下:

<p>我是一个普通的段落,我不需要强调显示。</p>

<p class="lead">这部分内容需要特别的强调,我和别人长得不一样。</p>
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?