- Bulma 教程
- Bulma - 首页
- Bulma - 简介
- Bulma - 概述
- Bulma - 修饰符
- Bulma - 列
- Bulma - 布局
- Bulma - 表单
- Bulma - 元素
- Bulma - 组件
- Bulma 实用资源
- Bulma - 快速指南
- Bulma - 资源
- Bulma - 讨论
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.htm
广告