三、速览 Web框架 BootStrap4 —— BootStrap4 组件(上)

BootStrap 组件

警告提示框

• 各种颜色提示框

  <div class="alert alert-success">百度</div>
  <div class="alert alert-primary">百度</div>
  <div class="alert alert-secondary">百度</div>
  <div class="alert alert-danger">百度</div>
  <div class="alert alert-warning">百度</div>
  <div class="alert alert-info">百度</div>
  <div class="alert alert-light">百度</div>
  <div class="alert alert-dark">百度</div>
  

• 链接提示框

  <div class="alert alert-success">
      <h4 class="alert-heading">百度</h4>
      <a href="https://www.baidu.com" class="alert-link">www.baidu.com</a>
  </div>
  

• 提示框关闭按钮

  <div class="alert alert-warning alert-dismissible fade show">
      你确定要关闭吗？
      <button class="close" data-dismiss="alert">&times;</button>
  </div>
  

徽章

```html
<h1>CSDN <span class="badge badge-primary">cn</span></h1>
<h1>CSDN <span class="badge badge-secondary">cn</span></h1>
<h1>CSDN <span class="badge badge-success">cn</span></h1>
<h3>CSDN <span class="badge badge-info badge-pill">cn</span></h3>
```

面包屑导航

```html
<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item" ><a href="#">首页</a></li>
        <li class="breadcrumb-item" ><a href="#">用户</a></li>
        <li class="breadcrumb-item active"><a href="#">信息</a></li>
    </ol>
</nav>
```

导航

• 居中导航栏 justify-content-center，垂直导航栏 flex-column

  <nav class="nav justify-content-center">
  <a class="nav-link  active"  href="#">首页</a>
  <a class="nav-link"  href="#">分类一</a>
  <a class="nav-link"  href="#">分类二</a>
  <a class="nav-link disabled"  href="#">分类三</a>
  </nav>
  

• 导航样式 .nav-pills .nav-pills，导航占宽 .nav-fill .nav-justified

  <nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" >分类三</a>
  </nav>
  

• 导航卡片切换

  <nav class="nav nav-tabs">
  <a class="nav-item nav-link  active" data-toggle="tab"  href="#one">首页</a>
  <a class="nav-item nav-link nav-link" data-toggle="tab" href="#two">分页一</a>
  <a class="nav-item nav-link nav-link" data-toggle="tab"  href="#three">分页二</a>
  </nav>
  <div>
      <div id="one" class="tab-pane fade show active">首页内容</div>
      <div id="two" class="tab-pane fade">分页一内容</div>
      <div id="three" class="tab-pane fade">分页二内容</div>
  </div>
  

轮播图

<div id="carousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/1.jpg" class="w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>轮播图标题</h5>
                <p>轮播图内容</p>
            </div>
        </div>
        <div  class="carousel-item">
            <img src="images/2.jpg" class="w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>轮播图标题</h5>
                <p>轮播图内容</p>
            </div>
        </div>
        <div  class="carousel-item">
            <img src="images/3.jpg" class="w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>轮播图标题</h5>
                <p>轮播图内容</p>
            </div>
        </div>
    </div>

    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>