Bootstrap 是一个流行的前端框架，它使得网页开发变得更加高效和简单。以下是一些常见的 Bootstrap 组件及其用法。

卡片（Card）

卡片是 Bootstrap 中非常实用的组件，用于展示信息。

  • 基本用法：创建一个卡片，你可以使用 <div class="card"> 标签。
  • 添加内容：在卡片内部添加标题、文本和图片。
<div class="card">
  <img class="card-img-top" src="https://cloud-image.ullrai.com/q/Bootstrap_Card/" alt="Bootstrap Card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="/en/tutorials/bootstrap-layouts" class="btn btn-primary">Learn More</a>
  </div>
</div>

模态框（Modal）

模态框用于展示一个对话框，通常包含一些重要的信息或操作。

  • 基本用法：使用 <div class="modal"> 标签创建模态框。
  • 触发模态框：使用按钮或其他元素触发模态框。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Some text in the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

这些只是 Bootstrap 中的一些基本组件。要了解更多，请访问我们的 Bootstrap 教程 页面。