编程 Javascript

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

Posted in Javascript onDecember 07, 2016

列表组件用于以列表形式呈现复杂的和自定义的内容。

创建一个列表组，只需要完成以下两步：

（1）向元素 <ul> 添加 class .list-group；
（2）向 <li> 添加 class .list-group-item。

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>列表组</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3">
 <div class="page-header">
  <h1>排行榜</h1>
 </div>
 <ul class="list-group">
  <li class="list-group-item">
  <a href="#">
   kikay
   <span class="badge navbar-right">255</span>
  </a>
  </li>
  <li class="list-group-item">
  <a href="#">
   Tom
   <span class="badge navbar-right">125</span>
  </a>
  </li>
  <li class="list-group-item">
  <a href="#">
   小花
   <span class="badge navbar-right">101</span>
  </a>
  </li>
 </ul>
 </div>
 <div class="col-lg-3">
 <div class="page-header">
  <h1>新闻列表</h1>
 </div>
 <div class="list-group">
  <div class="list-group-item active">
  <h3 class="list-group-item-heading">新闻标题1</h3>
  <p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
  </div>
  <div class="list-group-item list-group-item-info">
  <h3 class="list-group-item-heading">新闻标题2</h3>
  <p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
  </div>
  <div class="list-group-item list-group-item-danger">
  <h3 class="list-group-item-heading">新闻标题3</h3>
  <p class="list-group-item-text">新闻内容新闻内容新闻内容新闻内容</p>
  </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

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

最后说明下，上面的例子的“排行榜”中，向列表项添加徽章组件。只需要在<li>元素中添加<span class="badge">即可。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 字符串与数组转换函数[不用split与join]

Dec 13 Javascript

actionscript与javascript的区别

May 25 Javascript

jQuery操作元素css样式的三种方法

Jun 04 Javascript

javascript实现通过表格绘制颜色填充矩形的方法

Apr 21 Javascript

JavaScript实现DIV层拖动及动态增加新层的方法

May 12 Javascript

学习JavaScript设计模式(策略模式)

Nov 26 Javascript

AngularJS入门教程之Select(选择框)详解

Jul 27 Javascript

微信小程序中使用ECharts 异步加载数据的方法

Jun 27 Javascript

vue-cli随机生成port源码的方法

Sep 02 Javascript

layui-table对返回的数据进行转变显示的实例

Sep 04 Javascript

layer.js open 隐藏滚动条的例子

Sep 05 Javascript

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

Jul 27 Javascript

Bootstrap基本样式学习笔记之图片(6)

Dec 07 #Javascript

JavaScript学习笔记--常用的互动方法

Dec 07 #Javascript

详解JavaScript的内置对象

Dec 07 #Javascript

Bootstrap基本样式学习笔记之标签(5)

Dec 07 #Javascript

Bootstrap基本样式学习笔记之按钮(4)

Dec 07 #Javascript

jQuery中get方法用法分析

Dec 07 #Javascript

Bootstrap基本样式学习笔记之表单(3)

Dec 07 #Javascript

You might like

PHP文件缓存类实现代码

2015/10/26 PHP

基于php实现随机合并数组并排序(原排序)

2015/11/26 PHP

基于PHP实现的多元线性回归模拟曲线算法

2018/01/30 PHP

JS性能优化笔记搜索整理

2013/08/21 Javascript

js 距离某一时间点时间是多少实现代码

2013/10/14 Javascript

推荐25个超炫的jQuery网格插件

2014/11/28 Javascript

nw.js实现类似微信的聊天软件

2015/03/16 Javascript

javascript学习指南之回调问题

2016/04/23 Javascript

基于WebUploader的文件上传js插件

2016/08/19 Javascript

微信公众号支付H5调用支付解析

2016/11/04 Javascript

vue数据双向绑定原理解析（get & set)

2017/03/08 Javascript

Angular.js指令学习中一些重要属性的用法教程

2017/05/24 Javascript

vue实现表格数据的增删改查

2017/07/10 Javascript

React Native实现地址挑选器功能

2017/10/24 Javascript

jquery拖拽自动排序插件使用方法详解

2020/07/20 jQuery

vue实现吸顶、锚点和滚动高亮按钮效果

2019/10/21 Javascript

Python中函数的多种格式和使用实例及小技巧

2015/04/13 Python

Python自动化运维_文件内容差异对比分析

2017/12/13 Python

Python使用pandas对数据进行差分运算的方法

2018/12/22 Python

深入理解Python异常处理的哲学

2019/02/01 Python

python自制包并用pip免提交到pypi仅安装到本机【推荐】

2019/06/03 Python

django实现模型字段动态choice的操作

2020/04/01 Python

Django 实现 Websocket 广播、点对点发送消息的代码

2020/06/03 Python

详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法

2021/01/07 Python

纯CSS和jQuery实现的在页面顶部显示的进度条效果2例（仿手机浏览器进度条效果）

2014/04/16 HTML / CSS

金牌葡萄酒俱乐部：Gold Medal Wine Club

2017/11/02 全球购物

Android interview questions

2016/12/25 面试题

大学生创业感言

2014/01/25 职场文书

《记金华的双龙洞》教学反思

2014/04/19 职场文书

医药销售自荐书

2014/05/29 职场文书

大学迎新标语

2014/06/26 职场文书

城管年度个人总结

2015/02/28 职场文书

2015年库房工作总结

2015/04/30 职场文书

Python如何导出导入所有依赖包详解

2021/06/08 Python

Django实现drf搜索过滤和排序过滤

2021/06/21 Python

redis调用二维码时的不断刷新排查分析

2022/04/01 Redis