这篇博客介绍了如何在Bootstrap中实现文本的粗体、斜体、强调以及对齐方式。通过使用<b>、<strong>、<em>、<i>标签以及.text-开头的类，可以轻松地改变文本的视觉样式。内容包括粗体、斜体的HTML标签应用，以及.text-muted、.text-primary等强调类的展示和文本对齐的四种方式。
（四）粗体
可以使用<b>和<strong>标签让文本直接加粗
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>粗体</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知识。</p>
<!--下面是任务部分-->
<p>我是一个段落，这个段落中<b>“强调”</b>一词将会加粗显示。</p>
</body>
</html>
五（斜体）
在Bootstrap中还可以通过使用标签<em>或<i>来实现
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>斜体</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
<!--下面是任务部分-->
<p>我正在学习<i>Bootstrap</i>。我发现<i>Bootstrap</i>真的好强大。</p>
</body>
</html>
六（强调相关类）
Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>强调相关的类</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/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
七（文本对其）
Bootstrap通过定义四个类名来控制文
.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐风格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
<!--下面是任务部分-->
<p class = "text-right">给我加个类，我就向右对齐。</p>
</body>
</html>
bootstrap 粗体;斜体;强调相关类;文本对其
最新推荐文章于 2024-08-28 14:01:05 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
