Bootstrap列表组

面前的语句

  列表组是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>

 

相关文章