Bootstrap3 排版-列表

来源:互联网 发布:房产端口是什么意思 编辑:程序博客网 时间:2024/04/30 16:33

无序列表

排列顺序无关紧要的一列元素。

<ul>  <li>...</li></ul>

有序列表

顺序至关重要的一组元素。

<ol>  <li>...</li></ol>

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">  <li>...</li></ul>

内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

<ul class="list-inline">  <li>...</li></ul>

描述

带有描述的短语列表。

<dl>  <dt>...</dt>  <dd>...</dd></dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">  <dt>...</dt>  <dd>...</dd></dl>

自动截断

通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。


—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx


1 0
原创粉丝点击