Bootstrap每天必学之标签与徽章

Bootstrap是一款广受欢迎的前端框架，包含了丰富的标签和组件，可以轻松帮助开发者构建美观、高效的Web应用。在本篇攻略中，我们将学习Bootstrap中的标签和徽章。

一、标签

1. 基础标签

Bootstrap提供了一些基础的HTML标签，可以轻松创建不同样式的文本、表格、列表等元素。

行内标签

Bootstrap提供了一些行内标签，可以帮助你轻松创建不同样式的文本。以下是一些常用的行内标签：

<code> 代码 </code>：用于展示代码块。
<kbd> 键盘键 </kbd>：用于展示键盘按键。
<em> 文本 </em>：用于展示强调文本。
<strong> 文本 </strong>：用于展示重要文本。
<small> 文本 </small>：用于展示小号字体的文本。

例如，使用<code>标签可以创建以下效果：

<p>下面这段代码是使用<code>HTML</code>创建的：</p>

下面这段代码是使用HTML创建的：

列表标签

Bootstrap提供了一些列表标签，可以帮助你轻松创建不同样式的列表。以下是一些常用的列表标签：

<ul class="list-unstyled">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

例如，使用<ul>标签可以创建一个无序列表：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

表格标签

Bootstrap提供了一些表格标签，可以帮助你轻松创建不同样式的表格。以下是一些常用的表格标签：

<table class="table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </tbody>
</table>

例如，使用<table>标签可以创建一个基本的表格：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </tbody>
</table>

2. 标签样式

Bootstrap提供了一些标签样式，可以帮助你轻松创建具有不同颜色和背景的标签。

基础样式

以下是一些常用的基础样式：

<span class="badge badge-primary">标签1</span>
<span class="badge badge-secondary">标签2</span>
<span class="badge badge-success">标签3</span>
<span class="badge badge-danger">标签4</span>
<span class="badge badge-warning">标签5</span>
<span class="badge badge-info">标签6</span>
<span class="badge badge-light">标签7</span>
<span class="badge badge-dark">标签8</span>

例如，使用<span>标签可以创建以下效果：

<p>这是一个 <span class="badge badge-info">信息标签</span>。</p>

这是一个 信息标签。

可取消样式

Bootstrap还提供了一些可取消的标签样式，可以帮助你轻松创建具有不同颜色和背景的标签。以下是一些常用的可取消样式：

<a href="#" class="badge badge-primary">标签1</a>
<a href="#" class="badge badge-secondary">标签2</a>
<a href="#" class="badge badge-success">标签3</a>
<a href="#" class="badge badge-danger">标签4</a>
<a href="#" class="badge badge-warning">标签5</a>
<a href="#" class="badge badge-info">标签6</a>
<a href="#" class="badge badge-light">标签7</a>
<a href="#" class="badge badge-dark">标签8</a>

例如，使用<a>标签可以创建以下效果：

<p>这是一个 <a href="#" class="badge badge-success">成功标签</a>。</p>

这是一个 成功标签。

二、徽章

徽章是Bootstrap中的一个特殊组件，可以帮助你在页面中添加小型的、可自定义颜色的标记。

1. 基本用法

徽章标签使用<span class="badge">内容</span>的格式创建。以下是一个简单的例子：

<p>您有 <span class="badge">5</span> 条新消息。</p>

您有 5 条新消息。

2. 样式和颜色

你可以通过添加额外的类名来改变徽章的样式和颜色：

<span class="badge badge-primary">主要徽章</span>
<span class="badge badge-secondary">次要徽章</span>
<span class="badge badge-success">成功徽章</span>
<span class="badge badge-danger">危险徽章</span>
<span class="badge badge-warning">警告徽章</span>
<span class="badge badge-info">信息徽章</span>
<span class="badge badge-light">浅色徽章</span>
<span class="badge badge-dark">深色徽章</span>

例如，添加badge-primary类可以创建以下效果：

<p>这个 <span class="badge badge-primary">主要徽章</span> 是最重要的。</p>

这个 主要徽章 是最重要的。

3. 对齐方式

你可以使用Bootstrap的弹性布局工具类来设置徽章的对齐方式：

<div class="d-flex justify-content-between">
  <h5>列表标题</h5>
  <span class="badge badge-primary">12</span>
</div>

例如，使用justify-content-between类可以让徽章与标题对齐：

<div class="d-flex justify-content-between">
  <h5>购物清单</h5>
  <span class="badge badge-primary">5</span>
</div>

购物清单

5

总结

本篇攻略介绍了Bootstrap中的标签和徽章。通过本篇攻略，你了解了如何使用基础标签、标签样式和徽章来构建美观、高效的Web应用。