`
9秒学院
  • 浏览: 37389 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

bootstrap列表组listgroup

阅读更多
列表组

列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码:

☑  LESS版本:对应的源码文件 list-group.less

☑   Sass版本:对应的源码文件是 _list-group.scss

☑   编译出的Bootstrap版本:对应的源码bootstrap.css文件第4820行~第4994行

列表组--基础列表组

基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:

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

☑  list-group-item:列表项,常用的是li元素,当然也可以是div元素

来看一个简单的示例:

<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>
运行效果如下:

list

原理分析:

对于基础列表组并没有做过多的样式设置,主要设置了其间距,边框和圆角等:

/*bootstrap.css文件第4820行~第4840行*/
.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;
}
列表组--带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”:

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">
        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">
        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">
        <span class="badge">1290</span>CSS3文本
    </li>
</ul>
实现原理:

实现效果非常简单,就是给徽章设置了一个右浮动,当然如果有两个徽章同时在一个列表项中出现时,还设置了他们之间的距离:

/*bootstrap.css文件第4841行~第4846行*/
.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
列表组--带链接的列表组

带链接的列表组,其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上,给列表项的文本添加链接:

<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3选择器</a>
    </li>
    ...
</ul>
这样做有一个不足之处,就是链接的点击区域只在文本上有效:

但很多时候,都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“display:block”;

虽然这样能解决问题,达到需求。但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果:

<div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
原理实现:

如果使用a.list-group-item时,在样式需要做一定的处理,比如说去文本下划线,增加悬浮效果等:

/*bootstrap.css文件第4847行~第4858行*/
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;
}
列表组--自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式:

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

☑  list-group-item-text:用来定义列表项主要内容

这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容,如下面的示例:

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>
原理实现:

‘这两个样式主要控制不同状态下的文本颜色:

/*bootstrap.css文件第4850行~第4852行*/
a.list-group-item .list-group-item-heading {
  color: #333;
}
/*bootstrap文件第4865行~第4874行*/
.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;
}
/*bootstrap.css文件第4883行~第4898行*/
.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;
}
/*bootstrap.css文件第4987行~第4994行*/
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}
列表组--列表项的状态设置

Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似,在列表组中只需要在对应的列表项中添加类名:

☑  active:表示当前状态

☑  disabled:表示禁用状态

来看个示例:

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
原理实现:

在样式上主要对列表项的背景色和文本做了样式设置:

/*bootstrap.css文件第4859行~第4864行*/
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}
/*bootstrap.css文件第4875行~第4882行*/
.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;
}
列表组--多彩列表组

列表组组件和警告组件一样,Bootstrap为不同的状态提供了不同的背景颜色和文本色,可以使用这几个类名定义不同背景色的列表项。

☑  list-group-item-success:成功,背景色绿色

☑  list-group-item-info:信息,背景色蓝色

☑  list-group-item-warning:警告,背景色为黄色

☑  list-group-item-danger:错误,背景色为红色

如果你想给列表项添加什么背景色,只需要在“list-group-item”基础上增加对应的类名:

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
原理实现:

同样的,这几个类名仅修改了背景色和文本色,对应的源码为:boostrap.css文件第4899行~第4986行:

.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;
}
分享到:
评论

相关推荐

    bootstrap评论列表模板

    在Bootstrap模板中,这些元素会被组织成清晰、易读的布局,可能使用卡片(card)组件或者简单的列表组(list group)来展示。每个评论可能是一个独立的行或卡片,包含必要的信息和操作按钮。 4. **CSS样式**:...

    angular-list-group:Angular List Group - 基于和围绕 Bootstrap 列表组组件的 AngularJS 指令

    Angular List Group 是一个专门为 AngularJS 开发的指令,它基于并扩展了 Bootstrap 的列表组(List Group)组件。Bootstrap 的列表组是一个灵活且强大的组件,用于展示无序、有序或带有按钮的列表。通过 Angular ...

    Bootstrap列表组学习使用

    首先,Bootstrap列表组的基础结构是由`&lt;ul&gt;`或`&lt;ol&gt;`元素包裹的一系列`&lt;li&gt;`元素组成,通过添加`class="list-group"`来应用列表组样式。例如: ```html &lt;ul class="list-group"&gt; &lt;li class="list-group-item"&gt;...

    基于Bootstrap的网格布局和列表布局切换特效

    Bootstrap的列表组(List Group)组件提供了一种简洁的样式化列表,可方便地添加链接、徽章、按钮等元素。列表布局通常具有较高的可读性,用户可以轻松浏览和查找所需信息。 在本案例中,通过jQuery库,我们可以...

    Bootstrap 第12章 列表组面板和嵌入组件

    在第12章"列表组面板和嵌入组件"中,我们将深入探讨Bootstrap中两种重要的布局和展示工具:列表组(List Groups)和嵌入组件(Embedded Components)。这些元素在网页设计中起着关键作用,能够帮助我们构建有组织且...

    bootstrap评论列表模板2018最新版

    这些元素可以使用Bootstrap的类来格式化,如卡片组件(card)和列表组(list-group)。 5. **CSS样式**:Bootstrap的Sass版本允许定制主题颜色、字体和其他样式,使得模板可以与网站的其他部分保持视觉一致性。2018...

    深入浅析Bootstrap列表组组件

    基础的Bootstrap列表组由`.list-group`容器和`.list-group-item`元素构成。`.list-group`通常是无序列表`&lt;ul&gt;`或有序列表`&lt;ol&gt;`,但也可以是`&lt;div&gt;`标签,提供了一种无序的布局方式。`.list-group-item`是列表组中的...

    06.bootstrap列表与代码样式学习.rar

    3. **按钮式列表组(Button-Style List Groups)**:Bootstrap还允许将列表组样式转化为按钮样式,只需在列表项上添加`.list-group-item-action`和`.btn`类,这样列表项看起来就像可点击的按钮。 4. **内联列表组...

    整理关于Bootstrap列表组的慕课笔记

    为了创建带链接的列表组,可以直接将`&lt;a&gt;`标签作为`&lt;li&gt;`的子元素,或者在Bootstrap中,更推荐使用`&lt;div class="list-group"&gt;`替代`&lt;ul class="list-group"&gt;`,并将`&lt;li class="list-group-item"&gt;`替换为`...

    Bootstrap4 列表组

    Bootstrap4 列表组 大部分基础列表组都是无序的。 要创建列表组,可以在 元素上添加 .list-group 类, 在 元素上添加 .list-group-item 类: 实例 First item Second item Third item 激活状态的列表项 通过...

    bootstrap总结与例子

    17. **列表组** (`list groups`): `.list-group` 类提供了一种简单的无序列表样式,支持按钮和链接。 18. **徽章** (`badges`): `.badge` 类用于创建小标签,可用于通知数量或标记。 19. **Jumbotron** (`...

    基于bootstrap的聊天页面设计

    3. **消息组件**:聊天页面的核心是消息展示,Bootstrap提供了预设的卡片(Card)和列表组(List Group)等组件,可以方便地创建消息气泡和时间戳。自定义CSS和JavaScript可以进一步美化这些元素,使其具有动画效果...

    Bootstrap 列表组

    首先,你需要在一个 `div` 元素上添加类 `.list-group`,这是列表组的基础容器。然后,为每个列表项(list item)添加类 `.list-group-item`。例如,以下是一个简单的列表组实例: ```html &lt;div class="list-group...

    bootstrap-3.4.1-dist 2.zip

    3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...

    bootstrap树结构简单实现

    通过添加`class="list-group"`到`&lt;ul&gt;`,我们可以应用Bootstrap的列表组样式,使其看起来更像一个层次结构。 2. **CSS样式**: Bootstrap的CSS类可以用来控制节点的展开和折叠。例如,我们可以通过添加`class=...

    Bootstrap基本组件学习笔记之列表组(11)

    在本篇博文中,我们将聚焦于Bootstrap中的一个基础组件——列表组(List Group),它是构建列表样式的高效工具。 列表组允许你以列表的形式展示复杂和定制的内容,通常用于创建如导航菜单、排行榜或者新闻列表等。...

Global site tag (gtag.js) - Google Analytics