Bootstrap 4 组件介绍

Bootstrap 4是一个流行的前端框架，提供了许多易于使用的组件来创建响应式Web页面。这里将介绍一些最常用的组件。

栅格系统

Bootstrap的栅格系统是创建响应式布局的基础。它以12列为基础，可以通过在HTML元素上应用相应的类来创建跨越不同列数的布局。以下是最常用的栅格类：

• col：默认为一列。
• col-sm-*：在小屏幕设备上占据*列。
• col-md-*：在中等屏幕设备上占据*列。
• col-lg-*：在大屏幕设备上占据*列。

<div class="container">
  <div class="row">
    <div class="col-md-4">内容1</div>
    <div class="col-md-4">内容2</div>
    <div class="col-md-4">内容3</div>
  </div>
</div>

导航

Bootstrap提供了许多导航组件，如导航栏、标签页和面包屑。

导航栏

导航栏是一个水平的导航条，用于在页面顶部显示网站的导航链接。以下是一些常用的导航栏类：

• navbar：导航栏的基础类。
• navbar-expand-*：影响导航栏在不同屏幕大小上的折叠行为。可选值为sm、md、lg和xl。

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

标签页

标签页允许用户在同一区域内切换不同页面或功能。以下是一些常用的标签页类：

• nav：一个用于包含标签页的父元素。
• nav-tabs：用于标识标签页。
• nav-item：表示一个标签页的单个项目。
• active：用于指示当前选中的标签页。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">个人资料</a>
  </li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <p>Home内容。</p>
  </div>
  <div id="profile" class="tab-pane fade">
    <p>个人资料内容。</p>
  </div>
</div>

面包屑

面包屑可以帮助用户追踪他们在网站上的位置。以下是一些常用的面包屑类：

• breadcrumb：用于包含面包屑的父元素。
• breadcrumb-item：表示一个面包屑单独的项目。
• active：用于指示当前的活动页面。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">选项1</a></li>
    <li class="breadcrumb-item active" aria-current="page">选项2</li>
  </ol>
</nav>

表单

Bootstrap提供了一组表单控件，使表单更易于使用和美观。以下是一些常用的表单控制类：

• form-control：添加样式和布局到表单元素，如input、select等。
• form-group：将表单元素与标签组合在一起。
• form-check：将复选框和单选按钮样式化。

<form>
  <div class="form-group">
    <label for="inputText">文本输入</label>
    <input type="text" class="form-control" id="inputText" placeholder="请输入文本">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
    <small id="emailHelp" class="form-text text-muted">我们会保护您的隐私。</small>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">下拉选择框</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      <option>选项4</option>
      <option>选项5</option>
    </select>
  </div>
</form>

模态框

模态框是一个暂停应用程序流程的对话框，通常用于向用户提供附加信息或操作。以下是一些常用的模态框类：

• modal：在模态框上使用的主要容器。
• modal-dialog：设置模态框的宽度和高度等样式。
• modal-content：在模态框内部包含所有内容的容器。
• modal-header和modal-footer：模态框的标题和脚注。

<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>模态框内容。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>