📜  Bootstrap-列表组(1)

📅  最后修改于: 2023-12-03 15:29:39.260000             🧑  作者: Mango

Bootstrap 列表组

Bootstrap 的列表组组件使得在网站或应用程序中展示有序或无序项变得非常简单。列表可以包括文本、链接、图像等内容。Bootstrap 3 加入了对无序、有序和定义列表的全新类,同时还加入了一个新的用于创建无序列表的 List Group 组件。

无序列表

无序列表是指没有特定的顺序和等级,只是用于展示元素的列表。使用 ulli 标签配合相应的类可以创建无序列表。

- Item 1
- Item 2
- Item 3
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
有序列表

有序列表是指有特定的顺序和等级的元素列表。使用 olli 标签配合相应的类可以创建有序列表。

1. Item 1
2. Item 2
3. Item 3
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
定义列表

定义列表(description list)是包含分类和描述的列表。和无序列表和有序列表不同,定义列表使用 dldtdd 标签,其中 dt 表示分类,dd 表示描述。

Term 1
: Description 1

Term 2
: Description 2
<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>
  <dt>Term 2</dt>
  <dd>Description 2</dd>
</dl>
列表组

Bootstrap 的列表组组件可以用来在页面中展示一组相关的内容。使用 ulli 标签配合相应的类可以创建垂直方向的列表,通过添加 .list-inline 类可以创建水平方向的列表。

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

以上就是 Bootstrap 列表组的基本用法和示例。在实际应用中,读者可以根据需要进一步扩展这些组件。