首页
所有分类
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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
详解Vue单元测试case写法
May 24 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
辞职信(98) 表扬信(62) 介绍信(57) 欢迎词(65) 道歉信(39) 心得体会(660) 演讲稿(869) 检讨书(456) 邀请函(127) 证婚词(21)
You might like
解析php类的注册与自动加载
2013/07/05 PHP
PHP+Memcache实现wordpress访问总数统计（非插件）
2014/07/04 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
解析微信JS-SDK配置授权，实现分享接口
2016/12/09 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python2.7 安装pip的方法步骤（管用）
2019/05/05 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
使用python远程操作linux过程解析
2019/12/04 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python实现猜单词游戏
2020/05/22 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
波兰最大的儿童服装连锁店之一：5.10.15.
2018/02/11 全球购物
马来西亚最大的在线隐形眼镜商店：MrLens
2019/03/27 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
当文件系统受到破坏时，如何检查和修复系统？
2012/03/09 面试题
院药学专业个人求职信
2013/09/21 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
家访教师心得体会
2016/01/23 职场文书