Bootstrap4（13）： 清單組 - springsnow

Bootstrap4（13）： 清單組



一、建立清單組

大部分基礎清單組都是無序的。

要建立清單組，可以在

元素上添加 .list-group 類, 在
• 元素上添加 .list-group-item 類:

  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>      

  嘗試一下 »

  

  二、激活狀态的清單項

  通過添加 .active 類來設定激活狀态的清單項：

  <ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>      

  嘗試一下 »

  

  三、禁用的清單項

  .disabled 類用于設定禁用的清單項:

  <ul class="list-group">
    <li class="list-group-item disabled">Disabled item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>      

  嘗試一下 »

  

  四、連結清單項

  要建立一個連結的清單項，可以将
  替換為 ， 替換
  • 。如果你想滑鼠懸停顯示灰色背景就添加.list-group-item-action 類:

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">First item</a>
      <a href="#" class="list-group-item list-group-item-action">Second item</a>
      <a href="#" class="list-group-item list-group-item-action">Third item</a>
    </div>      

    嘗試一下 »

    

    五、多種顔色清單項

    清單項目的顔色可以通過以下列來設定： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

    <ul class="list-group">
      <li class="list-group-item list-group-item-success">成功清單項</li>
      <li class="list-group-item list-group-item-secondary">次要清單項</li>
      <li class="list-group-item list-group-item-info">資訊清單項</li>
      <li class="list-group-item list-group-item-warning">警告清單項</li>
      <li class="list-group-item list-group-item-danger">危險清單項</li>
      <li class="list-group-item list-group-item-primary">主要清單項</li>
      <li class="list-group-item list-group-item-dark">深灰色清單項</li>
      <li class="list-group-item list-group-item-light">淺色清單項</li>
    </ul>      

    嘗試一下 »

    

    1、連結的多種顔色清單項

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">激活清單項</a>
        <a href="#" class="list-group-item list-group-item-success">成功清單項</a>
        <a href="#" class="list-group-item list-group-item-secondary">次要清單項</a>
        <a href="#" class="list-group-item list-group-item-info">資訊清單項</a>
        <a href="#" class="list-group-item list-group-item-warning">警告清單項</a>
        <a href="#" class="list-group-item list-group-item-danger">危險清單項</a>
        <a href="#" class="list-group-item list-group-item-primary">主要清單項</a>
        <a href="#" class="list-group-item list-group-item-dark">深灰色清單項</a>
        <a href="#" class="list-group-item list-group-item-light">淺色清單項</a>
    </div>      

    嘗試一下 »