New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

文档

当你使用 Bulma 创建一个网站 所需要的一切

File upload

一个自定义的 文件上传 组件， 没有使用 JavaScript。

Experimental
Since 0.5.1
Colors Yes
Sizes Yes
Variables Yes

.file 元素是一个包裹着 <input type="file"> 的简单可交互组件。它包含几个子元素：

  • .file 主要 容器
    • .file-label 元素实际 可交互 和可点击的部分
      • .file-input 原生 文件输入组件, 使用隐藏样式
      • .file-cta 触发 上传 - CTA
        • .file-icon 一个可选的 上传 图标
        • .file-label "Choose a file…" 文本
      • .file-name 所选文件 名称的容器 
<div class="file">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
  </label>
</div>

Modifiers | 修饰符 #

通过 .has-name 修饰符和 .file-name 元素结合使用，可以为文件名添加 占位符。 

<div class="file has-name">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

您也可以通过添加 .is-right 修饰符将 CTA 移动到 右侧。 

<div class="file has-name is-right">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

您还可以使用 .is-fullwidth 修饰符扩展名称框 填充 剩余空间。 

<div class="file has-name is-fullwidth">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

您还可以通过添加 .is-boxed 修饰符将图标变为 块状 

<div class="file is-boxed">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
  </label>
</div>

您可以 一起 使用 .has-name 和 .is-boxed。 

<div class="file has-name is-boxed">
  <label class="file-label">
    <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">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

Colors | 颜色 #

您可以添加 10 种颜色修饰符 来改变元素样式：

  • is-white
  • is-black
  • is-light
  • is-dark
  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger 
<div class="field">
  <div class="file is-primary">
    <label class="file-label">
      <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">
          Primary file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-info has-name">
    <label class="file-label">
      <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">
          Info file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-warning is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </span>
        <span class="file-label">
          Warning file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-danger has-name is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </span>
        <span class="file-label">
          Danger file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

Sizes | 尺寸 #

你可以使用 3 种尺寸 中的一种:

  • .is-small
  • .is-medium
  • .is-large 
<div class="field">
  <div class="file is-small">
    <label class="file-label">
      <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">
          Small file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file">
    <label class="file-label">
      <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">
          Normal file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium">
    <label class="file-label">
      <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">
          Medium file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large">
    <label class="file-label">
      <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">
          Large file…
        </span>
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small has-name">
    <label class="file-label">
      <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">
          Small file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file has-name">
    <label class="file-label">
      <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">
          Normal file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium has-name">
    <label class="file-label">
      <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">
          Medium file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large has-name">
    <label class="file-label">
      <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">
          Large file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small is-boxed">
    <label class="file-label">
      <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">
          Small file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-boxed">
    <label class="file-label">
      <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">
          Normal file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium is-boxed">
    <label class="file-label">
      <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">
          Medium file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large is-boxed">
    <label class="file-label">
      <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">
          Large file…
        </span>
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small is-boxed has-name">
    <label class="file-label">
      <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">
          Small file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-boxed has-name">
    <label class="file-label">
      <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">
          Normal file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium is-boxed has-name">
    <label class="file-label">
      <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">
          Medium file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large is-boxed has-name">
    <label class="file-label">
      <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">
          Large file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

Alignment | 对齐 #

您可以 对齐 文件选择组件：

  • is-centered 修饰符将会 居中
  • is-right 修饰符将会 右对齐 
<div class="field">
  <div class="file is-centered is-boxed is-success has-name">
    <label class="file-label">
      <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">
          Centered file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-right is-info">
    <label class="file-label">
      <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">
          Right file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

JavaScript #

文件上传组件需要使用 JavaScript 来 获得 所选文件的名称 。
@chintanbanugaria在 Github 上提供了一个简单的解决方案。在 JSFiddle 上查看。

Variables | 变量 #

您可以使用 这些变量 来 自定义 这个元素，只需要在导入 Bulma 之前 设置这些变量。学习如何开始。

Name Default value
Name Default value
$file-border-color $border
$file-radius $radius
$file-cta-background-color $white-ter
$file-cta-color $grey-dark
$file-cta-hover-color $grey-darker
$file-cta-active-color $grey-darker
$file-name-border-color $border
$file-name-border-style solid
$file-name-border-width 1px 1px 1px 0
$file-name-max-width 16em

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!