BootStrap中的粗体斜体以及强调

一 粗体

1 代码

<!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>
<p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>

<p>我是一个段落,这个段落中<strong>强调</strong>一词将会加粗显示。</p>

</body>
</html>

2 效果

BootStrap中的粗体斜体以及强调

二 斜体

1 代码

<!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>
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
<!--下面是任务部分-->
<p>我正在学习<em>Bootstrap</em>。我发现<i>Bootstrap</i>真的好强大。</p>
</body>
</html>

2 效果

BootStrap中的粗体斜体以及强调

三 强调

1 代码

<!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 class="text-danger">我是一段危险信息,请用Bootstrap框架中的危险风格显示</p>
</body>
</html>

2 效果

BootStrap中的粗体斜体以及强调