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. surface shader相关参数，命令

    https://docs.unity3d.com/Manual/SL-SurfaceShaders.html 说明: 注意下surfaceshader相关开关选项,input结构体全部可用参数 goo ...

  2. hiho week 136（二分＋优先队列）

    题目链接:http://hihocoder.com/contest/hiho136/problem/1 题意:中文题诶- 思路:直接对缓存区长度二分就好了,注意计算当前长度的"延迟惩罚值&q ...

  3. Docker安装nginx以及负载均衡

    首先在linux系统中新建一个data文件夹进行nginx容器的创建--即为:mkdir data. 一:第一次 1 第一步: 使用 docker pull nginx将nginx的镜像从仓库下载下来 ...

  4. iOS 隐藏百度地图SDK的百度LOGO

    第一个思路:找到LOGO对应的UIIMageView,并将其隐藏hidden // 隐藏百度地图Logo UIView *mView = _mapView.subviews.firstObject; ...

  5. 集合中的 for-Each循环

     数组的加强型的for-Each循环很简单,我们再来看一下集合中的for-Each 循环又是怎么样的.我们都知道集合中的遍历都是通过迭代(iterator)完成的.也许有人说,也可以按照下面的方式来遍 ...

  6. java中 json和bean list map之间的互相转换总结

    JSON 与 对象 .集合 之间的转换 JSON字符串和java对象的互转[json-lib]   在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级 ...

  7. Netty(4)Stream by codec(粘包与拆包)

    TCP/IP,传输的是byte[],将byte[]放入队列中.可能会发生粘包和拆包. 比如,客户端向服务端发送了2条消息,分别为D1,D2,可能产生的情况,如下图所示: 情况一:正常的. 情况二:粘包 ...

  8. HTML——传统布局的使用

    传统布局:使用table来做整体页面的布局 总结:这种方式来制作页面现在也不是很多了,感觉并不是很高效. 需要先用photoshop量出页面布局具体的尺寸位置,再将其划分为表格,对每个格子进行编辑. ...

  9. 1.7hashmap并发成环

    https://mp.weixin.qq.com/s?__biz=MzIxMjE5MTE1Nw==&mid=2653192000&idx=1&sn=118cee6d1c67e7 ...

  10. CentOS 6.4 中yum命令安装php5.2.17

    最近给公司部署服务器的时候发现他们提供的服务器是centos6.4系统的,装好系统和相关服务httpd,mysql,php,一跑代码,发现php5.3中的zend加密不能用,安装Zend Guard ...