Bulma 文件上传 - Html

Bulma 是一个跟 Bootstrap 相似的、基于 Sass 的现代 CSS 框架。Bulma 的样式设计简洁大方、易于使用。在 html 中使用 Bulma 提供的文件上传组件，可以方便快捷地实现文件上传功能。

用法

引入 Bulma 样式文件

在 html 的 head 部分引入 Bulma 样式文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">

文件上传组件

使用 <input type="file"> 标签即可创建文件上传组件。

<div class="field">
  <label class="label">文件上传示例</label>
  <div class="control">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        选择文件
      </span>
    </span>
  </div>
</div>

以上代码使用了 Bulma 提供的样式，并添加了 Font Awesome 的图标。你还可以自定义上传按钮的样式和文本。

文件上传表单

在表单中添加文件上传组件，将表单的 enctype 属性设置为 multipart/form-data。

<form action="/upload" method="post" enctype="multipart/form-data">
  <!-- 表单内容 -->
  <div class="field">
    <label class="label">文件上传示例</label>
    <div class="control">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          选择文件
        </span>
      </span>
    </div>
  </div>
  <!-- 提交按钮 -->
  <div class="field">
    <div class="control">
      <button class="button is-primary" type="submit">
        提交
      </button>
    </div>
  </div>
</form>

结语

Bulma 提供了美观、易用的文件上传组件和表单样式，方便开发者快速实现上传功能。在使用时只需引入 Bulma 样式文件，然后按照文档中的说明嵌入表单即可。