首页
所有分类
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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
基于jquery的划词搜索实现（备忘）
Sep 14 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
浅谈AngularJS中使用$resource（已更新）
Sep 14 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
SeaTable(1) HBuilder(1) Three.js(1) celery(1) Mysql8(2) OOP(1) Outlook(1) tree shaking(1) MutationObserver(1) 条形码(1)
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
请离开include_once和require_once
2013/07/18 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php发送post请求函数分享
2014/03/06 PHP
php生成rss类用法实例
2015/04/14 PHP
php生成二维码
2015/08/10 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
JavaScript 学习笔记（七）字符串的连接
2009/12/31 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Django 实现下载文件功能的示例
2018/03/06 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
绢花、人造花和人造花卉：BLOOM
2019/08/07 全球购物
初中校园之声广播稿
2014/01/15 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
box-shadow单边阴影的实现
2023/05/21 HTML / CSS