首页
所有分类
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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 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
再生机(1) 东方红(1) YB217(1) 森海(1) YB400(2) 1 Tube Radio(1) 直流胆(1) S2000(3) YB235(1) MX500(1)
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js活用事件触发对象动作
2008/08/10 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
node.js中 mysql 增删改查操作及async，await处理实例分析
2020/02/11 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python多线程编程（六）：可重入锁RLock
2015/04/05 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
在双python下设置python3为默认的方法
2018/10/31 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python实现加密的方式总结
2020/01/19 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
东方电视购物：东方CJ
2016/10/12 全球购物
美国珠宝店：Helzberg Diamonds
2018/10/24 全球购物
美国杰西潘尼官网：JCPenney
2019/06/12 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
房产公证书范本
2014/04/10 职场文书
党性分析材料格式
2014/12/19 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers