一、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行)

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

<!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. easyui datebox 只选择年月

    //将日期输入框变为年月的函数方法    var month=0;      $('#effectiveDate').datebox({        onShowPanel: function () ...

  2. CI框架 QQ接口(第三方登录接口PHP版)

    本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代码就可以了.10分钟不要,接口就可完成.第一步 ...

  3. Selenium Grid 简易安装

    转载自:http://blog.csdn.net/xifeijian/article/details/17057659

  4. Oracle数据库的启动与停止

    oracle linux下开启与关闭 .启动ORACLE监听 首先要登录用户oracle:su - oracle oracle@localhost bin]$ lsnrctl --启动oracle监听 ...

  5. JAVA的名词释义

    JDK : Java Development Toolkit (java 开发工具包). JDK是整个JAVA的核心,包括了java运行环境(Java Runtime Envirnmet),一堆jav ...

  6. 命名空间std引用<iostream>时使用

    所谓namespace,是指标识符的各种可见范围. C++标准程序库中的所有标识符都被定义于一个名为std的namespace中,这样命名空间std内定义的所有标识符都有效. 为什么把cout等放在s ...

  7. VS为VC++添加UAC控制(VC程序默认管理员运行)

    1.VS编译链接VC++工程生成文件默认是没有管理员权限的 生成的程序图标是没有盾牌的如图: 如果程序需要在C盘做些写入操作 就必须具有管理员权限 所以需要在工程中进行设置. 注:自己项目的安装程序安 ...

  8. 用于 ‘Suse‘ Linux 包管理的 Zypper 命令大全

    SUSE( Software and System Entwicklung,即软件和系统开发.其中‘entwicklung‘是德语,意为开发)Linux 是由 Novell 公司在 Linux 内核基 ...

  9. UVALive 6508 Permutation Graphs

    Permutation Graphs Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...

  10. C++函数前和函数后加const修饰符区别

    class Test(){ public: Test(){} const int foo(int a); const int foo(int a) const; }; 一.概念 当const在函数名前 ...