Card | Bulma中文文档: a modern CSS framework based on Flexbox

一个全能且灵活的可组合组件

Colors No

Sizes No

Variables Yes

card 组件包含以下几个可混搭的元素:

card: 主要容器
- card-header: 一个带阴影的横条
  - card-header-title: 一个左对齐的粗体文本
  - card-header-icon: 一个图标占位符
- card-image: 一个全宽的自适应图片容器
- card-content: 一个用于任何其他元素的多用途容器
- card-footer: 一个水平的控件列表
  - card-footer-item: 一个可重复的项目列表

New 0.5.3

您可以通过添加 is-centered 修饰符使 card-header-title 居中。

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

        <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://img.higrid.net/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://img.higrid.net/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>
      

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

        <div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Component
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </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>
      

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

Jeff Atwood

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

Variables | 变量 #

你可以使用这些变量来 自定义 这些 component。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$card-color`	`$text`
`$card-background-color`	`$white`
`$card-shadow`	`0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)`
`$card-header-color`	`$text-strong`
`$card-header-shadow`	`0 1px 2px rgba($black, 0.1)`
`$card-header-weight`	`$weight-bold`
`$card-footer-border-top`	`1px solid $border`

Name

Default value

Name

Default value

$card-color

$text

$card-background-color

$white

$card-shadow

0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)

$card-header-color

$text-strong

$card-header-shadow

0 1px 2px rgba($black, 0.1)

$card-header-weight

$weight-bold

$card-footer-border-top

1px solid $border