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 相关文章推荐
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
如何将Node.js中的回调转换为Promise
Nov 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使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python僵尸进程产生的原因
2017/07/21 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
使用Python的turtle模块画国旗
2019/09/24 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
美发活动策划书
2014/01/14 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书