Bootstrap列表组学习使用
这篇文章主要为大家详细介绍了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基本组件学习笔记之列表组(11)，包括了Bootstrap基本组件学习笔记之列表组(11)的使用技巧和注意事项，需要的朋友参考一下 列表组件用于以列表形式呈现复杂的和自定义的内容。 创建一个列表组，只需要完成以下两步： （1）向元素 <ul> 添加 class .list-group； （2）向 <li> 添加 class .list-group-item。 看下面
-
本文向大家介绍深入学习Bootstrap表单，包括了深入学习Bootstrap表单的使用技巧和注意事项，需要的朋友参考一下 本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。 一、表单布局 1.垂直表单（默认） 向父 <form> 元素添加 role="
-
主要内容：实例,向列表组添加徽章,实例,向列表组添加链接,实例,向列表组添加自定义内容,实例,水平列表,实例本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下： 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点： 实例 <ul class="list-group"> <li class="list-group-item">免费域名注册</li>
-
本文向大家介绍完全深入学习Bootstrap表单，包括了完全深入学习Bootstrap表单的使用技巧和注意事项，需要的朋友参考一下 前言：由于表单的元素比较多，因此将Bootstrap的表单单独做个总结，表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本
-
本文向大家介绍Bootstrap基础学习，包括了Bootstrap基础学习的使用技巧和注意事项，需要的朋友参考一下 Bootstrap是一个基于栅格结构的前端结构框架（当然也有JS，JQuery）,它的优点是内容框架能够迅速搭建起来，基于媒介查询可以使搭建的页面迅速的适应不同的用户端，无论是手机，平板，还是PC,基本上都能自适应，当然新版本已经开始不支持IE6了，对IE8的支持也很有限，毕竟IE8
-
本文向大家介绍Bootstrap学习笔记之js组件（4），包括了Bootstrap学习笔记之js组件（4）的使用技巧和注意事项，需要的朋友参考一下 这次我们来看下js组件的使用，本篇文章会有点长，希望大家可以耐心看，相信收获会有不少。不少园友加我好友，表示喜欢我写文字的风格，简单明了，这里，再次谢谢你们的支持。一方面，自身技术有限，写的东西都比较基础，另一方面，写的东西，都是根据自己的理解，把复杂
-
本文向大家介绍Bootstrap学习笔记之css组件(3)，包括了Bootstrap学习笔记之css组件(3)的使用技巧和注意事项，需要的朋友参考一下 今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在之前的文章中阅读。 一、导航组件 自己做了个导航，目前只有一级菜单，下一篇文章中，将
-
本文向大家介绍Bootstrap Scrollspy源码学习，包括了Bootstrap Scrollspy源码学习的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Bootstrap Scrollspy插件的具体代码，供大家参考，具体内容如下 导航栏Scrollspy例子 垂直Scrollspy例子 Scrollspy的使用 使用Scrollspy只需在对应的HTML元素里添加几个关键