Bulma-elements-notification-progress-bars
提供：Dev Guides
Bulma-通知バーと進行状況バー
説明
Bulmaは、事前定義されたアラートメッセージを指定して、通知をブロックで表示します。 Bulmaは、通知を表示する_.notification_クラスを提供します。
以下の例は、色修飾子（is-primary _、 is-link 、 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 Elements 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">
Basic Notification
</span>
<br>
<div class = "notification">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<br>
<span class = "is-size-5">
Notification Colors
</span>
<br>
<div class = "notification is-primary">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<div class = "notification is-link">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<div class = "notification is-info">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<div class = "notification is-success">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<div class = "notification is-warning">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
<div class = "notification is-danger">
<button class = "delete"></button>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
プログレスバー
進行状況バーは、作業の進行状況（ダウンロードプロセスなど）を指定するために使用されます。
以下の例は、プログレスバーの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Basic Progress Bar
</span>
<br>
<progress class = "progress" value="15" max = "100">15%</progress>
<span class = "is-size-5">
Colors of Progress Bars
</span>
<br>
<progress class = "progress is-primary" value = "15" max = "100">20%</progress>
<progress class = "progress is-link" value = "30" max = "100">35%</progress>
<progress class = "progress is-info" value = "45" max = "100">50%</progress>
<progress class = "progress is-success" value = "15" max = "100">65%</progress>
<progress class = "progress is-warning" value = "30" max = "100">70%</progress>
<progress class = "progress is-danger" value = "45" max = "100">95%</progress>
<span class = "is-size-5">
Sizes of Progress Bars
</span>
<br>
<progress class = "progress is-small" value = "25" max = "100">15%</progress>
<progress class = "progress" value = "40" max = "100">30%</progress>
<progress class = "progress is-medium" value = "50" max = "100">45%</progress>
<progress class = "progress is-large" value = "70" max = "100">60%</progress>
</div>
</section>
</body>
</html>以下の出力が表示されます-
