仓库源文站点原文


tags: [Bootstrap, 博客, 网站] title: 开始使用 Bootstrap slug: bootstrap-demo

last_modified_at: 2023-7-2

动机

由于非常想要一个像样的警告框,于是随便搞了个前端框架,仅作记录

demo

<div class="alert alert-success" role="alert" markdown='1'> <h3 class="alert-heading"><i class="fas fa-check"></i> Well done!</h3> *Great!* Here comes [a link](#demo). --- <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div><div class="alert alert-primary d-flex align-items-center" role="alert" markdown='1'> <i class="fa-fw fas fa-info"></i> An example notice alert with an icon </div> <div class="alert alert-primary d-flex align-items-center" role="alert" markdown='1'> <i class="fa-fw fas fa-question"></i> An example notice question with an icon </div> <div class="alert alert-danger d-flex align-items-center" role="alert" markdown='1'> <i class="fa-fw fas fa-exclamation"></i> An example danger alert with an icon </div> <div class="alert alert-warning d-flex align-items-center" role="alert" markdown='1'> <i class="fa-fw fas fa-times"></i> An example error alert with an icon </div>
<div class="alert alert-success" role="alert" markdown='1'>
  <h3 class="alert-heading"><i class="fa-fw fas fa-check"></i> Well done!</h3>

  *Great!* Here comes [a link](#).

  ---

  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<div class="alert alert-primary d-flex align-items-center" role="alert" markdown='1'>
  <i class="fas fa-info"></i> An example notice alert with an icon
</div>
<div class="alert alert-primary d-flex align-items-center" role="alert" markdown='1'>
  <i class="fas fa-question"></i> An example notice question with an icon
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert" markdown='1'>
  <i class="fas fa-exclamation"></i> An example danger alert with an icon
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert" markdown='1'>
  <i class="fas fa-times"></i> An example error alert with an icon 
</div>