如何通过css框架Bulma制作按钮和表单-css教程-PHP中文网

如何通过css框架bulma制作按钮和表单

Bulma 框架通过其直观的类名系统，让制作美观且响应式的按钮和表单变得异常简单。你只需要引入 Bulma 的 CSS 文件，然后利用它预设的类名，就能快速构建出符合现代网页设计标准的交互元素，而无需编写大量的自定义样式代码。它的模块化设计意味着你可以按需组合不同的类，实现高度定制化。

解决方案

使用 Bulma 制作按钮和表单的核心在于理解其组件化的类名系统。通过组合不同的修饰符类，你可以快速实现多样化的样式和功能。对于按钮，主要使用

.button

登录后复制

基类配合颜色、大小和状态修饰符。对于表单，则围绕

.field

登录后复制

、

.control

登录后复制

和具体的输入元素（如

.input

登录后复制

、

.textarea

登录后复制

、

.select

登录后复制

）及其修饰符来构建。

Bulma按钮：从基础到高级定制

聊聊 Bulma 的按钮，其实它上手特别快。我个人觉得 Bulma 的按钮设计哲学很棒，即插即用，但又留足了定制空间。最基础的按钮就是给一个

button

登录后复制

或

登录后复制

标签加上

.button

登录后复制

类。

<button class="button">普通按钮</button>
<a class="button">链接按钮</a>

登录后复制

要给按钮上色，Bulma 提供了一系列语义化的颜色类，比如

.is-primary

登录后复制

(主色)、

.is-link

登录后复制

(链接色)、

.is-info

登录后复制

(信息色)、

.is-success

登录后复制

(成功色)、

.is-warning

登录后复制

(警告色)、

.is-danger

登录后复制

(危险色)。这些颜色类让你的按钮一眼就能看出它的意图，这在设计上真的帮了大忙。

立即学习“前端免费学习笔记（深入）”；

<button class="button is-primary">主要操作</button>
<button class="button is-link">跳转链接</button>
<button class="button is-success">保存</button>

登录后复制

大小方面，Bulma 也考虑得很周全，从

.is-small

登录后复制

到

.is-large

登录后复制

，有四种尺寸可选。我通常会根据按钮在页面中的重要程度和布局空间来选择尺寸，比如导航栏里用小按钮，提交表单可能用中等或大按钮。

<button class="button is-small">小按钮</button>
<button class="button is-normal">正常按钮</button>
<button class="button is-medium">中按钮</button>
<button class="button is-large">大按钮</button>

登录后复制

除了这些，还有一些修饰符能改变按钮的视觉风格或状态。

.is-outlined

登录后复制

让按钮变成边框样式，

.is-inverted

登录后复制

则会反转颜色，

.is-loading

登录后复制

会自动添加一个加载动画，这在异步操作时特别有用。

.is-static

登录后复制

则是让按钮看起来像按钮，但不可点击。

<button class="button is-primary is-outlined">边框按钮</button>
<button class="button is-link is-inverted">反色按钮</button>
<button class="button is-primary is-loading">加载中...</button>
<button class="button is-static">静态按钮</button>

登录后复制

有时候，按钮需要和图标一起出现，Bulma 的

.icon

登录后复制

组件能很好地融入按钮内部，让按钮表达更清晰。

<button class="button is-success">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span>保存</span>
</button>

登录后复制

Bulma表单：构建用户友好的输入界面

构建用户友好的表单，是任何 Web 应用都绕不开的。说实话，刚开始用 Bulma 的表单，觉得

.field

登录后复制

和

.control

登录后复制

有点多余，但用久了才发现，这种结构化其实让表单的可维护性大大提升。Bulma 的表单元素都包裹在

.field

登录后复制

和

.control

登录后复制

容器中，这使得布局和样式管理变得非常一致。

一个基本的文本输入框通常是这样：

<div class="field">
  <label class="label">姓名</label>
  <div class="control">
    <input class="input" type="text" placeholder="请输入您的姓名">
  </div>
</div>

登录后复制

.label

登录后复制

类用来定义标签，

.input

登录后复制

类则直接作用于

input

登录后复制

标签。对于多行文本，用

textarea

登录后复制

标签配合

.textarea

登录后复制

类。

<div class="field">
  <label class="label">留言</label>
  <div class="control">
    <textarea class="textarea" placeholder="您的宝贵意见..."></textarea>
  </div>
</div>

登录后复制

下拉选择框 (

select

登录后复制

) 稍微有点特殊，它需要一个

.select

登录后复制

类包裹

select

登录后复制

标签本身，再套在

.control

登录后复制

里面。我遇到过一个坑，就是想给

select

登录后复制

加个图标，结果直接套用

input

登录后复制

的思路就错了，

select

登录后复制

需要一个特定的

control has-icons-left

登录后复制

结构。

<div class="field">
  <label class="label">选择</label>
  <div class="control">
    <div class="select">
      <select>
        <option>选项一</option>
        <option>选项二</option>
      </select>
    </div>
  </div>
</div>

登录后复制

和按钮类似，表单元素也有状态和大小修饰符。例如，

.is-success

登录后复制

、

.is-warning

登录后复制

、

.is-danger

登录后复制

可以用来显示验证结果，

.is-small

登录后复制

、

.is-medium

登录后复制

、

.is-large

登录后复制

改变尺寸。

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

<div class="field">
  <label class="label">邮箱</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-danger">这个邮箱地址是无效的</p>
</div>

登录后复制

Bulma 还支持水平布局的表单，通过在

.field

登录后复制

上添加

.is-horizontal

登录后复制

类，然后使用

.field-label

登录后复制

和

.field-body

登录后复制

来组织标签和控制区域，这在一些后台管理界面里很常见。

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">主题</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control">
        <input class="input" type="text" placeholder="输入主题">
      </p>
    </div>
  </div>
</div>

登录后复制

提升用户体验：Bulma按钮与表单的实战技巧与常见陷阱

在实际项目中，光会基础用法还不够，一些实战技巧能让你的 Bulma 按钮和表单更上一层楼，同时也要警惕一些常见的“坑”。

一个很实用的技巧是利用 Bulma 的

has-icons-left

登录后复制

和

has-icons-right

登录后复制

类给输入框添加图标。这不仅能美化界面，还能直观地告诉用户这个输入框是用来干什么的，比如一个邮箱输入框旁边放个信封图标。但要注意，图标需要放在

span.icon

登录后复制

里面，并且

input

登录后复制

标签需要放在

div.control

登录后复制

里面，同时

div.control

登录后复制

也要有相应的

has-icons-left/right

登录后复制

类。我刚开始用的时候就经常忘记给

control

登录后复制

添加这些类，导致图标错位。

<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="密码">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>

登录后复制

另一个提升用户体验的点是表单验证反馈。Bulma 提供了

.is-success

登录后复制

、

.is-warning

登录后复制

、

.is-danger

登录后复制

这些修饰符，配合

.help

登录后复制

类，可以清晰地展示验证信息。这比弹出

alert

登录后复制

框要优雅得多。

<div class="field">
  <label class="label">用户名</label>
  <div class="control">
    <input class="input is-success" type="text" placeholder="Text input" value="zhangsan">
  </div>
  <p class="help is-success">这个用户名可用</p>
</div>

登录后复制

至于常见陷阱，除了前面提到的

select

登录后复制

标签和图标的组合方式，还有一个是关于

checkbox

登录后复制

和

radio

登录后复制

。Bulma 默认对它们没有太多样式，你需要手动添加

.checkbox

登录后复制

或

.radio

登录后复制

类，并且它们通常需要包裹在一个

label

登录后复制

标签里，而不是直接作用于

input

登录后复制

。

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      记住我
    </label>
  </div>
</div>

登录后复制

最后，不要忘记可访问性。虽然 Bulma 已经做了很多基础工作，但我们作为开发者，仍需要确保为所有表单元素提供明确的

label

登录后复制

，并为复杂的交互提供

aria

登录后复制

属性，让使用辅助技术的用户也能顺畅地操作。

Bulma按钮与表单的自定义与扩展：超越默认样式

虽然 Bulma 默认的样式已经很漂亮了，但总有些时候，我们需要更个性化的设计来匹配品牌调性，或者实现一些框架没有直接提供的特殊效果。这时候，我们就需要对 Bulma 进行自定义和扩展了。

最直接的自定义方式是利用 Bulma 基于 Sass 构建的优势。如果你在项目中使用了 Sass，那么你可以通过覆盖 Bulma 的 Sass 变量来轻松修改颜色、字体、边框圆角等几乎所有样式。例如，我想把主色调改成我公司的主题蓝，我只需要在我的 Sass 文件中，在导入 Bulma 之前，重新定义

$primary

登录后复制

变量：

// custom.scss
$primary: #663399; // 我公司的主题紫
@import "~bulma/bulma.sass"; // 确保在自定义变量后导入 Bulma

登录后复制

这样，所有使用

.is-primary

登录后复制

类的按钮和表单元素都会自动更新为新的颜色。这种方式非常强大，因为它能让你在不修改 Bulma 核心文件的情况下，实现全局的样式调整。

如果只是想针对某个特定的按钮或表单元素做一些微调，直接写自定义 CSS 也是可以的。Bulma 的类名设计得很清晰，冲突的可能性比较小。比如，你可能需要一个特别的按钮，点击后边框会闪烁一下，这显然不是 Bulma 默认提供的，就需要自己写动画 CSS。

/* custom.css */
.button.is-special-effect {
  position: relative;
  overflow: hidden;
}

.button.is-special-effect::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid transparent;
  border-radius: inherit;
  animation: border-flash 1s infinite alternate;
  pointer-events: none;
}

@keyframes border-flash {
  from { border-color: transparent; }
  to { border-color: #ffdd57; }
}

登录后复制

我发现，有时候为了实现一些复杂的表单布局，比如多列输入框或者带有特定背景的输入组，直接用 Bulma 现有的