阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Bootstrap4 列表组

      Bootstrap4 列表组

      大部分基础列表组都是无序的。

      要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .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>
      

      链接列表项

      要创建一个链接的列表项,可以将 <ul> 替换为 <div> , <a> 替换 <li>。

      如果你想鼠标悬停显示灰色背景就添加.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>
      

      链接的多种颜色列表项

      <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>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录