个人网站如何做支付功能徐州建站模板公司
【Bootstrap V4系列】学习入门教程之 组件-卡片（Card）高级用法
- 一、Sizing 尺寸
- 1.1 Using grid markup 使用网格标记
- 1.2 Using utilities 使用实用程序
- 1.3 Using custom CSS 使用自定义CSS
- 二、Text alignment 文本对齐方式
- 三、Navigation 导航
一、Sizing 尺寸
卡片开始时没有特定的宽度，因此除非另有说明，否则它们将是100%宽的。您可以根据需要使用自定义CSS、网格类、网格Sass混入或实用程序进行更改。
1.1 Using grid markup 使用网格标记
使用网格，根据需要将卡片包裹在列和行中。
<!--Using grid markup-->
<div class="row"><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div></div></div><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div></div></div>
</div>
页面展示效果：
1.2 Using utilities 使用实用程序
使用我们为数不多的可用尺寸工具快速设置卡片的宽度。
<div class="card w-75"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Button</a></div>
</div><div class="card w-50"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Button</a></div>
</div>
页面展示效果：
1.3 Using custom CSS 使用自定义CSS
在样式表中使用自定义CSS或作为内联样式来设置宽度。
<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>
页面展示效果：
二、Text alignment 文本对齐方式
您可以使用我们的文本对齐类快速更改任何卡片的文本对齐方式，无论是整体还是特定部分。
<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div><div class="card text-center" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div><div class="card text-right" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>
页面展示效果：
三、Navigation 导航
使用Bootstrap的导航组件为卡片的标题（或块）添加一些导航。
<div class="card text-center"><div class="card-header"><ul class="nav nav-tabs card-header-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li></ul></div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>
页面展示效果：
<div class="card text-center"><div class="card-header"><ul class="nav nav-pills card-header-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li></ul></div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>
页面展示效果：
