【Bootstrap V4系列】学习入门教程之 组件-卡片(Card)高级用法

【Bootstrap V4系列】学习入门教程之 组件-卡片(Card)高级用法

  • [一、Sizing 尺寸](#一、Sizing 尺寸)
    • [1.1 Using grid markup 使用网格标记](#1.1 Using grid markup 使用网格标记)
    • [1.2 Using utilities 使用实用程序](#1.2 Using utilities 使用实用程序)
    • [1.3 Using custom CSS 使用自定义CSS](#1.3 Using custom CSS 使用自定义CSS)
  • [二、Text alignment 文本对齐方式](#二、Text alignment 文本对齐方式)
  • [三、Navigation 导航](#三、Navigation 导航)

一、Sizing 尺寸

卡片开始时没有特定的宽度,因此除非另有说明,否则它们将是100%宽的。您可以根据需要使用自定义CSS、网格类、网格Sass混入或实用程序进行更改。

1.1 Using grid markup 使用网格标记

使用网格,根据需要将卡片包裹在列和行中。

html 复制代码
<!--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 使用实用程序

使用我们为数不多的可用尺寸工具快速设置卡片的宽度。

html 复制代码
<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或作为内联样式来设置宽度。

html 复制代码
<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 文本对齐方式

您可以使用我们的文本对齐类快速更改任何卡片的文本对齐方式,无论是整体还是特定部分。

html 复制代码
<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的导航组件为卡片的标题(或块)添加一些导航。

html 复制代码
<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>

页面展示效果:

html 复制代码
<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>

页面展示效果:

相关推荐
安全系统学习2 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖18 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
天水幼麟19 分钟前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖29 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
沧海一笑-dj1 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript