Bootstrap3实用教程
2.3.8 列表
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

地址

缩写词

文本大小写

水平对齐

行内文本

正文文本

标题

列表

Bootstrap 支持HTML 提供的三种类型的列表:无序列表、有序列表和描述列表。列表可以嵌套定义,即可以在一个列表中嵌套其它列表。嵌套没有类型和层级的限制。

1、无序列表

无序列表的各个表项之间,没有逻辑上的先后顺序。如:

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

默认情况下,无序列表的项目符号为实心圆。如果列表发生嵌套,浏览器会根据上下文,自动为内层列表添加缩进,并改变列表的项目符号。效果如图 2‑29所示:

无序列表
图2-29 无序列表

2、有序列表

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

有序列表的各个表项之间,有逻辑上的先后顺序。如:

<ol>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Consectetur adipiscing elit</li>
 <li>Integer molestie lorem at massa</li>
 <li>Facilisis in pretium nisl aliquet</li>
 <li>Nulla volutpat aliquam velit</li>
 <li>Faucibus porta lacus fringilla vel</li>
 <li>Aenean sit amet erat nunc</li>
 <li>Eget porttitor lorem</li>
</ol>

默认情况下,有序列表的项目符号为数字。效果如图 2‑30所示:

有序列表
图2-30 有序列表

默认情况下,无序列表和有序列表带有列表项目符号,并根据上下文自动缩进显示。Bootstrap还定义了两个工具类,可以使用它们来定义无样式列表和行内列表。

1)无样式列表

如果为相应的 <ul> 或 <ol> 应用 .list-unstyled 类,就可以去掉列表的默认项目符号以及左内边距。如:

<ol class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
  <ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
    <li>Vestibulum laoreet porttitor sem</li>
    <li>Ac tristique libero volutpat at</li>
  </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

效果如图 2‑31所示:

无项目符号的列表
图2-31 无项目符号的列表

2)行内列表

如果为相应的 <ul> 或 <ol> 应用 .list-inline 类,就可以让列表项在一行内水平排列,同时每个列表项都有少量的内边距。如:

<ul class= "list-inline" >
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

效果如图 2‑32所示:

行内列表
图2-32 行内列表

3、描述列表

描述列表与无序列表和有序列表的区别在于,它没有块级的 <li> 元素,而是每个列表项都由 <dt> 和 <dd> 元素共同组成。dt 代表 definition title(定义标题),dd 代表 definition description(定义描述)。如:

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

默认情况下,无序列表的项目符号为实心圆。如果列表发生嵌套,浏览器会根据上下文,自动为内层列表添加缩进,并改变列表的项目符号。效果如图 2‑33所示:

描述列表
图2-33 描述列表

如果希望词条和解释一对一并排显示,只需给 <dl> 标签加上class="dl-horizontal" 即可。并排显示适用于术语的定义/解释。如:

<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper … nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris ….</dd>
</dl>

效果如图 2‑34所示:

水平排列的描述列表
图2-34 水平排列的描述列表

在水平布局时,如果词条过长而左边放不下,将被 text-overflow 属性截短。此外,在视口较窄的时候,词条和解释将自动变成默认的垂直堆叠布局。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验