【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>

页面展示效果:

相关推荐
我爱学嵌入式43 分钟前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER4 小时前
学习日志19 python
python·学习
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发8 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen9 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
陈不知代码9 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记9 小时前
sass中@mixin与 @include
前端·sass