UIkit3.x文档

卡片

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

用法

卡片组件由卡片本身、卡片主体和卡片标题（可选）组成。通常，卡片是通过 Grid 组件以网格列的形式排列。

Class Description
.uk-card 将这个class添加到 <div> 元素定义一个Card组件。
.uk-card-body 将这个class添加到卡片内可以在卡片和内容之间创建内边距padding 。
.uk-card-title 将这个class添加到标题来定义卡片标题。 
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

默认情况下，卡片是空白无样式的。 因此必须为它添加样式修饰的class。在下面的示例中，我们使用了 .uk-card-default class。

  • 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包含很多修饰样式的class，可用于向卡片添加指定样式。

Class Description
.uk-card-default 添加这个class创建卡片外观样式的框。
.uk-card-primary 添加这个class可为卡片添加一个醒目的颜色。
.uk-card-secondary 添加这个class可为卡片提供一个次要的辅助颜色。 
<div class="uk-card uk-card-default"></div>

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

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

  • 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.

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

鼠标悬停修饰/Hover modifier

要在卡上创建悬停效果，请添加 .uk-card-hover class。这可以在使用锚文本时带来便利，并且可以与其他卡片修饰类结合使用。

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

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

尺寸修改

你可以在卡片中使用不同的尺寸修饰类，使卡片的 padding 增大或减小。

Class Description
.uk-card-small 为卡片添加小型 padding。
.uk-card-large 为卡片添加大型 padding。 
<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>

您还可以将卡片分隔出页眉和页脚，将主体部分包在中间。只需将 .uk-card-header 或 .uk-card-footer class 添加到卡片中的 <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>

  • 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="/skin/ukv3/images/avatar.jpg">
            </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>

媒体

要在卡片中显示不带间距图像，需要将以下class之一添加到<img>外围的<div> 元素内。请注意，您需要相应地修改代码顺序。

Class Description
.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="" 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="/skin/ukv3/images/light.jpg" 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="/skin/ukv3/images/light.jpg" alt="">
            </div>
        </div>
    </div>
</div>

水平对齐

.uk-card-media-left 或 .uk-card-media-right classes 用于在必要时重置边界半径或类似值。但是它们不会创建实际的布局。

为此，假如你要添加Cover 组件中的 .uk-cover-container class，为图像image元素添加 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="/skin/ukv3/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="/skin/ukv3/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>