在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框架中的危险风格显示”
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>强调相关的类</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> <body> <div class="text-muted">.text-muted 效果</div> <div class="text-primary">.text-primary效果</div> <div class="text-success">.text-success效果</div> <div class="text-info">.text-info效果</div> <div class="text-warning">.text-warning效果</div> <div class="text-danger">.text-danger效果</div> <!--下面是任务部分--> <p>我是一段危险信息,请用Bootstrap框架中的危险风格显示</p> </body> </html>