列表组--自定义列表组，玩转Bootstrap（基础）教程-慕课网

列表组--自定义列表组

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;
}

任务

我来试试：制作一个“自定义列表组”

文本素材：

1、Canvas绘图详解：本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》，在大家对Canvas绘图有一定了解的基础上......

2、玩转Bootstrap：Bootstrap框架是一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。

3、基于bootstrap的网页开发：Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架...

效果图如下：

?不会了怎么办

参考代码：

<div class="list-group">
    <a href="##" class="list-group-item">
      <h4 class="list-group-item-heading">Canvas绘图详解<span class="badge">12</span></h4>
      <p class="list-group-item-text">本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》，在大家对Canvas绘图有一定了解的基础上......</p>
    </a>
    <a href="##" class="list-group-item">
      <h4 class="list-group-item-heading">玩转Bootstrap<span class="badge">30</span></h4>
      <p class="list-group-item-text">Bootstrap框架是一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。            </p>
    </a>
    <a href="##" class="list-group-item">
      <h4 class="list-group-item-heading">基于bootstrap的网页开发<span class="badge">5</span></h4>
      <p class="list-group-item-text">Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架...            </p>
    </a>
</div>

index.html
style.css

1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
body{
  padding: 30px 
      100px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

7-22 列表组--自定义列表组