首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
mp3Play(1) 数据处理(2) 矩阵(1) Pool(1) pandas(7) GUI(2) agg(1) apply(1) Tkinter(4) 音频(1)
You might like
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
webpack打包node.js后端项目的方法
2018/03/10 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python3标准库总结
2019/02/19 Python
pycharm快捷键汇总
2020/02/14 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
深入了解NumPy 高级索引
2020/07/24 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
C语言开发工程师测试题
2016/12/20 面试题
广州盈通面试题
2015/12/05 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
考试不及格检讨书
2014/01/09 职场文书
考察现实表现材料
2014/05/19 职场文书
汽车转让协议书
2015/01/29 职场文书
学校计划生育责任书
2015/05/09 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技