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 相关文章推荐
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JS如何在数组指定位置插入元素
Mar 10 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python单链表实现代码实例
2013/11/21 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
《小猫刮胡子》教学反思
2014/02/21 职场文书
商业房地产广告语
2014/03/13 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
工作收入证明模板
2014/10/10 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
行政处罚事先告知书
2015/07/01 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Python基础之数据结构详解
2021/04/28 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js