BootstrapBootstrap列表组

前边的话

  列表组是Bootstrap框架新增的一个零件,可以用来制作列表清单、垂直导航等效果,也足以兼容其他的组件制作出更理想的零部件。本文将详细介绍Bootstrap列表组

 

基本功列表组

  基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些一定的样式。在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;
}

<ul class="list-group">
    <li class="list-group-item">HTML</li>
    <li class="list-group-item">CSS</li>
    <li class="list-group-item">javascript</li>
    <li class="list-group-item">bootstrap</li>
    <li class="list-group-item">jquery</li>
</ul>

 

徽章

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

  原理非凡简单,就是给徽章设置了一个右浮动,当然要是有六个徽章同时在一个列表项中出现时,还设置了她们之间的距离

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

<ul class="list-group">
    <li class="list-group-item">
        33HTML
    </li>
    <li class="list-group-item">
        60CSS
    </li>
    <li class="list-group-item">
        192javascript
    </li>
    <li class="list-group-item">
        20bootstrap
    </li>
    <li class="list-group-item">
        26jquery
    </li>
</ul>

 

链接

  用 <a> 标签代替 <li> 标签可以组成一个总体是链接的列表组(还要小心的是,需要将 <ul> 标签替换为 <div> 标签)。没必要给列表组中的每个元素都加一个父元素

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

<div class="list-group">
  <a href="#" class="list-group-item ">HTML</a>
  <a href="#" class="list-group-item">CSS</a>
  <a href="#" class="list-group-item">javascript</a>
  <a href="#" class="list-group-item active">bootstrap</a>
  <a href="#" class="list-group-item">jquery</a>
</div>

 

按钮

  列表组中的元素也可以间接就是按钮(也还要代表父元素必须是 <div> 而不可能用 <ul> 了),并且无需为各类按钮单独包装一个父元素。注意不要使用规范的 .btn 类

<div class="list-group">
  <button type="button" class="list-group-item ">HTML</button>
  <button type="button" class="list-group-item">CSS</button>
  <button type="button" class="list-group-item">javascript</button>
  <button type="button" class="list-group-item">bootstrap</button>
  <button type="button" class="list-group-item">jquery</button>
</div>

 

定制内容

  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">HTML</h4>
        <p class="list-group-item-text">HTML被认为是前端知识体系里面最简单的知识,几年前,很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展,HTML的技能点也越来越难。世上无难事,好学好总结...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">CSS</h4>
        <p class="list-group-item-text">CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来。实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好。CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易。从CSS禅意花园开始,写CSS成为一种艺术。从CSS2.1到3再到4,CSS所涵盖的内容及可实现的功能得到了极大的丰富,使得CSS的学习成本也越来越高。再多的知识,一个知识点一个知识点去学,总能学明白...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">javascript</h4>
        <p class="list-group-item-text">javascript就如同魔法一样,它是一门充满活力、简单易用的语言,又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者,如果没有认真学习的话,也无法真正理解它们,这就是javascript的矛盾之处。由于javascript不必理解就可以使用,因此通常来说很难真正理解语言本身,这就是我们面临的挑战。不满足于只是让代码正常工作,而是想要弄清楚为什么,勇于挑战这条崎岖颠簸的少有人走的路,拥抱整个javascript...</p>
    </a>    
</div>

 

情状设置

  Bootstrap框架给组合列表项提供了情况效果,特别是链接列表组。比如大规模景色和剥夺状态等。实现模式和前面介绍的零件类似,在列表组中只需要在相应的列表项中添加类名:

  ☑  active:表示目前状态

  ☑  disabled:表示禁用状态

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

<div class="list-group">
  <a href="#" class="list-group-item ">HTML</a>
  <a href="#" class="list-group-item">CSS</a>
  <a href="#" class="list-group-item">javascript</a>
  <a href="#" class="list-group-item active">bootstrap</a>
  <a href="#" class="list-group-item disabled">jquery</a>
</div>

 

多彩列表组

  列表组组件和警戒组件一样,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">默认</a>
    <a href="##" class="list-group-item list-group-item-success">成功</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>
</div>

 

相关文章