📜  bootsrap 标签 - Html (1)

📅  最后修改于: 2023-12-03 14:39:33.080000             🧑  作者: Mango

Bootstrap 标签 - HTML

Bootstrap 是一个流行的前端框架,它提供了 HTML、CSS 和 JavaScript 库,可以帮助程序员快速开发响应式布局和交互性网站。

在 Bootstrap 中,有很多标签可供程序员使用,以下是其中一些常见的标签和用法:

1. 按钮

使用 Bootstrap 的按钮标签可以轻松地创建具有特定样式和交互效果的按钮。以下是使用 Bootstrap 按钮标签的示例代码:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
2. 表单

Bootstrap 的表单标签可以方便地创建表单元素,并提供了各种样式选项。以下是使用 Bootstrap 表单标签的示例代码:

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>
3. 模态框

Bootstrap 的模态框标签可以创建交互性弹出窗口,用于显示信息或收集用户输入。以下是使用 Bootstrap 模态框标签的示例代码:

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

以上是使用 Bootstrap 标签的三个示例,Bootstrap 提供了许多其他标签和工具,有助于程序员快速开发出具有专业外观和交互性的网站。