首页
所有分类
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判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
原生js实现验证码功能
Mar 16 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
浅析Vue 生命周期
Jun 21 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 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
GTX1660(1) R71E(1) ICOM(2) DE1102(1) R72E(1) 对讲机(1) i7 6700(1) React(6) WR-800F(1) 胆机(1)
You might like
PHP传参之传值与传址的区别
2015/04/24 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
浅谈express.js框架中间件（middleware）
2019/04/07 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python内建数据结构详解
2016/02/03 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
德国百年厨具品牌WMF美国站：WMF美国
2016/09/12 全球购物
Office DEPOT法国官网：欧迪办公用品采购
2018/01/03 全球购物
生产部经理岗位职责
2013/12/16 职场文书
公司面试感谢信
2014/02/01 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android