跳到主要内容

文档

Card

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

用法

卡片（Card）组件由卡片本身、卡片主体以及可选的卡片标题组成。通常，卡片会排列在 Grid 组件 的网格列中。

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

默认情况下，卡片是空白的。因此为其添加修饰符类来设置样式很重要。在示例中我们使用 .uk-card-default 类。

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 添加该类，为卡片设置次要背景色。
.uk-card-overlay 添加该类，使卡片在背景图片上呈现最佳效果。 
<div class="uk-card uk-card-default"></div>

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

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

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

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Overlay

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="uk-child-width-1-2@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 <a href="#">dolor</a> sit amet, consectetur adipiscing 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 <a href="#">dolor</a> sit amet, consectetur adipiscing 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 <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-inline-clip">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
            <div class="uk-card uk-card-overlay uk-card-body uk-position-cover uk-position-small">
                <h3 class="uk-card-title">Overlay</h3>
                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

悬停修饰符

要为卡片添加悬停效果，添加 .uk-card-hover 类。这在处理锚点时很有用，并且可以与其他卡片修饰符组合使用。

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

Hover

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Overlay

Lorem ipsum dolor sit amet, consectetur adipiscing 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">
            <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">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-inline-clip">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
            <div class="uk-card uk-card-overlay uk-card-hover uk-card-body uk-position-cover uk-position-small">
                <h3 class="uk-card-title">Overlay</h3>
                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
            </div>
        </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>

Small

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

Large

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>

页眉和页脚

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

<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

Title

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

Read more 
<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>

Media Top

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

Media Bottom

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 类用于在必要时重置圆角等样式。它们并不创建实际的布局。

要实现布局，你可以使用 Cover 组件 的 .uk-cover-container 类。为图片元素添加 uk-cover 属性，并使用 Grid 和 Width 组件来实现对齐。创建一个宽高与图片一致的 <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>

Media Left

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

Media Right

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 类。要为徽标设置样式，你可以使用其他组件，例如 Label。

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
Badge

Title

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>