四、速览 Web框架 BootStrap4 —— BootStrap4 组件(下)

按钮

• 普通按钮

  <button class="btn btn-primary">我是按钮</button>
  <button class="btn btn-success">我是按钮</button>
  <button class="btn btn-link">我是按钮</button>
  

• 高级按钮

  <button class="btn btn-primary btn-lg">btn-lg</button>
  <button class="btn btn-primary btn-sm">btn-sm</button>
  <button class="btn btn-primary btn-block">btn-block</button>
  <button class="btn btn-info" data-toggle="button">toggle</button>
  

• 其他按钮

  <a href="#" class="btn btn-success">link</a>
  <a href="#" class="btn btn-success disabled">disabled link</a>
  <input type="button" class="btn btn-success" value="input">
  <input type="button" class="btn btn-danger" disabled value="disabled input">
  

按钮组

• 复选框按钮组

  <div class="btn-group btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-secondary  active">
          <input type="checkbox" checked> Java
      </label>
      <label class="btn btn-secondary">
          <input type="checkbox"> PHP
      </label>
      <label class="btn btn-secondary">
          <input type="checkbox"> Python
      </label>
  </div>
  

• 单选框按钮组

  <div class="btn-group  btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-secondary  active">
          <input type="radio" name="lang" checked> Java
      </label>
      <label class="btn btn-secondary">
          <input type="radio" name="lang"> PHP
      </label>
      <label class="btn btn-secondary">
          <input type="radio" name="lang"> Python
      </label>
  </div>
  

• 垂直按钮组

  <div class="btn-group-vertical btn-group-sm">
      <button class="btn btn-secondary">上</button>
      <button class="btn btn-secondary">中</button>
      <button class="btn btn-secondary">下</button>
  </div>
  

• 分业工具按钮组

  <div class="btn-toolbar">
      <div class="btn-group mt-5 mr-2">
          <button class="btn btn-secondary">ss1</button>
          <button class="btn btn-secondary">2</button>
          <button class="btn btn-secondary">3</button>
          <button class="btn btn-secondary">4</button>
          <button class="btn btn-secondary">5</button>
      </div>
      <div class="btn-group mt-5">
          <button class="btn btn-secondary">6</button>
          <button class="btn btn-secondary">7</button>
          <button class="btn btn-secondary">8</button>
      </div>
  </div>
  

卡片

普通卡片

卡片中可以存放文字、图片、列表等内容。

• 主题卡片

  <div class="card-body">
      <div class="card-title"> 卡片标题</div>
      <div class="card-subtitle text-muted">子标题</div>
      <p class="card-text">这是卡片体的部分</p>
  </div>
  

• 列表卡片

  <div class="card" style="width:300px">
      <div class="card-header"> 列表卡片标题 </div>
      <ul class="list-group list-group-flush">
          <li class="list-group-item">列表一</li>
          <li class="list-group-item">列表二</li>
          <li class="list-group-item">列表三</li>
      </ul>
  </div>
  

• 三段式卡片

<div class="card" style="width:300px">
    <div class="card-header">页头</div>
    <div class="card-body">主体</div>
    <div class="card-footer">页脚</div>
</div>

• 登录式卡片

<div class="card">
    <img src="images/banner.jpg" class="card-img-top" alt="">
    <div class="card-body">主体<br>
        <a class="card-link" href="#">登录</a>
        <a class="card-link" href="#">注册</a>
    </div>
    <div class="card-footer">页脚</div>
</div>

• 文字悬浮卡片

<div class="card w-75 text-center bg-info text-white" >
    <img src="images/banner.jpg" class="card-img" alt="">
    <div class="card-img-overlay">文字悬浮在图片上</div>
</div>

含导航栏

• 导航栏卡片

  <div class="card" style="width:500px">
      <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
              <li class="nav-item"><a class="nav-link active" href="#">主页</a></li>
              <li class="nav-item"><a class="nav-link" href="#">内容</a></li>
              <li class="nav-item"><a class="nav-link disabled" href="#">其它</a></li>
          </ul>
      </div>
      <div class="card-body">这是卡片体的部分</div>
  </div>
  

• 按钮栏卡片

  <div class="card" style="width:500px">
      <div class="card-header">
          <ul class="nav nav-pills card-header-pills">
              <li class="nav-item"><a class="nav-link active" href="#">主页</a></li>
              <li class="nav-item"><a class="nav-link" href="#">内容</a></li>
              <li class="nav-item"><a class="nav-link disabled" href="#">其它</a></li>
          </ul>
      </div>
      <div class="card-body">这是卡片体的部分</div>
  </div>
  

分组卡片

• 卡片组无间隙

  <div class="card-group">
      <div class="card" >
          <img src="images/banner.jpg" class="card-img" alt="">
          <div class="card-body">主体卡片一</div>
          <div class="card-footer">页脚</div>
      </div>
      <div class="card" >
          <img src="images/banner.jpg" class="card-img" alt="">
          <div class="card-body">主体卡片二</div>
          <div class="card-footer">页脚</div>
      </div>
  </div>
  

• 卡片组有间隙

  <div class="card-deck">
      <div class="card">
      ···
  

• 瀑布流卡片组

  <div class="card-columns">
      <div class="card" >
          <img src="images/banner.jpg" class="card-img" alt="">
          <div class="card-body">主体卡片一</div>
          <div class="card-footer">页脚</div>
      </div>
      <div class="card" >
          <div class="card-body">无图卡片一</div>
          <div class="card-footer">页脚</div>
      </div>
      <div class="card" >
          <div class="card-body">无图卡片二</div>
          <div class="card-footer">页脚</div>
      </div>
  </div>