Bootstrap 排版

2020-06-18 05:59:22易采站长站整理
:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表:在这种类型的列表中,每个列表项可以包含

元素。

代表 定义术语,就像字典。接着,

的描述。
.dl-horizontal
可以让

内的短语及其描述排在一行。开始是像

的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

下面的实例演示了这些类型的列表:

实例

 

有序列表

Item 1Item 2Item 3Item 4

无序列表

Item 1Item 2Item 3Item 4

未定义样式列表

Item 1Item 2Item 3Item 4

内联列表

Item 1Item 2Item 3Item 4

定义列表

Description 1Item 1Description 2Item 2

水平的定义列表

Description 1Item 1Description 2Item 2


结果如下所示:

列表


更多排版类

下表提供了 Bootstrap 更多排版类的实例:

相关文章 大家在看
描述实例
.lead使段落突出显示
.small设定小文本 (设置为父文本的 85% 大小)
.text-left设定文本左对齐
.text-center设定文本居中对齐
.text-right设定文本右对齐
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap段落中超出屏幕部分不换行
.text-lowercase设定文本小写
.text-uppercase设定文本大写
.text-capitalize设定单词首字母大写
.initialism显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse设定引用右对齐
.list-unstyled移除默认的列表样式,列表项中左对齐 (

中)。 这个类仅适用于直接子列表项
(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline将所有列表项放置同一行
.dl-horizontal该类设置了浮动和偏移,应用于

元素和

元素中,具体实现可以查看实例