卡片组件包含了多个元素，你可以混合搭配
-
card：主容器-
card-header：带有阴影的水平栏card-header-title：左对齐的粗体文本card-header-icon：图标占位符
card-image：一个自适应图片的全宽容器card-content：一个多用途容器，用于任何其他元素-
card-footer：一个水平控制列表card-footer-item：一个可重复的列表项
-
赞助商
卡片
一个全面灵活且可组合的组件
你可以通过添加 is-centered 修饰符来使 card-header-title 居中。
示例
约翰·史密斯
@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.org.cn/assets/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.org.cn/assets/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>卡片部分 #
card-header 可以有一个标题和一个 Bulma icon
示例
卡片标题
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 是一个 Bulma image 元素的容器
示例
HTML
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.org.cn/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
</div>card-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.
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>card-footer 作为多个 card-footer-item 元素的列表
示例
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>示例 #
示例
组件
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>示例
“计算机科学中有两件难事：缓存失效、命名事物和 off-by-one 错误。”
杰夫·阿特伍德
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>Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|