- Bulma 教程
- Bulma - 首页
- Bulma - 简介
- Bulma - 概述
- Bulma - 修饰符
- Bulma - 列
- Bulma - 布局
- Bulma - 表单
- Bulma - 元素
- Bulma - 组件
- Bulma 实用资源
- Bulma - 快速指南
- Bulma - 资源
- Bulma - 讨论
Bulma - 文件
描述
它用于通过输入标记中的.file元素从用户数据上传文件。.file元素是一个主容器，其包括如下子元素 −
.file-label − 它被认为是元素的可点击部分。
.file-input − 为了某些样式目的而隐藏。
.file-cta − 它调用上传过程。
.file-icon − 它指定上传图标。
.file-label − 它定义文件标签的文本。
.file-name − 它返回所选文件的名称。
让我们创建一个简单示例，使用上述子元素进行文件上传，如下所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
File Upload
</span>
<br>
<br>
<div class = "file">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Upload a file…
</span>
</span>
</label>
</div>
</div>
</section>
</body>
</html>
它显示以下输出 −
颜色和大小
Bulma 提供以下 10 个修改符来设计文件元素样式。
is-white
is-black
is-light
is-dark
is-primary
is-link
is-info
is-success
is-warning
is-danger
你还可以使用 3 个额外大小的文件元素 −
is-small
is-medium
is-large
以下示例描述了如何使用上述修改符和文件元素的大小 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
File Upload Color Modifiers
</span>
<br>
<br>
<div class = "field">
<div class = "file is-primary">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Primary File Upload…
</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 = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Info File Upload…
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-warning">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-cloud-upload-alt"></i>
</span>
<span class = "file-label">
Warning File Upload…
</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 = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-cloud-upload-alt"></i>
</span>
<span class = "file-label">
Danger File Upload…
</span>
</span>
</label>
</div>
</div>
<br>
<br>
<span class = "is-size-5">
File Upload Sizes
</span>
<br>
<br>
<div class = "field">
<div class = "file is-small">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Small File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Normal File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-medium">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Medium File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-large">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Large File Upload...
</span>
</span>
</label>
</div>
</div>
</div>
</section>
</body>
</html>
执行以上操作，你将获得以下输出 −
bulma_form.htm
广告