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. 洛谷P2583 地铁间谍

    P2583 地铁间谍 题目描述 特工玛利亚被送到S市执行一个特别危险的任务.她需要利用地铁完成他的任务,S市的地铁只有一条线路运行,所以并不复杂. 玛利亚有一个任务,现在的时间为0,她要从第一个站出发 ...

  2. 剑指Offer的学习笔记（C#篇）-- 反转链表

    题目描述 输入一个链表,反转链表后,输出新链表的表头. 一 . 概念普及 关于线性表等相关概念请点击这里. 二 . 实现方法 目前,可以有两种方法实现该要求. 方法一:借助外部空间实现.这里可以将单链 ...

  3. nginx反向代理解决跨域问题，使本地调试更方便

    我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...

  4. cmd 中粘贴复制（转）

    1 如右图,右键命令提示符窗口的标题栏,选择属性. 2 选择“编辑选项”里的“快速编辑模式”,并确定之: 3 在弹出的应用选择提示框上选择“保存属性,供以后具有相同标题的窗口使用”: 4 如此你就可以 ...

  5. react native 使用iconfont

    安卓的配置: 1.在android/app/src/assets/fonts文件夹下复制从iconfont下载的   (下载后的icon名称可以在下载来的文件中的html文件中) 2.在android ...

  6. LOJ 2288「THUWC 2017」大葱的神力

    LOJ 2288「THUWC 2017」大葱的神力 Link Solution 比较水的提交答案题了吧 第一个点爆搜 第二个点爆搜+剪枝,我的剪枝就是先算出 \(mx[i]\) 表示选取第 \(i \ ...

  7. Codeforces Round #566 (Div. 2) A. Filling Shapes

    链接: https://codeforces.com/contest/1182/problem/A 题意: You have a given integer n. Find the number of ...

  8. vs2012 support BI

    Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2012 http://www.microsoft. ...

  9. mysql主给备赋予权限时报错，MySQL [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause

    https://www.cnblogs.com/skymyyang/p/7551646.html 在my.cnf 里面设置sql_mode='STRICT_TRANS_TABLES,NO_ZERO_I ...

  10. 《从0到1学习Flink》—— 如何自定义 Data Source ？

    前言 在 <从0到1学习Flink>-- Data Source 介绍 文章中,我给大家介绍了 Flink Data Source 以及简短的介绍了一下自定义 Data Source,这篇 ...