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 最近浏览过的商品的功能实现代码
May 14 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
如何在JS文件中获取Vue组件
Sep 16 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
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
把pandas转换int型为str型的方法
2019/01/29 Python
python实现代码统计器
2019/09/19 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
会计职业生涯规划书
2014/01/13 职场文书
社区母亲节活动方案
2014/03/05 职场文书
赔偿协议书范本
2014/04/15 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
上班迟到检讨书
2015/05/06 职场文书
新生开学寄语大全
2015/05/28 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL