Bootstrap列表组学习使用


Posted in Javascript onFebruary 09, 2017

这篇文章主要为大家详细介绍了Bootstrap列表组的学习使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
  <div class="container">
    <div class="row">
      <ul class="list-group"><!--列表组-->
        <li class="list-group-item">html</li><!--列表项-->
        <li class="list-group-item">css</li>
        <li class="list-group-item">javascript</li>
      </ul>
    </div>
    <div class="row">
      <ul class="list-group"><!--给列表项添加标记,并且标记自动居右-->
        <li class="list-group-item active">html<span class="badge">12</span></li>
        <li class="list-group-item">css<span class="badge">21</span></li>
      </ul>
    </div>
    <div class="row">
      <div class="list-group"><!--a标签做的列表组,并加上背景色-->
        <a class="list-group-item active">html<span class="badge">12</span></a>
        <a class="list-group-item disabled">css<span class="badge">21</span></a>
        <a class="list-group-item list-group-item-info">javascript<span class="badge">6</span></a>
      </div>
    </div> 
    <!--list-group-item-heading:列表组标题;list-group-item-text:列表组内容-->
    <div class="row">
      <ul class="list-group">
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p class="list-group-item-text">东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p>东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p>东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
      </ul>
    </div> 
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap列表组学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
js图片预加载示例
Apr 30 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 #Javascript
Bootstrap进度条学习使用
Feb 09 #Javascript
详解浏览器渲染页面过程
Feb 09 #Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 #Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 #Javascript
Bootstrap面板学习使用
Feb 09 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python全局变量用法实例分析
2016/07/19 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python面向对象 反射原理解析
2019/08/12 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
企业元宵节主持词
2014/03/25 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书