Bulma-elements-button
提供：Dev Guides
ブルマ-ボタン
説明
ボタン要素は、カスタムボタンスタイルとのユーザーインタラクションを提供し、フォーム、ダイアログのアクションとして使用でき、さまざまなタイプのサイズ、色、状態などをサポートします。 ボタンは、アンカーリンク、入力タグなどで_.button_クラスを使用してページに含めることができます。
色とサイズ
以下の例では、is-primary _、 is-info 、 is-link 、 is-success 、 is-warning 、 is-danger_などの色修飾子と、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 Buttons 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">
Buttons
</span>
<br>
<br>
<span class = "is-size-5">
Basic Buttons
</span>
<br>
<a class = "button">Anchor</a>
<button class = "button">Button</button>
<input class = "button" type = "submit" value = "Submit">
<br>
<br>
<span class = "is-size-5">
Button Colors
</span>
<br>
<a class = "button is-white">White</a>
<a class = "button is-light">Light</a>
<a class = "button is-dark">Dark</a>
<a class = "button is-black">Black</a>
<a class = "button is-text">Text</a>
<br>
<br>
<a class = "button is-primary">Primary</a>
<a class = "button is-link">Link</a>
<a class = "button is-info">Info</a>
<a class = "button is-success">Success</a>
<a class = "button is-warning">Warning</a>
<a class = "button is-danger">Danger</a>
<br>
<br>
<span class = "is-size-5">
Button Sizes
</span>
<br>
<a class = "button is-small">Small Button</a>
<a class = "button">Normal Button</a>
<a class = "button is-medium">Medium Button</a>
<a class = "button is-large">Large Button</a>
</div>
</section>
</body>
</html>以下の出力が表示されます-
スタイル
以下の例では、is-outlined _、 is-inverted 、 is-rounded_などのクラスとボタンの色修飾子を使用して、さまざまなタイプのスタイルを説明します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons 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">
Buttons Styles
</span>
<br>
<br>
<span class = "is-size-5">
Outlined Buttons
</span>
<br>
<a class = "button is-outlined">Outlined</a>
<a class = "button is-primary is-outlined">Outlined</a>
<a class = "button is-link is-outlined">Outlined</a>
<a class = "button is-info is-outlined">Outlined</a>
<a class = "button is-success is-outlined">Outlined</a>
<a class = "button is-danger is-outlined">Outlined</a>
<br>
<br>
<span class = "is-size-5">
Inverted Buttons (text color becomes background color, and vice-versa)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted">Inverted</a>
<a class = "button is-link is-inverted">Inverted</a>
<a class = "button is-info is-inverted">Inverted</a>
<a class = "button is-success is-inverted">Inverted</a>
<a class = "button is-danger is-inverted">Inverted</a>
</div>
</div>
</div>
<span class = "is-size-5">
Inverted Outlined Buttons (
invert color becomes the text and border colors)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-link is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-info is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-success is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-danger is-inverted is-outlined">Invert Outlined</a>
</div>
</div>
</div>
<span class = "is-size-5">
Rounded buttons
</span>
<br>
<br>
<a class = "button is-rounded">Rounded</a>
<a class = "button is-primary is-rounded">Rounded</a>
<a class = "button is-link is-rounded">Rounded</a>
<a class = "button is-info is-rounded">Rounded</a>
<a class = "button is-success is-rounded">Rounded</a>
<a class = "button is-danger is-rounded">Rounded</a>
</div>
</section>
</body>
</html>以下の出力が表示されます-
州
ボタンは、is-focused _、 is-active 、 is-loading_などのクラスと、以下の例で説明するアイコン付きのボタンを使用して、さまざまなタイプの状態で表示できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons 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">
Buttons States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Buttons
</span>
<br>
<a class = "button">Normal</a>
<a class = "button is-primary">Normal</a>
<a class = "button is-link">Normal</a>
<br>
<br>
<span class = "is-size-5">
Focus Buttons
</span>
<br>
<a class = "button is-focused">Focus</a>
<a class = "button is-primary is-focused">Focus</a>
<a class = "button is-link is-focused">Focus</a>
<br>
<br>
<span class = "is-size-5">
Active Buttons
</span>
<br>
<a class = "button is-active">Active</a>
<a class = "button is-primary is-active">Active</a>
<a class = "button is-link is-active">Active</a>
<br>
<br>
<span class = "is-size-5">
Loading buttons
</span>
<br>
<br>
<a class = "button is-loading">Loading</a>
<a class = "button is-primary is-loading">Loading</a>
<a class = "button is-link is-loading">Loading</a>
<br>
<br>
<span class = "is-size-5">
Disabled buttons
</span>
<br>
<br>
<a class = "button" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-primary" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-link" title = "Disabled button" disabled>Disabled</a>
<br>
<br>
<span class = "is-size-5">
Buttons with Icons
</span>
<br>
<br>
<p class = "buttons">
<a class = "button is-primary">
<span class = "icon">
<i class = "fab fa-youtube"></i>
</span>
<span>Youtube</span>
</a>
<a class = "button is-success">
<span class = "icon is-small">
<i class = "fas fa-bookmark"></i>
</span>
<span>Bookmark</span>
</a>
<a class = "button is-danger is-outlined">
<span>Delete</span>
<span class = "icon is-small">
<i class = "fas fa-trash"></i>
</span>
</a>
</p>
<span class = "is-size-5">
Buttons group with addons
</span>
<br>
<br>
<div class = "field has-addons">
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-bold"></i>
</span>
<span>Bold</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-italic"></i>
</span>
<span>Italic</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
