首页
所有分类
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 相关文章推荐
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JavaScript实现随机数生成器（去重）
Oct 13 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
format(1) 计算器(5) 五子棋(12) 井字棋(1) 人工智能(2) PyTorch(1) 图像处理(1) 模型保存加载(1) Pyecharts(7) 对齐打印(1)
You might like
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php生成随机数的三种方法
2014/09/10 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
基于p5.js 2D图像接口的扩展（交互实现）
2020/11/30 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
高山背包：High Sierra
2017/11/23 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
满月酒答谢词
2014/01/14 职场文书
学校教师读书活动总结
2014/07/08 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
大学生毕业个人总结
2015/02/15 职场文书
杨善洲观后感
2015/06/04 职场文书
分家协议书范本
2016/03/22 职场文书
话题作文之诚信
2019/11/28 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android