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 修饰符。如果您想使用剩余的修饰符，则将这些修饰符与文章标签中的
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>
执行上面的代码，你会得到下面的输出-
