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

强调相关的类

在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;
}

我们来看看这些强调类对应的效果:查看右侧代码编辑器。

 

任务

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

在右侧代码编辑器中第17行输入正确代码:强调下面一句话。

“我是一危险信息,请用Bootstrap框架中的危险风格显示”

?不会了怎么办

正确代码如下:

<p class="text-danger">我是一段危险信息,请用Bootstrap框架中的危险风格显示</p>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / weixin_慕桂英1592993
bootstrap.min.css 是压缩过的;bootstrap.css是未压缩过的,压缩过的用生生产环境,大大减少网络数据传输量,便之更快更节约流量,而未压缩的用于开发环境,如果程序出错方便调试。

最新回答 / jiewolf
你css引入的地址有问题href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

最新回答 / 草莓summer
不是不对,是他引入的bootstrap的样式有问题,换成这个就可以的href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

最新回答 / 694473412
3.2.0版本是.text-muted{color:#777}.text-primary{color:#428bca}3.3.7版本是.text-muted{color:#777}.text-primary{color:#337ab7}不同版本一直在变,不必纠结这些细节。

已采纳回答 / weibo__幸福不远__0
可以的呀,显示并没有任何问题

最新回答 / joyboy0405
不要可以地去全都记住,理解后只要知道个大概就行了,这些东西在实践中经常用就会记住了,光去记的话效率很低而且容易忘记。希望对你有所帮助~

最新回答 / 回忆过去的小孩
这个我也不懂,但是人家是大神,自然有它的意义

已采纳回答 / menghuanbaolei
a元素class为.text-warning的当鼠标经过的时候

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?
代码语言

账号登录 验证码登录

遇到问题
忘记密码