首页
所有分类
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实现一个页面多个css样式实现
May 29 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
canvas实现贪食蛇的实践
Feb 15 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
localStorage(1) DeOldify(1) 加载异常(1) 注解(1) 骨架屏(1) BottomSheetDialog(1) scrapy(1) Postman(1) virtualenv(1) 横向滚动(1)
You might like
类的另类用法--数据的封装
2006/10/09 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP 以POST方式提交XML、获取XML，解析XML详解及实例
2016/10/26 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
深入探密Javascript数组方法
2015/01/08 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
关于JavaScript 数组你应该知道的事情（推荐）
2019/04/10 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python matplotlib库的基本使用
2020/09/23 Python
New Balance波兰官方商城：始于1906年，百年慢跑品牌
2017/08/15 全球购物
年终总结会主持词
2014/03/25 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
停发工资证明范本
2015/06/12 职场文书
婚庆主持词大全
2015/06/30 职场文书
你为什么是穷人？可能是这5个缺点造成
2019/07/11 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
解决mysql的int型主键自增问题
2021/07/15 MySQL
警用民用对讲机找不同
2022/02/18 无线电
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS