卡片（Card）

全面灵活的可组合组件

1

1.卡片组成

卡片组件包含几个可以混合和匹配的元素：

  • card: 主容器
    • card-header: 卡片头，带阴影的水平条
      • card-header-title:卡片标题：左对齐粗体文本
      • card-header-icon: 卡片标题图标：图标的占位符
    • card-image: 卡片图像：一个全宽的容器，用于存储响应图像
    • card-content: 卡片内容：任何其他元素的多用途容器
    • card-footer: 卡片页脚：控件的水平列表
      • card-footer-item: 卡片页脚项：可重复的列表项

您可以通过附加 is-centered修饰符使卡片标题card-header-title居中。

Example

Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

HTML 

<div class="card">
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
      </figure>
    </div>
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">John Smith</p>
          <p class="subtitle is-6">@johnsmith</p>
        </div>
      </div>
  
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
        <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
  </div>

2.卡片部件

卡片头包含标题和一个图标

Example

Card header

HTML 

<div class="card">
    <header class="card-header">
      <p class="card-header-title">
        Card header
      </p>
      <button class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </header>
  </div>

card-image容器包含一个 image 元素:

Example

Placeholder image

HTML 

<div class="card">
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
      </figure>
    </div>
  </div>

card-content 卡片内容是主要部分，非常适合文本内容，这要归功于它的填充：

Example

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

HTML 

<div class="card">
    <div class="card-content">
      <div class="content">
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </div>
    </div>
  </div>

卡片页脚用作多个卡片页脚项目元素的列表：

Example

HTML 

<div class="card">
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>

3.综合实例

Example

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

HTML 

<div class="card">
    <header class="card-header">
      <p class="card-header-title">
        Component
      </p>
      <button class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </header>
    <div class="card-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>

Example

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

HTML 

<div class="card">
    <div class="card-content">
      <p class="title">
        “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
      </p>
      <p class="subtitle">
        Jeff Atwood
      </p>
    </div>
    <footer class="card-footer">
      <p class="card-footer-item">
        <span>
          View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
        </span>
      </p>
      <p class="card-footer-item">
        <span>
          Share on <a href="#">Facebook</a>
        </span>
      </p>
    </footer>
  </div>

4.变量

Name
Type
Value
Computed Value
Computed Type 
$card-color
variable
$text
hsl(0, 0%, 29%)
color
$card-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$card-shadow
shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$card-radius
size
0.25rem
$card-header-background-color
string
transparent
$card-header-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$card-header-padding
size
0.75rem 1rem
$card-header-shadow
shadow
0 0.125em 0.25em rgba($scheme-invert, 0.1)
$card-header-weight
variable
$weight-bold
700
font-weight
$card-content-background-color
string
transparent
$card-content-padding
size
1.5rem
$card-footer-background-color
string
transparent
$card-footer-border-top
size
1px solid $border-light
$card-footer-padding
size
0.75rem
$card-media-margin
variable
$block-spacing
1.5rem
size

返回头部

23222

问题反馈
返回顶部