<!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 turtle库详解

    Python turtle库详解 Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在 ...

  2. 加壳&脱壳 - 前言(4.17更新)

    0x00 闲谈 最近打算学习学习加壳脱壳相关的知识,大致会有以下几个部分 1.upx壳的加壳原理及脱壳方法 --UPX压缩壳的工作原理 --脱upx壳--初试--单步追踪 -- 0x01 参考链接 1 ...

  3. async 异步协程进阶

    协程通过 async/await 语法进行声明,是编写异步应用的推荐方式 例如新定义一个协程(coroutine object): async def foo(): return 42 首先先来介绍下 ...

  4. 图片的onerror 事件解析

    1. 该事件触发条件 文档和图像在加载失败的时候(用户体验会下降.)会触发该事件 2. 解决碎图的办法 利用img的onerror事件和javascript 例: 现有的图片是 successed.p ...

  5. BZOJ - 2038 小Z的袜子(普通莫队)

    题目链接:小Z的袜子 题意:$n$只袜子,$m$个询问,每次回答有多大概率在$[L,R]$区间内抽到两只颜色相同的袜子 思路:普通莫队,如果两个询问左端点在一个块内,则按询问右端点排序,否则按照所在块 ...

  6. HashMap遍历，取出key和value

    HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,在用keySet(key)取value时候,需要key 第一种: Map map = new HashMap( ...

  7. php源码加密--screw plus

    screw plus是一个开源的php扩展,作用是对php文件进行加密,网络上提供php加密的服务很多,但大多都只是混淆级别的加密,被人拿到加密文件问只要有足够耐心就能破解,与之不同的是,screw ...

  8. Go_排序

    package main import ( "fmt" "sort" "math/rand" ) //1.声明Hero结构体 type He ...

  9. idea中使用Autowired注入时报红,但是运行不报错

    在Preferences中如下设置,即可解除报红错误: 将Autowiring for Bean Class的Severity级别设置为Warning

  10. （Java多线程系列九）线程池

    线程池 1.什么是线程池 线程池是指在初始化一个多线程应用程序过程中创建一个线程集合,然后在需要执行新的任务时重用这些线程而不是新建一个线程.线程池中线程的数量通常取决于可用内存数量和应用程序的需求. ...