卡片组件包含多个您可以混合和匹配的元素
-
card：主容器-
card-header：带有阴影的水平栏card-header-title：左对齐的粗体文本card-header-icon：图标的占位符
card-image：响应式图像的全宽容器card-content：用于任何其他元素的多用途容器-
card-footer：控件的水平列表card-footer-item：可重复的列表项
-
赞助
卡片
一个全方位灵活且可组合的组件
您可以通过附加 is-centered 修饰符来使 card-header-title 居中。
示例
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>示例 #
示例
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>示例
“计算机科学中存在两个难题：缓存失效、命名事物和差一错误。”
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>Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
