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

1、无序列表

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

  1. <ul>
  2.   <li>Lorem ipsum dolor sit amet</li>
  3.   <li>Consectetur adipiscing elit</li>
  4.   <li>Integer molestie lorem at massa</li>
  5.   <li>Facilisis in pretium nisl aliquet</li>
  6.   <li>Nulla volutpat aliquam velit
  7.     <ul>
  8.       <li>Phasellus iaculis neque</li>
  9.       <li>Purus sodales ultricies</li>
  10.       <li>Vestibulum laoreet porttitor sem</li>
  11.       <li>Ac tristique libero volutpat at</li>
  12.     </ul>
  13.   </li>
  14.   <li>Faucibus porta lacus fringilla vel</li>
  15.   <li>Aenean sit amet erat nunc</li>
  16.   <li>Eget porttitor lorem</li>
  17. </ul>

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

图3-14 Bootstrap无序列表样式

2、有序列表

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

  1. <ol>
  2.   <li>Lorem ipsum dolor sit amet</li>
  3.   <li>Consectetur adipiscing elit</li>
  4.   <li>Integer molestie lorem at massa</li>
  5.   <li>Facilisis in pretium nisl aliquet</li>
  6.   <li>Nulla volutpat aliquam velit</li>
  7.   <li>Faucibus porta lacus fringilla vel</li>
  8.   <li>Aenean sit amet erat nunc</li>
  9.   <li>Eget porttitor lorem</li>
  10. </ol>

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

图3-15 Bootstrap有序列表样式

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

1)无样式列表

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

  1. <ol class="unstyled">
  2.   <li>Lorem ipsum dolor sit amet</li>
  3.   <li>Consectetur adipiscing elit</li>
  4.   <li>Integer molestie lorem at massa</li>
  5.   <li>Facilisis in pretium nisl aliquet</li>
  6.   <li>Nulla volutpat aliquam velit
  7.   <ul>
  8.     <li>Phasellus iaculis neque</li>
  9.     <li>Purus sodales ultricies</li>
  10.     <li>Vestibulum laoreet porttitor sem</li>
  11.     <li>Ac tristique libero volutpat at</li>
  12.   </ul>
  13.   </li>
  14.   <li>Faucibus porta lacus fringilla vel</li>
  15.   <li>Aenean sit amet erat nunc</li>
  16.   <li>Eget porttitor lorem</li>
  17. </ol>

效果如图 3‑16所示:

图3-16 Boostrap无项目符号列表样式

2)行内列表

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

  1. <ul class="inline">
  2.   <li>Lorem ipsum</li>
  3.   <li>Phasellus iaculis</li>
  4.   <li>Nulla volutpat</li>
  5. </ul>

效果如图 3‑17所示:

图3-17 Bootstrap行内列表样式

3、描述列表

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

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

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

图3-18 Bootstrap描述列表样式

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

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

效果如图 3‑19所示:

图3-19 Bootstrap水平排列的描述列表

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

关于作者

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

Bootstrap 排版列表相关推荐

  1. Bootstrap 排版

    2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...

  2. Bootstrap 媒体列表

    媒体列表 顾名思义,媒体列表就是媒体的列表,媒体列表的每个列表项都是一个独立的媒体.由于媒体列表可以嵌套,因此很适合展示评论或其他需要以列表展示的信息. 定义媒体列表,只需一个 class=" ...

  3. Bootstrap排版之标题

    Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...

  4. bootstrap3 商品列表_使用bootstrap设计产品列表页

    原标题:使用bootstrap设计产品列表页 产品列表页的产品分类在用户搜索商品时有很有效的指向性,能将搜索范围缩小,最大程度的集中同一类的产品.如何很好的完成产品列表页的产品分类,这个学习的过程只需 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:移除默认的列表样式

    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设置浮动和偏移

    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...

  7. bootstrap排版实战

    bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...

  8. bootstrap 新闻列表_kuapingUI 2.2 版本发布,跨屏 UI-bootstrap 大组件 UI 框架

    kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间.朋友圈.QQ.微信.微博等分享:联系按钮组包含了 微信.QQ ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定文本对齐,段落中超出屏幕部分文字自动换行...

    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...

最新文章

  1. 密码学===公钥和私钥解释
  2. c语言ascw,Asc/AscB/AscW和Chr/ChrB/ChrW函数之间的区别
  3. Linux下 ln 命令详解
  4. 你的“苦劳”,真的不值钱!
  5. python之路_计算机编码及运算符介绍
  6. 设计模式のFactoryPattern(工厂模式)----创建模式
  7. java webservice用户验证_java webservice 用户验证 (服务端 + 客户端)
  8. 080 matplolib模块
  9. python安装plotly教程_python plotly 使用教程
  10. 在Microsoft Office 2007中检测和修复应用程序
  11. VsCode切换语言
  12. dell服务器新bois系统设置u盘启动,戴尔新版本的bios怎样设置U盘启动
  13. 从又苦又累的销售工作到python程序员,我哭了
  14. 【Unity——阴影实现基本原理】
  15. python证书有什么用_用Python在获奖证书写上获奖者的名字
  16. 好萌的泰国小萝莉,搞得我也想学uke了
  17. YDOOK AI : Pytorch :使用 tensor.zeros() tensor.zeros_like() 生成定义 全零数组 全0数组
  18. CodeM美团2018初赛A轮 题目一
  19. 指挥计算机工作的程序集,主互操作程序集(PIA)是否要求在计算机中安装Microsoft Office才能工作...
  20. 微信小程序点击复制文本至剪切板

热门文章

  1. struts json序列化遇上replaceAll就出问题
  2. Tokyo Tyrant基本规范(1)--介绍和安装
  3. 浏览器屏蔽flash视频广告
  4. 默认web地址_SpringMVC详解----Web层
  5. 温故而知新 js 的错误处理机制
  6. SQL Server大数据表的分区存储
  7. 云服务器是什么,有什么用?
  8. 改进了一下这个游戏的输出及思路,是不是好玩多了??:)
  9. 从WINDOWS日志判断哪块硬盘好坏!!
  10. JavaFX 概述 (译)