一、HTML的列表

　　在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：

　　　　1、无序列表

<ul>

    <li>…</li>

</ul>

　　　　　　2、有序列表

<ol>

    <li>…</li>

</ol>

　　　　　　3、定义列表

<dl>

    <dt>…</dt>

    <dd>…</dd>

</dl>

二、Bootstrap列表

　　Bootstrap根据平时的使用情形提供了六种形式的列表：

　　　　 ☑  普通列表

　　　　☑  有序列表

　　　　 ☑  去点列表

　　　　 ☑  内联列表

　　　　☑  描述列表

　　　　 ☑  水平描述列表

三、无序列表、有序列表

　　无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签）

　　在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行

　　从源码上我们可以得知，Bootstrap对于列表，只是在margin上做了一些调整。

　　在Bootstrap中列表也是可以嵌套的

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>普通列表、有序列表</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<h5>普通列表</h5>

<ul>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

</ul>

<h5>有序列表</h5>

<ol>

      <li>项目列表一</li>

      <li>项目列表二</li>

      <li>项目列表三</li>

</ol>

<h5>有序列表嵌套</h5>

<ol>

    <li>有序列表</li>

    <li>

    有序列表

        <ol>

            <li>有序列表(2)</li>

            <li>有序列表(2)</li>

        </ol>

    </li>

    <li>有序列表</li>

</ol>

</body>

</html>

四、去点列表

　　在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。

　　Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。（源码请查看bootstrap.css文件第580行~第583行）

　　除了项目编号之外，还将列表默认的左边内距也清０了。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>去点列表</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<!--无序列表去点-->

<ul>

    <li>

    项目列表

        <ul>

        <li>带有项目符号</li>

        <li>带有项目符号</li>

        </ul>

    </li>

    <li>

    项目列表

        <ul class="list-unstyled">

        <li>不带项目符号</li>

        <li>不带项目符号</li>

        </ul>

    </li>

    <li>项目列表</li>

</ul>

<!--有序列表去序号-->

<ol>

    <li>

    项目列表

        <ol>

        <li>带有项目编号</li>

        <li>带有项目编号</li>

        </ol>

    </li>

    <li>

    项目列表

        <ol class="list-unstyled">

        <li>不带项目编号</li>

        <li>不带项目编号</li>

        </ol>

    </li>

    <li>项目列表</li>

</ol>

</body>

</html>

五、内联列表

　　Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

　　也可以说内联列表就是为制作水平导航而生。（源码查看bootstrap.css文件第584行~第593行）

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>内联列表</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<ul class="list-inline">

    <li>W3cplus</li>

    <li>Blog</li>

    <li>CSS3</li>

    <li>jQuery</li>

    <li>PHP</li>

</ul>

</body>

</html>

六、定义列表

　　对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。（源码请查看bootstrap.css文件第594行~第607行）

　　对于定义列表使用，其实很简单，与我们以前的使用定义列表的方法是相同的

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>定义列表</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<dl>

    <dt>W3cplus</dt>

    <dd>一个致力于推广国内前端行业的技术博客</dd>

    <dt>慕课网</dt>

    <dd>一个真心在做教育的网站</dd>

</dl>

</body>

</html>

Bootstrap列表的更多相关文章

  1. Bootstrap列表组

    前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...

  2. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

  3. 第二百四十二节，Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  4. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  5. 详解Bootstrap列表组组件

    列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...

  6. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  7. bootstrap 列表組

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. bootstrap 列表--水平定义列表

    水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果. @media (min-width: 768px) { ...

  9. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Codeforces Round #337 Alphabet Permutations

    E. Alphabet Permutations time limit per test:  1 second memory limit per test:  512 megabytes input: ...

  2. R2D2 and Droid Army(多棵线段树)

    R2D2 and Droid Army time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. Axure一点2

    4:找茬:先安装图片,在不同的地方安上动态面板(命名为左一),在动态面板上双击,添加动态,进去动态后添加矩形改色,设置透明度为0,回到主页面.并设为隐藏,复制到另一面(命名为右一).在右一上添加图像热 ...

  4. Android任务和返回栈完全解析

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/41087993 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工 ...

  5. Linux 性能监测：介绍

    看了某某教程.读了某某手册,按照要求改改某某设置.系统设定.内核参数就认为做到系统优化的想法很傻很天真:)系统优化是一项复杂.繁琐.长期的 工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采 ...

  6. oracle数据库导入导出dmp文件oracle命令

    在控制台下导入imp scott/密码@orcl file=文件路径 full=Y 导出 整个数据库TEST 用户名system  密码1234 exp system/1234@TEST file=文 ...

  7. block 实现原理详解（一）

    对于大多数人来讲,block内部到底是怎样实现的呢?我们可以借助clang将其编译成为c++的代码,就可以看出,block到底是什么东西, 先来看这样一个问题, <!-- lang: cpp - ...

  8. CALayer总结（三）

    CPU VS GPU 动画和屏幕上组合的图层实际上被一个单独的进程管理,而不是你的应用程序.这个进程就是所谓的渲染服务.在iOS5和之前的版本是SpringBoard进程(同时管理着iOS的主屏).在 ...

  9. JMS【三】--ActiveMQ简单的HelloWorld实例

    第一篇博文JMS[一]--JMS基本概念,我们介绍了JMS的两种消息模型:点对点和发布订阅模型,以及消息被消费的两个方式:同步和异步,JMS编程模型的对象,最后说了JMS的优点. 第二篇博文JMS[二 ...

  10. input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...