通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻项目构建教程学习 CSS。
下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 辅助类

赞助

Route Planner and Route Optimizer

通知

粗体 通知 块，用于提醒用户某些事情

通知是一个简单的彩色块，旨在引起用户对某些事情的注意。 因此，它可以用作视口角落中的固定通知。 这就是它支持使用 delete 元素的原因。

示例

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
  nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
  et dictum <a>felis venenatis</a> efficitur.
</div>

颜色 #

通知元素可用于 $colors Sass map 定义的所有 不同颜色 。

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-link">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-primary">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-info">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-success">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-warning">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-danger">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

浅色 #

每种颜色都有其 浅色 版本。 只需添加 is-light 修饰符即可获得通知的浅色版本。

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-link is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-primary is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-info is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-success is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-warning is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML 

<div class="notification is-danger is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

JavaScript 示例 #

Bulma 包 不附带任何 JavaScript。 但是，这是一个实现示例，它为页面上任何位置的 Bulma delete 元素设置 click 处理程序，使用原生 JavaScript。

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum
</div>
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;

    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值
 
$notification-code-background-color
 
var(--bulma-notification-code-background-color)
 
var(--bulma-scheme-main)
 
$notification-radius
 
var(--bulma-notification-radius)
 
var(--bulma-radius)
 
$notification-padding
 
var(--bulma-notification-padding)
 
1.375em 1.5em

如何支持 Bulma

一次性 捐赠

通过以下方式进行 浏览器测试

访问我们的 赞助商

每月 捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用