- Bulma 教程
- Bulma - 主页
- Bulma - 介绍
- Bulma - 概览
- Bulma - 修饰符
- Bulma - 列
- Bulma - 布局
- Bulma - 表单
- Bulma - 元素
- Bulma - 组件
- Bulma 有用资源
- Bulma - 快速指南
- Bulma - 资源
- Bulma - 讨论
Bulma - 输入
描述
Bulma 提供用于输入用户数据的输入框，以及不同类型的变量。输入框支持 3 种类型的修饰符 −
颜色
大小
状态
颜色
以下示例描述了如何使用颜色修饰符（如 is-primary、is-info、is-success、is-warning、is-danger）在输入框中 −
<!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">
Input Field Variations
</span>
<br>
<br>
<span class = "is-size-5">
Primary Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-primary" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Info Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-info" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Success Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-success" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Warning Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-warning" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Danger Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-danger" type = "text" placeholder = "Enter your input">
</div>
</div>
</div>
</section>
</body>
</html>
显示以下输出 −
尺寸
以下示例描述了输入框的不同类型的大小，例如 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 = "title">
Input Field Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-small" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Normal Input
</span>
<div class = "field">
<div class = "control">
<input class = "input" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Medium Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-medium" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Large Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-large" type = "text" placeholder = "Enter your input">
</div>
</div>
</div>
</section>
</body>
</html>
显示以下输出 −
状态
可以通过使用类（如 is-hovered、is-focused、is-loading、is-rounded）将输入框显示为不同类型，如下例所述 −
<!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">
Input Field States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Input
</span>
<div class = "field">
<div class = "control">
<input class = "input" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Hover Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-hovered" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Focus Input
</span>
<div class = "field">
<div class = "control">
<input class = "input is-focused" type = "text" placeholder = "Enter your input">
</div>
</div>
<br>
<span class = "is-size-5">
Loading Input
</span>
<div class = "control is-loading">
<input class = "input" type = "text" placeholder = "Enter your input">
</div>
<br>
<span class = "is-size-5">
Disabled Input
</span>
<div class = "control">
<input class = "input" type = "text" placeholder = "Enter your input" disabled>
</div>
<br>
<span class = "is-size-5">
Rounded Input
</span>
<div class = "control">
<input class = "input is-rounded" type = "text" placeholder = "Enter your input">
</div>
</div>
</section>
</body>
</html>
显示以下输出 −
bulma_form.htm
广告