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 firefox兼容ie的dom方法脚本
May 18 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS hashMap实例详解
May 26 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
JavaScript如何操作css
Oct 24 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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解决的一个栈的面试题
2014/07/02 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
微信支付的开发流程详解
2016/09/13 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
jQuery解决input超多的表单提交
2015/08/10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
python zip文件 压缩
2008/12/24 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python保存网页图片到本地的方法
2018/07/24 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python3 反射的四种基本方法解析
2019/08/26 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python关于变量名的基础知识点
2020/03/03 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
放弃继承权公证书
2015/01/23 职场文书
支教个人总结
2015/03/04 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers