<!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 collections】

    目录 namedtuple deque Counter OrderedDict defaultdict "在内置数据类型(dict.list.set.tuple)的基础上,collectio ...

  2. 利用ZotFile对Zotero中的文献进行整理

    1.安装ZotFile插件 *** 以后补充 *** 2.配置ZotFile 配置 3.整理操作 (1)将文件拖进Zotero软件相应的目录(自己创建) (2)查看文件位置 (未整理之前) (3)整理 ...

  3. ENS中文文档系列之三 [ ENS常见问题 ]

    原文地址:https://ensuser.com/docs/frequently-asked-questions.html更多最新信息,请前往 ENS 中文服务站点:ENSUser 关于 ENS 注册 ...

  4. zabbix监控服务部署脚本

    搭建平台脚本: #!/bin/bash #zabbix监控服务部署 #脚本使用前提:yum搭建,nginx-1.12.2源码包,zabbix-3.4.4源码包,要求源码包尽量在单一目录下,最好在默认管 ...

  5. 种树-洛谷P1250（差分约束）

    传送门 令前缀和为s[i],则⼀一个要求等价于 s[r] - s[l - 1] >= x. 题中还有别的要求,包括 s[i] - s[i - 1] <= 1 和 s[i] - s[i- 1 ...

  6. Java 通过身份证获取生日和性别

    /** * 通过身份证号获取生日和性别 * @param identifyNumber * @return */ private String[] getBirthAndSexByIdNo(Strin ...

  7. AcWing - 156 矩阵(二维哈希)

    题目链接:矩阵 题意:给定一个$m$行$n$列的$01$矩阵$($只包含数字$0$或$1$的矩阵$)$,再执行$q$次询问,每次询问给出一个$a$行$b$列的$01$矩阵,求该矩阵是否在原矩阵中出现过 ...

  8. vue中，实现锚点定位及跳转（url不发生变化）

    <div class="footer" @click="returnTop"> methods:{ returnTop:function(){ do ...

  9. 微信公众平台接口获取时间戳为10位，java开发需转为13位

    问题1:为什么会生成13位的时间戳,13位的时间戳和10时间戳分别是怎么来的 ? java的date默认精度是毫秒,也就是说生成的时间戳就是13位的,而像c++或者php生成的时间戳默认就是10位的, ...

  10. 【代码学习】PYTHON 函数

    一.定义函数 def 函数名(): 代码 二.函数调用 #定义函数 def printme(str): print str return #调用函数 printme("SQYY1" ...