Bootstrap3 列表元素的样式

列表

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-overﬂow 属性截短。此外，在视口较窄的时候，词条和解释将自动变成默认的垂直堆叠布局。

关于作者

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

Bootstrap3 列表元素的样式相关推荐

CSS修改默认列表元素样式(1.修改默认元素样式 2.伪元素选择器)
CSS修改默认列表元素样式 1. 修改默认元素样式 <!DOCTYPE html> <html lang="en"><head><meta ...
[html] 如果列表元素li的兄弟元素为div，会产生什么情况？
[html] 如果列表元素li的兄弟元素为div,会产生什么情况? 单纯的对html来说主要是破坏了语义结构吧, css方面来说不好统一控制样式,div默认也没有list-style 个人简介我是歌 ...
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
Tcl列表元素查找命令lsearch
lsearch ?options? list pattern 查看列表是否包含匹配指定pattern的元素.如果包含,则返回第一个匹配的元素的索引,如果没有则返回-1.选项options用于指定列表中 ...
《 Python List 列表全实例详解系列（八）》__随机列表元素
< Python List 列表全实例详解系列(八)> __随机列表元素本章目录: 十.随机列表元素方法1:random.shuffle 方法2:random.sample 十.随机列 ...
10、HTML基础——列表元素
列表元素文章目录列表元素 1. 有序列表 2. 无序列表(非常常见) 3. 定义列表 1. 有序列表 ol:ordered list li:list item,列表子元素例如: <p> ...
html元素全屏右键显示覆盖,HTML表单元素覆盖样式元素问题及其补救之道
HTML表单元素覆盖样式元素问题及其补救之道更新时间:2006年07月27日 00:00:00 作者: 在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子 ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
html中有序列表的css样式,CSS 列表样式
CSS为列表提供了专门的属性.使用list-style 属性来指定列表项标记的样式. CSS中的选择器可以选中列表项 (比如, ).也可以选中列表项的父节点 (比如, ).此时列表项会继承父节点的样式 ...

Bootstrap3 列表元素的样式

列表

Bootstrap3 列表元素的样式相关推荐

最新文章

热门文章