Bulma - Card
描述
Card 组件将内容显示在框中以获得更好的外观。它由主容器内的以下内部元素组成 −
card − 它是一个主容器，包含所有元素。
card-header − 它代表一个水平条。
card-header-title − 在这个类中，文本以粗体字体左对齐。
card-header-icon − 它用于显示标题图标
card-image −它指定用于制作响应式图像的全宽容器。
card-content − 它用于显示卡片的内容。
card-footer − 它定义带有水平控件列表的卡片页脚。
card-footer-item − 它在 card-footer 类中使用，具有可重复的列表项。
以下示例演示了如何使用上述类来显示卡片 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Card</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<div class = "container">
<h1 class = "is-size-2">Card</h1><br>
<div class = "card">
<div class = "card-image">
<figure class = "image is-3by1">
<img src = "http://3.bp.blogspot.com/-B8jn4_pTmko/Vi3zmDIhnII/AAAAAAAACBY/5EEv6Ep_z6w/s1600/tutorialpoint.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://lh3.ggpht.com/FnKKlX-4e6SZjODG0_9TMd5FZ7zuO_OOh7lbRgqB8DxWTZVUiALW6qh3YUT6xARYdZQ=w720-h310" alt="Placeholder image">
</figure>
</div>
<div class = "media-content">
<p class = "title is-4">Tutorialspoint</p>
<p class = "subtitle is-6">https://www.tutorialspoint.com/</p>
<time datetime = "2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
执行上述代码，您将得到以下输出 −
bulma_components.html
