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

强调内容

在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。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>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / Elvis_T
http://getbootstrap.com/ 点击Download进行下载用你的编辑器查看bootstrap.min.css

已采纳回答 / yunsheng
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

最新回答 / qq_漠然_3
在 CSS 中,类选择器以一个点号显示,所以是class=small逗号代表选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:h2, p {color:gray;}将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。可以将任意多个选择器分组在一起,对此没有任何限制。例如,如果您想把很多元素...

已采纳回答 / RexTao
@media (min-width: 768px) 这个么?这个是判断使用bootstrap的媒体(浏览器等屏幕宽度)

已采纳回答 / londy幻境
你可以查看一下bootstrap.css源码,看一下.lead样式<...code...>

最赞回答 / 青春的光3454884
是的,bootstrap本身就是一个写好的css框架;我们可以直接引用,以此方便我们的工作。

已采纳回答 / Perona
要不你拷贝下面的代码试试,我这边是可以通过滴<...code...>

已采纳回答 / LeeHo同學
不是的 ,不用记住,但大体的要记住,待开发时需要,在来查看。

最赞回答 / 我必win
.jumbotron p{ margin-bottom:15px;font-size:21px;font-weight:200}/* 权值 = 10+1=11 */.lead{ margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}/* 权值 = 10 */@media (min-width:768px){.lead{font-size:21px}选择器的优先权解释:1.  内联样式表的权值最高 1000;2.  ID 选择器的...

已采纳回答 / 偌颜宁
在实际开发中单双引号都是可以使用的,这里为了代码的统一化而做的严格校验

已采纳回答 / 偌颜宁
在实际开发中单双引号都是可以使用的,这里为了代码的统一化而做的严格校验
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言