详解Bootstrap列表组组件

列表组可以用来做列表清单、垂直导航等力量,也得配合其他的组件制作有双重理想的零部件,列表组在bootstrap框架中吗是一个独自的零件,所以啊对应当自己独立源码:

LESS:list-group.less

SASS:_list-group.scss

列表组看上去就是是失去丢了列表符号的列表项,并且配上部分一定的体制,在bootstrap框架中的根底列表组主要不外乎个别只有:

list-group:列表组容器,常用的是ul元素,也可是ol或div元素

list-group-item:列表项,常用之是li元素,也得以是div元素

对此基础列表组并不曾举行过多的体裁设置,主要装了该距离、边框和圆角齐;

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

来拘禁一个例证:

<h1>基础列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">腊肉土豆焖饭</li>
        <li class="list-group-item">香辣风味炸鸡块</li>
        <li class="list-group-item">香菜皮蛋豆腐</li>
        <li class="list-group-item">荷兰豆炒马蹄</li>
        <li class="list-group-item">山楂排骨</li>
        <li class="list-group-item">韭菜炒河虾</li>
    </ul>

图片 1

 

带动徽章的列表组

带来徽章的列表组其实就是是将bootstrap框架中之徽章组件和基础列表组件结合在一起的一个效益,具体做法很简短,只待在.list-group-item的底蕴及搭徽章组件“badge”

心想事成原理:

深受徽章设置了一个右手变,当然如果少独徽章同时于一个列表项中冒出经常,还安装了它之间的离

.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}

例子:

<h1>带徽章的列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">
            13
            腊肉土豆焖饭
        </li>
        <li class="list-group-item">
            20
            香辣风味炸鸡块
        </li>
        <li class="list-group-item">
            12
            香菜皮蛋豆腐
        </li>
        <li class="list-group-item">
            5
            荷兰豆炒马蹄
        </li>
        <li class="list-group-item">
            8
            山楂排骨
        </li>
        <li class="list-group-item">
            15
            韭菜炒河虾
        </li>
    </ul>

图片 2

 

带链接的列表组

拉动连接的列表组其实就算是每个列表项都抱有链接效果,一般为丁想到的即使是以基础列表组的基本功及,给列表项的文件上加链接,如:

<ul class="list-group">
        <li class="list-group-item"><a href="#">腊肉土豆焖饭</a></li>
        <li class="list-group-item"><a href="#">香辣风味炸鸡块</a></li>
        <li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li>
        <li class="list-group-item"><a href="#">荷兰豆炒马蹄</a></li>
        <li class="list-group-item"><a href="#">山楂排骨</a></li>
        <li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>

功效如下:

图片 3

如此这般做生只不足之处,就是链接的点击区域只有以文书及有效性;但多时节还希望在列表项之其它区域都兼备可点击,这是就用在链接标签及平添额外的体制:display:block;但每当bootstrap框架中,还是采取了另外一样种植实现方式,就是拿ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样尽管好达成需要之作用。

心想事成原理:

苟利用a.list-group-item,样式就用举行肯定的拍卖,如:去文本下划线,增加浮动效果相当于;下面是css源码:

a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

带链接列表组的应用:

<h1>带链接的列表组</h1>
    <ul class="list-group">
        <a class="list-group-item" href="#">腊肉土豆焖饭</a>
        <a class="list-group-item" href="#">香辣风味炸鸡块</a>
        <a class="list-group-item" href="#">香菜皮蛋豆腐</a>
        <a class="list-group-item" href="#">荷兰豆炒马蹄</a>
        <a class="list-group-item" href="#">山楂排骨</a>
        <a class="list-group-item" href="#">韭菜炒河虾</a>
    </ul>

功效如下:

图片 4

 

自打定义列表组

bootstrap框架在链接列表组的功底及搭了有限独样式:

.list-group-item-heading:用来定义列表项头部样式

.list-group-item-text:用来定义列表项重点内容

这简单个样式最要命之用意就是用来帮组开发者可以从定义列表项里的情节

实现原理:

马上有限个样式主要控制不容状态下的文件颜色,下面是css源码:

a.list-group-item .list-group-item-heading {
  color: #333;
}

.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777;
}

.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

由定义列表组的利用

<h1>自定义列表组</h1>
    <ul class="list-group">
        <a class="list-group-item">
           <h4 class="list-group-item-heading">列表1标题</h4>
           <p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表2标题</h4>
            <p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表3标题</h4>
            <p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表4标题</h4>
            <p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表5标题</h4>
            <p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表6标题</h4>
            <p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
        </a>
    </ul>

图片 5

 

排表项的状态设置

bootstrap框架中呢受做列表项提供了状态效果,特别是链接列表组,实现方式和前介绍的机件类似,在列表组中不过待于相应的列表项中补充加类名:.active(表示目前状态)、.disabled(表示禁用状态)

实现原理:

于样式上第一对列表项的背景色和文书做了体制设置,下面是css源码:

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

例子:

<h1>列表组状态设置</h1>
    <ul class="list-group">
        <a class="list-group-item active">
            <h4 class="list-group-item-heading">列表1标题</h4>
            <p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表2标题</h4>
            <p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
        </a>
        <a class="list-group-item disabled">
            <h4 class="list-group-item-heading">列表3标题</h4>
            <p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表4标题</h4>
            <p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表5标题</h4>
            <p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表6标题</h4>
            <p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
        </a>
    </ul>

功能如下(第三独列表项是剥夺状态,鼠标移放在它们点来个禁用图标,这里是直接截的希冀,看不到这个效果):

图片 6

 

差不多彩列表组

列表组组件和警告组件一样,bootstrap为不同的状态提供了不同之背景色和文本色,可以动用即时几乎独类名定义不同背景色的列表项:

.list-group-item-success:成功       绿色(背景色)

.list-group-item-info:信息            蓝色(背景色)

.list-group-item-warning:警告       黄色(背景色)

.list-group-item-danger:错误        红色(背景色)

实现原理:

立马几只类名仅修改了背景色和文本色,对应的源码如下:

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

另状态样式代码请查看源码文件,如果想让列表项添加背景色,只需要在类.lis-group-item的基础及多对应的类名即可。

差不多彩列表组的以:

<h1>多彩列表组</h1>
    <ul class="list-group">
        <a href="#" class="list-group-item active">
            列表项1
            10
        </a>
        <a href="#" class="list-group-item list-group-item-success">
            列表项1
            10
        </a>
        <a href="#" class="list-group-item list-group-item-info">
            列表项1
            10
        </a>
        <a href="#" class="list-group-item list-group-item-warning">
            列表项1
            10
        </a>
        <a href="#" class="list-group-item list-group-item-danger">
            列表项1
            10
        </a>
    </ul>

功用如下:

图片 7

相关文章