Bootstrap组件——超大屏、列表

一、超大屏

通过引用.jumbotron方法，实现构建超大的Hreo界面，醒目的在网站上展示关键的营销信息，轻量、灵活。

1.基础

<div class="container">
	<div class="row">
		<div class="col">
			<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 href="#" class="btn btn-primary btn-lg">Learn more</a>
			</div>
		</div>
	</div>
</div>

2.全屏

<div class="jumbotron jumbotron-fluid">
	<div class="container-fluid">
		<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>

二、列表

1.基本

添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。
添加 .disabled 到 .list-group-item 下的其中一行或多行，以显示出 禁用 状态。

<div class="col">
	<ul class="list-group">
		<li class="list-group-item">red</li>
		<li class="list-group-item active">green</li>
		<li class="list-group-item">blue</li>
		<li class="list-group-item disabled">yellow</li>
		<li class="list-group-item">pink</li>
	</ul>
</div>

2.链接和按钮

使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action

<div class="col">
	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-action">red</a>
		<a href="#" class="list-group-item list-group-item-action active">green</a>
		<a href="#" class="list-group-item list-group-item-action">blue</a>
		<button class="list-group-item list-group-item-action" disabled>yellow</button>
		<button class="list-group-item list-group-item-action">pink</button>
	</div>
</div>

3.Flush紧致贴齐

加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组，这在诸如Card卡片等容器中很实用（达成更好的呈现效果）。

<div class="col">
	<ul class="list-group list-group-flush">
		<li class="list-group-item">red</li>
		<li class="list-group-item">green</li>
		<li class="list-group-item">blue</li>
		<li class="list-group-item">yellow</li>
		<li class="list-group-item">pink</li>
	</ul>
</div>

4.背景色

<div class="col">
	<ul class="list-group">
		<li class="list-group-item list-group-item-action list-group-item-primary">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-secondary">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-success">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-danger">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-warning">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-info">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-light">有hover状态的</li>
		<li class="list-group-item list-group-item-action list-group-item-dark">有hover状态的</li>
	</ul>
</div>

5.配合徽章

<div class="row mt-5">
	<div class="col">
		<ul class="list-group">
			<li class="list-group-item d-flex justify-content-between align-items-center">
				red
				<span class="badge badge-primary badge-pill">14</span>
			</li>
			<li class="list-group-item d-flex justify-content-between align-items-center">
				green
				<span class="badge badge-success badge-pill">5</span>
			</li>
		</ul>
	</div>
</div>

6.自定义内容

<div class="row mt-5">
	<div class="col">
		<div class="list-group">
			<a href="#" class="list-group-item list-group-item-action active">
				<div class="d-flex justify-content-between">
					<h5 class="mb-1">List group item heading</h5>
					<small>3 days ago</small>
				</div>
				<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
				<small>Donec id elit non mi porta.</small>
			</a>
		</div>
	</div>
</div>

7.选项卡

<div class="row mt-5">
	<div class="col-4">
		<div class="list-group">
			<a href="#list-home" class="list-group-item list-group-item-action active" data-toggle="list">Home</a>
			<a href="#list-profile" class="list-group-item list-group-item-action" data-toggle="list">Profile</a>
			<span data-target="#list-settings" class="list-group-item list-group-item-action" data-toggle="list">Settings</span>
		</div>
	</div>
	<div class="col-8">
		<div class="tab-content">
			<div class="tab-pane fade show active" id="list-home">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
			<div class="tab-pane fade" id="list-profile">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
			<div class="tab-pane fade" id="list-settings">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
		</div>
	</div>
</div>

8.方法与事件

<div class="row mt-5">
	<div class="col-4">
		<div class="list-group" id="myList">
			<a href="#list-home1" class="list-group-item list-group-item-action">Home</a>
			<a href="#list-profile1" class="list-group-item list-group-item-action" >Profile</a>
			<a href="#list-messages1" class="list-group-item list-group-item-action">Messages</a>
		</div>
	</div>
	<div class="col-8">
		<div class="tab-content">
			<div class="tab-pane fade show active" id="list-home1">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
			<div class="tab-pane fade" id="list-profile1">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
			<div class="tab-pane fade" id="list-messages1">
				Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
			</div>
		</div>
	</div>
</div>
<script>
	//方法
	$('#myList a:first-child').tab('show');		//修改当前选中项
	$('#myList a').on('click',function(){
		$(this).tab('show');
	});
	//事件
	$('#myList a:nth-child(2)').on('show.bs.tab', function (e) {
		console.log('该内容要显示了');	//显示前的事件
	});
	$('#myList a:nth-child(2)').on('shown.bs.tab', function (e) {
		console.log('该内容已经显示了');	//显示后的事件
	});
	$('#myList a:nth-child(2)').on('hide.bs.tab', function (e) {
		console.log('该内容要隐藏了');	//隐藏前的事件
	});
	$('#myList a:nth-child(2)').on('hidden.bs.tab', function (e) {
		console.log('该内容已经隐藏了');	//隐藏后的事件
	});
</script>