Bootstrap基础组件

Bootstrap提供了一些基础组件，用于构建用户界面，其中包括按钮、图标按钮和排版类。以下是这些组件的详细介绍。

1. 按钮（.btn）

Bootstrap的按钮组件是通过<button>或<a>标签与.btn类组合实现的。你可以使用不同的按钮样式和尺寸来满足不同的设计需求。

• 基本按钮：

  <button class="btn btn-primary">主按钮</button>
  <button class="btn btn-secondary">次按钮</button>
  <button class="btn btn-success">成功按钮</button>
  <button class="btn btn-danger">危险按钮</button>
  <button class="btn btn-warning">警告按钮</button>
  <button class="btn btn-info">信息按钮</button>
  <button class="btn btn-light">浅色按钮</button>
  <button class="btn btn-dark">深色按钮</button>
  <button class="btn btn-link">链接按钮</button>
  

• 按钮尺寸： 你可以使用.btn-lg、.btn-sm来设置按钮的大小。

  <button class="btn btn-primary btn-lg">大按钮</button>
  <button class="btn btn-secondary btn-sm">小按钮</button>
  

• 禁用按钮： 使用disabled属性使按钮处于禁用状态。

  <button class="btn btn-primary" disabled>禁用按钮</button>
  

2. 图标按钮（配合Font Awesome或Bootstrap Icons使用）

图标按钮通常结合Font Awesome或Bootstrap Icons使用，以增强按钮的视觉效果。

• 使用Font Awesome： 首先确保你在页面中引入Font Awesome的CSS文件，然后可以在按钮内嵌入图标。

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  
  <button class="btn btn-primary">
      <i class="fas fa-plus"></i> 添加
  </button>
  

• 使用Bootstrap Icons： 你也可以使用Bootstrap Icons，通过以下方式引入：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  
  <button class="btn btn-success">
      <i class="bi bi-check-circle"></i> 确认
  </button>
  

3. 排版类：<hr>、<small>等

Bootstrap提供了一些排版类来增强文本和分隔线的效果。

• 水平分隔线（<hr>）： 使用<hr>标签创建水平分隔线，可以添加.my-4类来增加上下外边距。

  <hr class="my-4">
  

• 小型文本（<small>）： 使用<small>标签可以显示较小的文本，通常用于辅助信息或版权声明。

  <p>这是正常文本，<small>这是小型文本</small>。</p>
  

• 文本强调类： 使用<mark>标记文本以突出显示，使用<del>标记表示删除的文本。

  <p>这是正常文本，<mark>这是高亮文本</mark>，<del>这是删除的文本</del>。</p>
  

总结

Bootstrap的基础组件如按钮、图标按钮和排版类为开发者提供了方便的工具，帮助快速构建用户友好的界面。通过使用这些组件，开发者可以创建美观、功能丰富的网页，提升用户体验。