首页
所有分类
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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
jquery实现拖动效果（代码分享）
Jan 25 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
js继承的这6种方式！（上）
Apr 23 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
js实现文字头像的生成代码
Mar 07 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
explain(2) 帝国时代(1) 守望先锋(1) 波段(1) 西索(1) 城市猎人(1) 文书(291) AngularJS(2) HAM-2000(1) Docker(14)
You might like
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
学习php设计模式 php实现门面模式（Facade）
2015/12/07 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP实现百度人脸识别
2019/05/06 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python定时任务 sched模块用法实例
2019/11/04 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
集体婚礼证婚词
2014/01/13 职场文书
房产委托公证书
2014/04/08 职场文书
环保建议书600字
2014/05/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2014年保洁工作总结
2014/11/24 职场文书
英文产品推荐信
2015/03/27 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年个人招商工作总结
2015/04/25 职场文书