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. uoj#279. 【UTR #2】题目交流通道（容斥+数数）

    传送门 先考虑无解的情况,为以下几种:\(dis_{i,j}+dis_{j,k}<dis_{i,k}\),\(dis_{i,i}\neq 0\),\(dis_{i,j}\neq dis_{j,i ...

  2. Windows右下角图标显示不正常

    我的win7系统,右下角图标透明,分不清哪个是哪个.点击也没有任何反应. 解决办法: 点击运行输入cmd,在命令提示符下输入下列命令即可恢复. taskkill /im explorer.exe /f ...

  3. 一个模块对应一个Servlet对应一张表 BaseServlet抽取反射进行方法转发实现

  4. 线程组之间的JMeter传递变量

    在这个JMeter教程中,我们将了解如何在线程组之间共享和传递变量. 在开发高级JMeter脚本时,很可能您将拥有多个线程组.每个线程组将执行不同的请求. 一个很好的例子就是我们需要使用Bearer ...

  5. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  6. 从wireshake分析http和https的通信过程

    参考文章: Wireshark基本介绍和学习TCP三次握手 [技术流]Wireshark对HTTPS数据的解密 Wireshark/HTTPS Journey to HTTP/2 以TCP/IP协议为 ...

  7. beanshell解析json（从简单到复杂）

    使用beanshell 解析单层Json: Json 数据如下: { "status":200, "code": 0, "message": ...

  8. Linux下无法挂载Ｕ盘

    大概的错误信息是这样的: Error mounting /dev/sdb4 at /media/xxx/xx: Command-line`mount -t "ntfs" -o&qu ...

  9. 如何使用Spring Security手动验证用户

    1.概述 在这篇快速文章中,我们将重点介绍如何以编程方式在Spring Security和Spring MVC中设置经过身份验证的用户. 2. Spring Security 简而言之,Spring ...

  10. 小G的城堡

    B 小 G 的城堡文件名 输入文件 输出文件 时间限制 空间限制castle.pas/c/cpp castle.in castle.out 1s 128MB题目描述小 G 家有一座城堡.城堡里面有 n ...