<!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. 测试工具 - IDEA - IDEA Code Coverage

    概述 使用 idea 自带的 code coverage 工具 背景 了解 白盒测试用例设计 和 测试覆盖率 之后, 大概就需要 实践 了 实践的话, 还是需要 工具 来检验效果 工具选取 选项 Ja ...

  2. Python的几种主动结束程序方式

    1. sys.exit() 执行该语句会直接退出程序,这也是经常使用的方法,也不需要考虑平台等因素的影响,一般是退出Python程序的首选方法. 该方法中包含一个参数status,默认为0,表示正常退 ...

  3. Wx-小程序-组件式开发之Vant

    开始:https://youzan.github.io/vant-weapp/#/intro 小程序开发者工具中 -->工具栏-->构建npm 一.初始化package.json npm ...

  4. Spring整合JDBC和Druid连接池

    我的博客名为黑客之谜,喜欢我的,或者喜欢未来的大神,点一波关注吧!顺便说一下,双十二快到了,祝大家双十二快乐,尽情的买买买~ 如果转载我的文章请标明出处和著名,谢谢配合. 我的博客地址为: https ...

  5. [转] C++ CImage实现的全屏PNG截图

    #include <atlimage.h> #include <atltime.h> #include <conio.h> //截取全屏保存为png CString ...

  6. C语言与汇编的嵌入式编程：统计字符串中各字符出现的次数

    原始C语言: #include<stdio.h> void main(){ ]; char pipei[] = "abcdefghijklmnopqrstuvwxyz" ...

  7. 关于anaconda-navigator打不开的问题

    19-10版本的anaconda-navigator打不开,没有图形化界面就是很糟糕 在命令行执行各种命令都没有问题,说明anaconda并没有出现大的问题,可能只是图形化界面出了问题. 执行 ana ...

  8. 再见2018，你好2019 -- 致 Mac 背后的自己

    转眼间 2018 年即将过去,心有万千感慨,真的感觉到时间如白驹过隙,成长没有跟上时间的脚步,这叫老了一岁,如果跟上了,那就叫成熟了一岁.很遗憾,2018年我老了一岁. 新年之初,立过好几个 Flag ...

  9. selenium+python+unittest实现自动化测试（入门篇）

    本文主要讲解关于selenium自动化测试框架的入门知识点,教大家如何搭建selenium自动化测试环境,如何用selenium+python+unittest实现web页面的自动化测试,先来看看se ...

  10. ubuntu中数据迁移的时候出现ImportError错误

    今天在Flask框架中使用数据库迁移的时候出现了如下错误: ImportError: libmysqlclient.so.20: cannot open shared object file: No ...