2-7 强调相关的类
本节编程练习不计算学习进度,请电脑登录imooc.com操作

强调相关的类

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

具本源码查看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框架中的危险风格显示”

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>强调相关的类</title>
  6. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <div class="text-muted">.text-muted 效果</div>
  11. <div class="text-primary">.text-primary效果</div>
  12. <div class="text-success">.text-success效果</div>
  13. <div class="text-info">.text-info效果</div>
  14. <div class="text-warning">.text-warning效果</div>
  15. <div class="text-danger">.text-danger效果</div>
  16. <!--下面是任务部分-->
  17. <p>我是一段危险信息,请用Bootstrap框架中的危险风格显示</p>
  18. </body>
  19. </html>
下一节