Bootstrap列表组

意况设置

  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框架新增的2个零件,能够用来制作列表清单、垂直导航等功效,也足以包容别的的零部件制作出更优质的零部件。本文将详细介绍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>

 

链接

  用 <a> 标签代替 <li> 标签能够组合1个任何是链接的列表组(还要小心的是,须求将 <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>

 

定制内容

  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框架中的徽章组件和基础列表组结合在联合的多少个职能。具体做法很简短,只要求在“list-group-item”中添加徽章组件“badge”

  原理格外不难,就是给徽章设置了1个右浮动,当然固然有多个徽章同时在2个列表项中出现时,还安装了她们之间的距离

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

 

按钮

  列表组中的成分也得以一直就是按钮(也还要意味着父成分必须是 <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-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>

 

相关文章