Bootstrap 4 组件参考

<button class="btn btn-primary">主要</button>
<button class="btn btn-outline-primary">描边</button>
<button class="btn btn-success btn-lg">大按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>

<div class="alert alert-primary" role="alert">提示</div>
<div class="alert alert-danger alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">标题</h5>
    <p class="card-text">内容</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

打开模态框

<button data-toggle="modal" data-target="#myModal">打开</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">内容</div>
    </div>
  </div>
</div>

主要 次要 成功 危险 警告 信息 浅色 深色

<span class="badge badge-primary">标签</span>
<span class="badge badge-pill badge-danger">药丸形</span>

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">首页</a>
    </li>
  </ul>
</nav>