Bulma - Textarea
描述
当您需要多行输入时，可以使用 Bulma textarea。如上一章 所述，textarea 也使用相同的修饰符。让我们为每个修饰符创建简单的示例，以便轻松理解它们。
颜色
以下示例描述了在 textarea 字段中使用颜色修饰符(例如 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">
Textarea Field Colors
</span>
<br>
<br>
<span class = "is-size-5">
Primary Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-primary" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Info Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-info" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Success Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-success" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Warning Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-warning" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Danger Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-danger" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
</div>
</section>
</body>
</html>
它显示以下输出 −
尺寸
以下示例描述了不同类型的尺寸，例如 is-small、is-medium 和 is-large 类的 textarea 字段−
<!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">
Textarea Field Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-small" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Normal Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Medium Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-medium" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Large Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-large" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
</div>
</section>
</body>
</html>
它显示以下输出 −
状态
可以使用 is-hovered、is-focused、is-loading 等类来显示不同类型的文本区域，如下例所示 −
<!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">
Textarea States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea" type = "text" placeholder = "Normal textarea"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Hover Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-hovered" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Focus Textarea
</span>
<div class = "field">
<div class = "control">
<textarea class = "textarea is-focused" type = "text" placeholder = "Enter your input"></textarea>
</div>
</div>
<br>
<span class = "is-size-5">
Loading Textarea
</span>
<div class = "control is-loading">
<textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
</div>
<br>
<span class = "is-size-5">
Disabled Textarea
</span>
<div class = "control">
<textarea class = "textarea" type = "text" placeholder = "Enter your input" disabled></textarea>
</div>
</div>
</section>
</body>
</html>
它显示以下输出 −
bulma_form.html
