一、警告框

1、alert基本样式

  1. <div class="alert alert-primary">alert-primary</div>
  2. <div class="alert alert-secondary">alert-secondary</div>
  3. <div class="alert alert-success">alert-success</div>
  4. <div class="alert alert-danger">alert-danger</div>
  5. <div class="alert alert-warning">alert-warning</div>
  6. <div class="alert alert-info">alert-info</div>
  7. <div class="alert alert-light">alert-light</div>
  8. <div class="alert alert-dark">alert-dark</div>

2、链接样式

  1. <div class="alert alert-primary">
  2.     这是一个<a href="#" class="alert-link">链接</a>
  3. </div>
  4. <div class="alert alert-secondary">
  5.     这是一个<a href="#" class="alert-link">链接</a>
  6. </div>
  7. <div class="alert alert-success">
  8.     这是一个<a href="#" class="alert-link">链接</a>
  9. </div>
  10. <div class="alert alert-danger">
  11.     这是一个<a href="#" class="alert-link">链接</a>
  12. </div>
  13. <div class="alert alert-warning">
  14.     这是一个<a href="#" class="alert-link">链接</a>
  15. </div>
  16. <div class="alert alert-info">
  17.     这是一个<a href="#" class="alert-link">链接</a>
  18. </div>
  19. <div class="alert alert-light">
  20.     这是一个<a href="#" class="alert-link">链接</a>
  21. </div>
  22. <div class="alert alert-dark">
  23.     这是一个<a href="#" class="alert-link">链接</a>
  24. </div>

3、在警告框里添加额外的内容

  1. <div class="alert alert-success">
  2.     <h4 class="alert-heading">这是一个标题</h4>
  3.     <p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容</p>
  4.     <hr>
  5.     <p>下面还可以添加一个说明</p>
  6. </div>

4、可以关闭的警告框

  1. <div class="alert alert-warning alert-dismissible fade show">
  2.     这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js
  3.     <button class="close" data-dismiss='alert'>&times;</button><!-- class="close"：关闭符号的基础样式 -->
  4.     <!-- alert-dismissible：给close定位，因为close是有float的，用这个可以给定位，left和top=0 -->
  5.     <!-- fade show：动画效果 -->
  6.     <!-- data-dismiss='alert'：与js进行交互 -->
  7. </div>

5、通过按钮关闭警告框（js代码）

  1. <div class="alert alert-danger fade show myAlert"><!-- myAlert：自己设得class名 -->通过按钮关闭警告框 </div>
  2. <button class="closeBtn">关闭警告框</button>
  3. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  4. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  5. <script>
  6.     //方法
  7.     $('.closeBtn').click(function(){
  8.         $('.myAlert').alert('close');
  10.     });
  11.     //事件
  12.     $('.myAlert').on('close.bs.alert',function(){
  13.         alert('close方法被调用了');//第一次调用
  14.     });
  15.     $('.myAlert').on('closed.bs.alert',function(){
  16.         alert('警告框关闭了');//第二次调用
  17.     });
  18. </script>

二、徽章

1、徽章的颜色

  1. <div class="row first">
  2.     <span class="badge">徽章</span><!-- 会有运动过度的效果：transtion --><!-- 默认徽章 -->
  3.     <span class="badge badge-primary">有颜色的徽章</span>
  4.     <span class="badge badge-secondary">有颜色的徽章</span>
  5.     <span class="badge badge-success">有颜色的徽章</span>
  6.     <span class="badge badge-danger">有颜色的徽章</span>
  7.     <span class="badge badge-warning">有颜色的徽章</span>
  8.     <span class="badge badge-info">有颜色的徽章</span>
  9.     <span class="badge badge-light">有颜色的徽章</span>
  10.     <span class="badge badge-dark">有颜色的徽章</span>
  11. </div>

2、徽章的颜色取决于父级

  1. <div class="row mt-5">
  2.     <h1><span class="badge badge-primary">有颜色的徽章</span></h1>
  3.     <h2><span class="badge badge-secondary">有颜色的徽章</span></h2>
  4.     <h3><span class="badge badge-success">有颜色的徽章</span></h3>
  5.     <h4><span class="badge badge-danger">有颜色的徽章</span></h4>
  6.     <h5><span class="badge badge-warning">有颜色的徽章</span></h5>
  7.     <h6><span class="badge badge-info">有颜色的徽章</span></h6>
  8.     <h6><span class="badge badge-light">有颜色的徽章</span></h6>
  9.     <h6><span class="badge badge-dark">有颜色的徽章</span></h6>
  10. </div>

3、在按钮里使用徽章

<div class="row mt-5">
    <button class="btn btn-primary">在按钮里使用徽章<span class="badge badge-light">5</span></button>
</div>

4、胶囊徽章

<div class="row mt-5 first">
    <span class="badge">徽章</span>
    <span class="badge badge-pill badge-primary">胶囊徽章</span>
    <span class="badge badge-pill badge-secondary">胶囊徽章</span>
    <span class="badge badge-pill badge-success">胶囊徽章</span>
    <span class="badge badge-pill badge-danger">胶囊徽章</span>
    <span class="badge badge-pill badge-warning">胶囊徽章</span>
    <span class="badge badge-pill badge-info">胶囊徽章</span>
    <span class="badge badge-pill badge-light">胶囊徽章</span>
    <span class="badge badge-pill badge-dark">胶囊徽章</span>
</div>

5、胶囊链接

<div class="row mt-5 first">
    <a href="#" class="badge badge-pill badge-primary">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-secondary">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-success">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-danger">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-warning">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-info">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-light">胶囊徽章</a>
    <a href="#" class="badge badge-pill badge-dark">胶囊徽章</a>
</div>

三、面包屑导航：想返回原来网页

<!-- 首页/联系我们/关于我们 -->
<div class="container">
    <div class="row d-block"><!-- 记得用d-block --><!-- 自带颜色 -->
        <nav>
            <ol class="breadcrumb"><!-- 一般用ol或ul -->
                <li class="breadcrumb-item"><a href="#">首页</a></li>
                <li class="breadcrumb-item"><a href="#">关于我们</a></li>
                <li class="breadcrumb-item active">联系我们</li>
            </ol>
        </nav>
    </div>
</div>

四、按钮

1、颜色

<div class="row d-block mt-5">
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-secondary">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-light">按钮</button>
    <button class="btn btn-dark">按钮</button>
    <button class="btn btn-link">按钮</button>
</div>

2、其它类型的按钮

<div class="row mt-5 d-block">
    <a href="#" class="btn btn-primary">a标签按钮</a>
    <button type="submit" class="btn btn-secondary">button标签按钮</button>
    <input type="button" value="input标签" class="btn btn-success">
    <input type="submit" value="input标签" class="btn btn-danger">
    <input type="reset" value="input标签" class="btn btn-warning">
</div>

3、带边框的按钮

<!-- 按钮都有自带hover效果 -->
<div class="row d-block mt-5">
    <button class="btn btn-outline-primary">按钮</button>
    <button class="btn btn-outline-secondary">按钮</button>
    <button class="btn btn-outline-success">按钮</button>
    <button class="btn btn-outline-danger">按钮</button>
    <button class="btn btn-outline-warning">按钮</button>
    <button class="btn btn-outline-info">按钮</button>
    <button class="btn btn-outline-light">按钮</button>
    <button class="btn btn-outline-dark">按钮</button>
</div>

4、大小不同的按钮

<!-- btn-lg，btn-sm-->
<div class="row d-block mt-5">
    <button class="btn btn-primary btn-lg">大按钮</button>
    <button class="btn btn-secondary">正常按钮</button>
    <button class="btn btn-success btn-sm">小按钮</button>
</div>

5、block类型的按钮

<!-- 占满一行 -->
<div class="row d-block mt-5">
    <button class="btn btn-primary btn-lg btn-block">块级按钮</button>
    <button class="btn btn-secondary btn-block">块级按钮</button>
</div>

6、启用与停用状态的按钮

<!-- 淘宝买货可用 -->
<div class="row d-block mt-5">
    <button class="btn btn-primary active">启用状态</button>
    <a href="#" class="btn btn-secondary active">启用状态</a>
    <button class="btn btn-primary" disabled>停用状态</button><!-- 注意：button与a的使用方法不一样！！！ -->
    <a href="#" class="btn btn-secondary disabled">停用状态</a>
</div>

7、切换按钮的active状态

<!-- data-toggle='button' -->
<div class="row d-block mt-5">
    <button class="btn btn-primary active" data-toggle='button'>点击切换状态</button>
</div>

8、选项卡：按钮组+radio

<!-- 选项卡的效果 -->
<div class="row mt-5">
    <div class="btn-group btn-group-toggle" data-toggle="buttons"><!-- btn-group-toggle：可以把radio隐身 -->
        <label class="btn btn-secondary active">
            <input type="radio" name="options" checked>Active
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options">Active
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options">Active
        </label>
    </div>
</div>

9、切换active状态（js代码）

<div class="row d-block mt-5">
    <button id="btn" class="btn btn-primary">点击切换状态</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
<script>
    $('#btn').button('toggle');
</script>

五、按钮组：

1、按钮组

<div class="row mt-5 d-block">
    <div class="btn-group"><!-- 注意圆角的变化 -->
        <button class="btn btn-primary">Left</button>
        <button class="btn btn-primary">Center</button>
        <button class="btn btn-primary">Right</button>
    </div>
</div>

2、按钮组工具列：

<div class="row mt-5 btn-toolbar"><!-- btn-toolbar -->
    <div class="btn-group mr-2">
        <button class="btn btn-success">1</button>
        <button class="btn btn-success">2</button>
        <button class="btn btn-success">3</button>
    </div>
    <div class="btn-group mr-2">
        <button class="btn btn-success">5</button>
        <button class="btn btn-success">6</button>
        <button class="btn btn-success">7</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-success">9</button>
    </div>
</div>

3、@input

<div class="row btn-toolbar mt-5">
    <div class="btn-group mr-2">
        <button class="btn btn-secondary">1</button>
        <button class="btn btn-secondary">2</button>
        <button class="btn btn-secondary">3</button>
        <button class="btn btn-secondary">4</button>
    </div>
    <div class="input-group"><!-- input-group -->
        <div class="input-group-prepend">
            <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" placeholder="Input group example">
    </div>
</div>

4、缩放

<!-- btn-group-lg， btn-group-sm-->
<div class="row mt-5">
    <div class="btn-group btn-group-lg"><!-- 注意放的位置 -->
        <button class="btn btn-primary">Left</button>
        <button class="btn btn-primary">Center</button>
        <button class="btn btn-primary">Right</button>
    </div>
</div>
<div class="row mt-1">
    <div class="btn-group">
        <button class="btn btn-primary">Left</button>
        <button class="btn btn-primary">Center</button>
        <button class="btn btn-primary">Right</button>
    </div>
</div>
<div class="row mt-1 ">
    <div class="btn-group btn-group-sm">
        <button class="btn btn-primary">Left</button>
        <button class="btn btn-primary">Center</button>
        <button class="btn btn-primary">Right</button>
    </div>
</div>

5、内嵌（下拉菜单）

<div class="row mt-5">
    <div class="btn-group">
        <button class="btn btn-danger">1</button>
        <button class="btn btn-danger">2</button>
        <div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><!-- dropdown-toggle：下拉小三角 -->
            <div class="dropdown-menu"> <!-- 使用这个必须要加popper.js -->
                <a href="#" class="dropdown-item">北京</a>
                <a href="#" class="dropdown-item">上海</a>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

6、垂直排列：（通过flex）

<div class="row mt-5">
    <div class="btn-group-vertical"><!-- btn-group-vertical -->
        <button class="btn btn-warning">北京</button>
        <button class="btn btn-warning">上海</button>
        <button class="btn btn-warning">广州</button>
    </div>
</div>