<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 列表</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<h4>有序列表</h4>

<ol>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

</ol>

<h4>无序列表</h4>

<ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

</ul>

<h4>未定义样式列表</h4>

<ul class="list-unstyled">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

</ul>

<h4>内联列表</h4>

<ul class="list-inline">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

</ul>

<h4>定义列表</h4>

<dl>

    <dt>Description 1</dt>

    <dd>Item 1</dd>

    <dt>Description 2</dt>

    <dd>Item 2</dd>

</dl>

<h4>水平的定义列表</h4>

<dl class="dl-horizontal">

     <dt>Description 1</dt>

     <dd>Item 1</dd>

     <dt>Description 2</dt>

     <dd>Item 2</dd>

</dl>

</body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：列表的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：可滚动

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：将所有列表项放置同一行

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定引用右对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定单词首字母大写

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定大写文本

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本小写

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：段落中超出屏幕部分不换行

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

随机推荐

  1. python GIL锁与多cpu

    多核CPU   linux : cat /proc/cpuinfo 如果你不幸拥有一个多核CPU,你肯定在想,多核应该可以同时执行多个线程. 如果写一个死循环的话,会出现什么情况呢? 打开Mac OS ...

  2. opencv：像素统计信息

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...

  3. 【前端开发API】豆瓣开放API

    转载:https://www.cnblogs.com/HuangJie-sol/articles/10884622.html#_label6 阅读目录 前言 具体api 1.正在热映 2.即将上映 3 ...

  4. centos610无桌面安装libreoffice

    Centos610系列配置 #安装文件 yum -y install libreoffice #安装中文包 yum -y install libreoffice-langpack-zh-Han* #安 ...

  5. Centos610安装Nexus

    1.下载Nexus 地址:     https://pan.baidu.com/s/1D5AI6zmuRBSMK0k7j41VuQ 提取码: q50j 选择02-nexus 2.新建nexus账号 u ...

  6. Django中url name

    花了好长时间才明白这个name参数的含义.便写下来了备忘 当我们在url的时候,一般情况下都是使用很明确的url地址.如在网页里面使用<a href="/login"> ...

  7. 测试环境docker-swarm安装部署

    测试环境swarm安装部署 部署前增加监听docker2375端口 centos 增加tcp监听端口 修改/lib/systemd/system/docker.service sed -i ‘s/Ex ...

  8. springboot：配置多个数据源

    参考:还未整理 https://www.cnblogs.com/carrychan/p/9401471.html https://www.cnblogs.com/lijianda/p/11022892 ...

  9. java面试(一)

    一.java基础 1.JDK和JRE的区别? JDK是java的开发环境,JRE是java的运行环境,即编写java程序就一定需要JDK,只是运行java程序只要JRE就足够了. 2.java中==和 ...

  10. 数据库语言——SQL——基础部分——初篇

    概述 SQL全称为Structured Query Language,是关系型数据库的语言标准,它并不与特定的数据库商品类型有关,例如Mysql,Oracle,DB2等等都可以使用SQL语言,它与特定 ...