基于Bulma的现代Web界面开发实战：零JavaScript依赖的响应式设计

<div class="column is-half is-12-mobile is-8-tablet"></div>

// 覆盖主色调
$primary: #3a86ff;
// 引入核心模块
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";

<section class="section">
<div class="container">
<!-- 响应式卡片网格 -->
<div class="columns is-multiline is-centered">
<div class="column is-4-desktop is-6-tablet">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="product.jpg">
</figure>
</div>
<div class="card-content">
<p class="title is-5">产品名称</p>
<div class="tags has-addons">
<span class="tag is-primary">¥299</span>
<span class="tag is-light">库存充足</span>
</div>
<button class="button is-fullwidth is-link">加入购物车</button>
</div>
</div>
</div>
<!-- 更多产品卡片... -->
</div>
</div>
</section>

<!-- 仅在桌面端显示的元素 -->
<div class="is-hidden-touch">桌面专属内容</div>
<!-- 移动端垂直排列，平板以上水平排列 -->
<div class="is-flex-direction-column-mobile is-flex-direction-row-tablet">

<div class="field">
<label class="label">邮箱</label>
<div class="control has-icons-right">
<input class="input is-danger" type="email" placeholder="输入错误示例">
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p class="help is-danger">邮箱格式不正确</p>
</div>

<!-- 弹性容器方案 -->
<div class="columns is-vcentered">
<div class="column">内容自动垂直居中</div>
</div>

<!-- 通用方案 -->
<div class="is-flex is-align-items-center">
<span>居中文本</span>
</div>

/* 错误方式 */
.button { background: red; }

/* 正确方式 */
.my-special-button.button {
background: red !important;
}

<!-- 必需的结构 -->
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item">Logo</a>
<!-- 汉堡菜单 -->
<a role="button" class="navbar-burger"
aria-label="menu"
data-target="my-navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="my-navbar" class="navbar-menu">
<div class="navbar-start">...</div>
</div>
</nav>

<!-- 引入交互脚本 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll('.navbar-burger'), 0);
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>