4 Bootstrap4组件——卡片

.card卡片组件是BootStrap 4新增的一组重要样式，它是一个灵活的、可扩展的内容管理器，可以包含图片、列表、文本、链接等多种组合，卡片有可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。 使用.card构建卡片

<div class="card"></div>

1 卡片内容

1.1 卡片标题

使用.card-title（标题）和.card-subtitle（小标题）构建卡片标题

<div class="card">
	<h1 class="card-title">卡片标题</h1>
	<h5 class="card-subtitle text-muted">小标题</h5>
	<div class="card-body">卡片主体</div>
</div>

1.2卡片主体

使用.card-body构建卡片主体内容

<div class="card">	
	<div class="card-body">卡片主体</div>
</div>

1.2.1 文本

卡片主体使用.card-text代表文本内容

<div class="container">
	<div class="card">		
		<h1 class="card-title">卡片标题</h1>
		<h5 class="card-subtitle text-muted">小标题</h5>
		<div class="card-body">
			<p class="card-text">卡片主体</p>
		</div>
	</div>
</div>

1.2.2 超链接

卡片主体使用.card-link代表超链接

<div class="container">
	<div class="card">		
		<h1 class="card-title">卡片标题</h1>
		<h5 class="card-subtitle text-muted">小标题</h5>
		<div class="card-body">
			<p class="card-text">卡片主体</p>
			<a href="#" class="card-link">注册</a>
			<a href="#" class="card-link">登录</a>
		</div>
	</div>
</div>

1.3 图片

使用.card-img-top定义一张图片在卡片的顶部

<div class="container">
	<div class="card">
		<img src="#" class="card-img-top">		
		<h1 class="card-title">卡片标题</h1>
		<h5 class="card-subtitle text-muted">小标题</h5>
		<div class="card-body">
			<p class="card-text"