首页
所有分类
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 相关文章推荐
js切换div css注意的细节
Dec 10 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
微信小程序实现弹幕墙（祝福墙）
Nov 18 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
内存池(1) 腾讯云(1) queue(1) RecyclerView(1) 云服务器(1) TaiShan(1) JDK(1) Foreign Key(1) 外键约束(1) 九宫格(5)
You might like
php判断ip黑名单程序代码实例
2014/02/24 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[00:33]2016完美“圣”典风云人物：BurNIng宣传片
2016/12/10 DOTA
python解析xml文件操作实例
2014/10/05 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python Queue模块详解
2014/11/30 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
英国折扣高尔夫商店：Discount Golf Store
2019/11/19 全球购物
中英文自我评价语句
2013/12/20 职场文书
大学生学习自我评价
2014/01/13 职场文书
职业生涯规划书范文
2014/03/10 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
项目经理任命书
2014/06/04 职场文书
2014国庆节标语口号
2014/09/19 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android