19. BootStrap 列表组

列表组 以后凡是带sm、lg 那些 都是响应式的啊 主要你自己看提示..好多啊 讲不完的...

 

-学这个主要还是看他的官方API

最基本的列表组：

 

<ul class="list-group">
    <li class="list-group-item active" >列表项1</li>       <!--active活动项-->
    <li class="list-group-item" >列表项2</li>
    <li class="list-group-item disabled" >列表项3</li>     <!--disabled 禁止项-->
</ul>

 

 

链接和按钮

使用<a>s 或<button>s 创建具有悬停、禁用和活动状态的可操作列表组项目，方法是

添加.list-group-item-action　　//有悬停的效果而已... 还有吧a的默认样式全清除

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">百度一下？</a>
    <a href="#" class="list-group-item list-group-item-action">百度一下？</a>
    <a href="#" class="list-group-item list-group-item-action disabled ">百度一下？</a>  <!--被禁止的a-->
</div>

 

清除外边框：

添加.list-group-flush以移除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目。

好比如说 你在卡片内写 就会有两个边框 这时候你就可以清除掉自己的 即可。

 

<div class="list-group list-group-flush">   <!--list-group-flush： 清除外边框-->
    <a href="#" class="list-group-item list-group-item-action active    ">百度一下？</a>
    <a href="#" class="list-group-item list-group-item-action">百度一下？</a>
    <a href="#" class="list-group-item list-group-item-action disabled ">百度一下？</a>
</div>

 

水平的　　

添加.list-group-horizontal以在所有断点上将列表组项的布局从垂直更改为水平。

意思就是横着来---

专业提示：水平时想要等宽列表组项目吗？添加.flex-fill到每个列表组项目【加不加都无所谓 本来就是响应式的】

<ul class="list-group  list-group-horizontal">  <!--横着来-->
    <li class="list-group-item list-group-item-action">百度一下？</li>
    <li class="list-group-item list-group-item-action">百度一下？</li>
    <li class="list-group-item list-group-item-action">百度一下？</li>
</ul>

 

设置颜色

list-group-item-*

 

<!--在列表项中 用list-group-item-* 设置颜色-->
<ul class="list-group">
    <li class="list-group-item">A simple default list group item</li>

    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

 

 

带徽章

 

在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等。【类似于未读 什么什么的】

<!--下面演示 列表项 + 胶囊徽章：-->
<!--align-items-center : 这个很主要 他是设置 flexbox 子项的排列 不然你的胶囊会很胖 不响应式-->
<ul class="list-group">
    <li class="list-group-item list-group-item-action d-flex  justify-content-between align-items-center">Home
        <span class="badge badge-info badge-pill ">3</span>
    </li>
    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Content
        <span class="badge badge-info badge-pill ">5</span>
    </li>
    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center ">End
        <span class="badge badge-info badge-pill ">0</span>
    </li>
</ul>

 

框架主要还是知道了怎么样的 后面自己配的啊  各种搭配组成一个大项目
主要还要看 手册 看了手册之后 里面有方法 可以搭配