- 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">
Select Field Colors
</span>
<br>
<br>
<span class = "is-size-5">
Primary Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-primary">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Info Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-info">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Success Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-success">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Warning Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-warning">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Danger Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-danger">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</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">
Select Field Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-small">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Normal Select
</span>
<div class = "field">
<div class = "control">
<div class = "select">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Medium Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-medium">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Large Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-large">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</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">
Select Field States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Select
</span>
<div class = "field">
<div class = "control">
<div class = "select">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Hovered Select
</span>
<div class = "field">
<div class = "control">
<div class = "select">
<select class = "is-hovered">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Focused Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-medium">
<select class = "is-focused">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Loading Select
</span>
<div class = "field">
<div class = "control">
<div class = "select is-loading">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<br>
<br>
<span class = "title">
Select Field with Icon
</span>
<br>
<br>
<div class = "field">
<div class = "control has-icons-left">
<div class = "select">
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
<div class = "icon is-small is-left">
<i class = "fas fa-user"></i>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
它顯示以下輸出 −
bulma_form.htm
廣告