跳至主要内容

文档

卡片

创建具有不同样式的布局框。

使用

卡片组件包括卡片本身、卡片主体和可选的卡片标题。 通常，卡片从 网格组件 中以网格列形式排列。

类 描述
.uk-card 将此类添加到 <div> 元素以定义卡片组件。
.uk-card-body 将此类添加到卡片以在卡片与其内容之间创建内边距。
.uk-card-title 将此类添加到标题以定义卡片标题。 
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

默认情况下，卡片是空白的。 这就是为什么添加样式修饰符类很重要。 在我们的示例中，我们使用 .uk-card-default 类。

  • 默认

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <h3 class="uk-card-title">Default</h3>
    <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

样式修饰符

UIkit 包含许多修饰符，可用于向卡片添加特定样式。

类 描述
.uk-card-default 添加此类以创建视觉上风格化的框。
.uk-card-primary 添加此类以修改卡片并使用主要颜色强调它。
.uk-card-secondary 添加此类以修改卡片并为其提供次要背景颜色。 
<div class="uk-card uk-card-default"></div>

<div class="uk-card uk-card-primary"></div>

<div class="uk-card uk-card-secondary"></div>

  • 默认

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    主要

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    次要

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

悬停修饰符

要在卡片上创建悬停效果，请添加 .uk-card-hover 类。 这在处理锚点时非常有用，可以与其他卡片修饰符结合使用。

<div class="uk-card uk-card-hover"></div>

  • 悬停

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    默认

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    主要

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    次要

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Hover</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

大小修饰符

您可以将不同的尺寸修饰符应用于卡片，这些修饰符将减少或增加其填充。

类 描述
.uk-card-small 添加此类以应用较小的填充。
.uk-card-large 添加此类以应用较大的填充。 
<div class="uk-card uk-card-small uk-card-default"></div>

<div class="uk-card uk-card-large uk-card-default"></div>

  • 小

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    大

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <h3 class="uk-card-title">Small</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-large uk-card-body">
            <h3 class="uk-card-title">Large</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

您还可以将卡片划分为页眉和页脚——围绕默认主体。 只需将 .uk-card-header 或 .uk-card-footer 类添加到卡片内的 <div> 元素中即可。

<div class="uk-card">
    <div class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </div>
    <div class="uk-card-body"></div>
    <div class="uk-card-footer"></div>
</div>
  • Avatar

    标题

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    阅读更多 
  • <div class="uk-card uk-card-default uk-width-1-2@m">
    <div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg" alt="Avatar">
            </div>
            <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
            </div>
        </div>
    </div>
    <div class="uk-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="uk-card-footer">
        <a href="#" class="uk-button uk-button-text">Read more</a>
    </div>
</div>

媒体

要在卡片内显示图像而没有任何间距，请将以下类之一添加到 <img> 元素周围的 <div> 中。 请注意，您需要相应地修改源顺序。

类 描述
.uk-card-media-top 此类表示媒体元素与顶部对齐。
.uk-card-media-bottom 此类表示媒体元素与底部对齐。
.uk-card-media-left 此类表示媒体元素与左侧对齐。
.uk-card-media-right 此类表示媒体元素与右侧对齐。 
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="" width="" height="" alt="">
    </div>
    <div class="uk-card-body"></div>
</div>

  • 顶部媒体

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    底部媒体

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-child-width-1-2@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
            </div>
        </div>
    </div>
</div>

水平对齐

.uk-card-media-left 或 .uk-card-media-right 类用于在必要时重置 border-radius 或类似元素。 它们不会创建实际的布局。

为此，您可以例如添加来自 封面组件 的 .uk-cover-container 类。 将 uk-cover 属性添加到图像元素，并使用 网格 和 宽度 组件来实现对齐。 创建一个具有图像宽度和高度的 <canvas> 元素，以便在较小的视口中网格堆叠时它可以保留其尺寸。 这只是创建并排布局的一种方法。

<div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="" alt="" uk-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="uk-card-body"></div>
    </div>
</div>

  • 左侧媒体

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    右侧媒体

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
    <div class="uk-flex-last@s uk-card-media-right uk-cover-container">
        <img src="images/light.jpg" alt="" uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

徽章

要在卡片内放置徽章，请将 .uk-card-badge 类添加到容器元素中。 要为徽章设置样式，您可以使用其他组件之一，例如 标签。

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
  • 徽章

    标题

    Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <div class="uk-card-badge uk-label">Badge</div>
    <h3 class="uk-card-title">Title</h3>
    <p>Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>