首页
所有分类
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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
javascript 基础篇3 类，回调函数，内置对象，事件处理
Mar 14 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
主持词(345) 委托书(259) 担保书(46) 承诺书(369) 聘任书(31) 检举信(8) 公证书(45) 广告词(105) 竞聘书(31) 意向书(73)
You might like
PHP网页游戏学习之Xnova(ogame)源码解读（四）
2014/06/23 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JavaScript中的私有成员
2006/09/18 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
2016/09/19 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python交互式图形编程实例（一）
2017/11/17 Python
python使用Tesseract库识别验证
2018/03/21 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python通过实例讲解反射机制
2019/10/17 Python
python程序文件扩展名知识点详解
2020/02/27 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
介绍一些UNIX常用简单命令
2014/11/11 面试题
法律服务所工作总结
2015/08/10 职场文书
2016春季运动会前导词
2015/11/25 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript