【Bootstrap V4系列】学习入门教程之 组件-巨幕（Jumbotron）和列表组（List group）

一、巨幕（Jumbotron）

轻量级、灵活的组件，用于展示英雄单位风格的内容。

一个轻量级、灵活的组件，可以选择扩展整个视口，以在您的网站上展示关键的营销信息。

1.1 带有圆角

<!-- 一个轻量级、灵活的组件，可以选择扩展整个视口，以在您的网站上展示关键的营销信息。-->
<div class="jumbotron"><h1 class="display-4">Hello, world!</h1><p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><hr class="my-4"><p>It uses utility classes for typography and spacing to space content out within the larger container.</p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

页面展示效果：

1.2 全宽且无圆角

要使jumbotron为全宽，且没有圆角，请添加.jumboron-fluid 流体修改器类，并在其中添加.container或.container-fluid 流体。

<div class="jumbotron jumbotron-fluid"><div class="container"><h1 class="display-4">Fluid jumbotron</h1><p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p></div>
</div>

页面展示效果：

二、列表组（List group）

列表组是一个灵活而强大的组件，用于显示一系列内容。修改和扩展它们以支持其中的几乎任何内容。

2.1 Basic example

最基本的列表组是一个包含列表项和适当类的无序列表。使用以下选项或根据需要使用自己的CSS进行构建。

<ul class="list-group"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li><li class="list-group-item">A fourth item</li><li class="list-group-item">And a fifth one</li>
</ul>

页面展示效果：

2.2 Active items 活动项目

将.active添加到.list-group-item 组项中，以指示当前活动的选择。

<ul class="list-group"><li class="list-group-item active" aria-current="true">An active item</li>...
</ul>

页面展示效果：

2.3 Disabled items

将.disabled添加到.list-group-item 组项中，使其显示为禁用。请注意，一些带有.disable的元素还需要自定义JavaScript来完全禁用其点击事件（例如链接）。

<ul class="list-group"><li class="list-group-item disabled" aria-disabled="true">A disabled item</li>...
</ul>

页面展示效果：

2.4 Links and buttons

通过添加.list group项目操作，使用<a>s或<button>s创建具有悬停、禁用和活动状态的.list-group-item-action 可操作列表组项目。我们将这些伪类分开，以确保由非交互式元素（如<li>s或<div>s）组成的列表组不会提供点击或轻击的启示。

请确保不要在此处使用标准的.btn类。

<div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a><a href="#" class="list-group-item list-group-item-action">A second link item</a><a href="#" class="list-group-item list-group-item-action">A third link item</a><a href="#" class="list-group-item list-group-item-action">A fourth link item</a><a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

页面展示效果：

使用<button>s，您还可以使用disabled属性而不是.disable类。遗憾的是，<a>s不支持disabled属性。

<div class="list-group"><button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button</button><button type="button" class="list-group-item list-group-item-action">A second item</button><button type="button" class="list-group-item list-group-item-action">A third button item</button><button type="button" class="list-group-item list-group-item-action">A fourth button item</button><button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

页面展示效果：

2.5 Flush

添加.list-group-flush 以删除一些边框和圆角，从而在父容器中逐边渲染列表组项目（例如卡片）。

<ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li><li class="list-group-item">A fourth item</li><li class="list-group-item">And a fifth one</li>
</ul>

页面展示效果：

2.6 Contextual classes 情境类

使用上下文类为列表项设置有状态背景和颜色的样式。

<ul class="list-group"><li class="list-group-item">A simple default list group item</li><li class="list-group-item list-group-item-primary">A simple primary list group item</li><li class="list-group-item list-group-item-secondary">A simple secondary list group item</li><li class="list-group-item list-group-item-success">A simple success list group item</li><li class="list-group-item list-group-item-danger">A simple danger list group item</li><li class="list-group-item list-group-item-warning">A simple warning list group item</li><li class="list-group-item list-group-item-info">A simple info list group item</li><li class="list-group-item list-group-item-light">A simple light list group item</li><li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

页面展示效果：

上下文类也适用于.list-group-item-action 列表组项操作。请注意，这里添加了上例中没有的悬停样式。还支持.active状态；应用它来指示上下文列表组项上的活动选择。

<div class="list-group"><a href="#" class="list-group-item list-group-item-action">A simple default list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

页面展示效果：

2.7 With badges 带徽章

在某些实用程序的帮助下，将徽章添加到任何列表组项目中，以显示未读计数、活动等。

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">A list item<span class="badge badge-primary badge-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center">A second list item<span class="badge badge-primary badge-pill">2</span></li><li class="list-group-item d-flex justify-content-between align-items-center">A third list item<span class="badge badge-primary badge-pill">1</span></li>
</ul>

页面展示效果：

2.8 Custom content 自定义内容

在flexbox实用程序的帮助下，在其中添加几乎任何HTML，即使是像下面这样的链表组。

<div class="list-group"><a href="#" class="list-group-item list-group-item-action active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small>3 days ago</small></div><p class="mb-1">Some placeholder content in a paragraph.</p><small>And some small print.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print.</small></a>
</div>

页面展示效果：

2.9 JavaScript behavior

使用标签JavaScript插件（单独包含或通过编译的bootstrap.js文件包含）扩展我们的列表组，以创建本地内容的标签窗格。

<!--JavaScript behavior-->
<div class="row"><div class="col-4"><div class="list-group" id="list-tab" role="tablist"><a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"href="#list-home" role="tab" aria-controls="home">Home</a><a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list"href="#list-profile" role="tab" aria-controls="profile">Profile</a><a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list"href="#list-messages" role="tab" aria-controls="messages">Messages</a><a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list"href="#list-settings" role="tab" aria-controls="settings">Settings</a></div></div><div class="col-8"><div class="tab-content" id="nav-tabContent"><div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Some placeholder content in a paragraph relating to "Home". And some more content, used here just to padout and fill this tab panel. In production, you would obviously have more real content here. And notjust text. It could be anything, really. Text, images, forms.</div><div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Some placeholder content in a paragraph relating to "Home". And some more content, used here just to padout and fill this tab panel. In production, you would obviously have more real content here. And notjust text. It could be anything, really. Text, images, forms.</div><div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div><div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div></div></div>
</div>

点击list-home项，页面展示效果：

点击list-profile项，页面展示效果：