Bootstrap 列表组

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

  • 向元素 <ul> 添加 class .list-group。
  • 向 <li> 添加 class .list-group-item。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：默认的列表组</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>

<div style="padding:20px">
<ul class="list-group">
<li class="list-group-item">Html5</li>
<li class="list-group-item">Css3</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">Javascript</li>
<li class="list-group-item">jQuery</li>
<li class="list-group-item">jQueryUI</li>
</ul>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：默认的列表组的更多相关文章

  1. Bootstrap历练实例：向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  2. Bootstrap历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  3. Bootstrap历练实例：带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  4. Bootstrap历练实例：基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：基本按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap历练实例：带徽章的列表组

    向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...

  7. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  8. Bootstrap历练实例：默认的面板(Panels)

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

  9. Bootstrap历练实例：默认的Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

随机推荐

  1. 程序员收藏必看系列：深度解析MySOL优化（一）

    说起MySQL的查询优化,相信大家收藏了一堆奇技淫巧:不能使用SELECT *.不使用NULL字段.合理创建索引.为字段选择合适的数据类型….. 你是否真的理解这些优化技巧?是否理解其背后的工作原理? ...

  2. 自动化测试 Cucumber

    Cucumber是一个能够理解用普通语言描述的测试用例的支持行为驱动开发(BDD)的自动化测试工具,用Ruby编写,支持Java和.Net等多种开发语言. Cucumber 三大组成: Feature ...

  3. jsp学习与提高（一）——JSP生命周期、三大指令及动作

    1.jsp定义: 1.1以java语言为脚本语言,运行在服务端的程序: 1.2处理客户请求,生成页面 1.3其本质是个sevlet会生成.java文件编译后再生成.class文件 2.jsp生命周期( ...

  4. 一份比较完整的gulpfile.js

    var gulp = require('gulp'); //工具 var autoprefixer = require('gulp-autoprefixer'); var include = requ ...

  5. BZOJ 1123 && Luogu P3469 [POI2008]BLO-Blockade 割点+乘法原理

    想了半天式子...最后在邓大师的帮助下想出此题....QWQ我还是太菜了 对于一个非割点,ans+=2*(n-1); 对于一个割点,ans+= #include<cstdio> #incl ...

  6. CodeForces - 894A-QAQ（思维）

    "QAQ" is a word to denote an expression of crying. Imagine "Q" as eyes with tear ...

  7. poj3264_Balanced Lineup

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 42349   Accepted: 19917 ...

  8. System.Span, System.Memory，还有System.IO.Pipelines

    System.Span, System.Memory,还有System.IO.Pipelines 使用高性能Pipelines构建.NET通讯程序 .NET Standard支持一组新的API,Sys ...

  9. linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: deprecated syntax

    今天在按照韦东山大哥的教程流程编译内核的时候出现了这个问题      linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: ...

  10. HDU 2899Strange fuction(模拟退火)

    题意 题目链接 求 $F(x) = 6 * x^7+8*x^6+7*x^3+5*x^2-y*x (0 <= x <=100)$的最小值 Sol 强上模拟退火,注意eps要开大! /* */ ...