Bulma - 消息
描述
Bulma 通过使用 article 标签中的 message 类，提供消息块来增强页面外观。Bulma 还允许使用不同类型的修饰符(例如 is-dark、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 = "title">
Message Block
</span>
<br>
<br>
<article class = "message">
<div class = "message-header">
<p>Basic Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<br>
<br>
<span class = "title">
Message Block Colors
</span>
<br>
<br>
<article class = "message is-primary">
<div class = "message-header">
<p>Primary Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-header">
<p>Link Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text .This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-header">
<p>Info Message Box</p>
<button class = "delete" aria-label="delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>
它显示以下输出 −
在上面的例子中，我们仅使用了 is-primary、is-link、is-info 修饰符。如果您想要使用剩余的修饰符，则将这些修饰符与 article 标签中的 message 类一起使用。
消息正文
您可以仅显示消息正文而不包含 message-header 修饰符，如以下示例所示 −
<!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 = "title">
Message Body
</span>
<br>
<br>
<article class = "message">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-primary">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</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 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 = "title">
Message Block Sizes
</span>
<br>
<br>
<article class = "message is-small">
<div class = "message-header">
<p>Small Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-medium">
<div class = "message-header">
<p>Medium Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-large">
<div class = "message-header">
<p>Large Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>
执行上述代码，您将得到以下输出 −
bulma_components.html
