首页
所有分类
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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
js分解url参数（面向对象-极简主义法应用）
Aug 09 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JavaScript算法系列之快速排序（Quicksort）算法实例详解
Sep 04 Javascript
微信小程序（应用号）简单实例应用及实例详解
Sep 26 Javascript
js微信分享实现代码
Oct 11 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
小程序实现订单倒计时功能
Apr 23 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) SW(1) 电磁辐射(1) 发报机(1) 调幅(1) SWL(1) 短波(1) FM(4) LW(1)
You might like
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
用python删除java文件头上版权信息的方法
2014/07/31 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python中requests小技巧
2017/05/10 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
飞利浦西班牙官方网站：Philips西班牙
2020/02/17 全球购物
中秋晚会策划方案
2014/06/12 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2015年统战工作总结
2015/05/19 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
人事部：年度述职报告范文
2019/07/12 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
TS 类型收窄教程示例详解
2022/09/23 Javascript