<!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. JVM（三、双亲委派机制）

    javadoc的解释: ClassLoader的每一个实例都会有一个与之关联的父ClassLoader,当被要求去寻找一个类或者资源的时候,ClassLoader的实例就会对于类或者是资源的寻找委托给 ...

  3. python函数编程闯关总结

    文件处理相关 1,编码问题 (1)请问python2与python3中的默认编码是什么? python .x默认的字符编码是ASCII,默认的文件编码也是ASCII python .x默认的字符编码是 ...

  4. ASP.NET Core搭建多层网站架构【0-前言】

    2020/01/26, ASP.NET Core 3.1, VS2019 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构 目录 0-前言 1-项目结构分层建立 2-公共基 ...

  5. PowerDesigner 16.5安装、激活

    PowerDesigner安装 PowerDesigner激活 PowerDesigner运行

  6. openstack自动化搭建脚本

    Openstack平台部署+节点扩容 1)搭建脚本 #!/bin/bash #openstack私有云平台部署 #脚本使用前提:三台虚拟机openstack(ip地址:.11至少4G内存,100G硬盘 ...

  7. centOs安装出现No package git available的解决办法

    来源地址 [http://chinacheng.iteye.com/blog/1825538 ] centos安装git 下载源代码安装后,git clone出现“fatal unable to fi ...

  8. 如何利用wx.login方法获取openid和sessionKey

    1, wx.login(Object object) 调用接口获取登录凭证(code).通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) ...

  9. python-turtle-画雪花-2种方法及效果的详解

    1.方法一: 代码: #python3.8 #xuguojun #2020.1.30 #导出模块 import turtle as t import random as r #定义画雪 def dra ...

  10. input file multiple 配合springmvc实现多文件上传

    .前端页面的样子 <input id="file" name="file" type="file" multiple="mu ...