热门关键词:

深信服布尔玛消息颜色

添加时间:2022-02-08 20:15:00

来源:

浏览:

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度响应的。它使用类来实现其设计。


Bulma Message 组件用于提供彩色消息块以强调页面的一部分。它是一个多部分组件。 


它主要包含三个部分——


消息容器

消息头

邮件正文

Bulma 消息颜色功能用于为消息组件添加不同的颜色。用于颜色特征的类如下:


is-dark:该类用于将消息容器的颜色设置为深棕色。

is-primary:该类用于将消息容器的颜色设置为浅青色。

is-link:该类用于设置消息容器的颜色为蓝色。

is-info:该类用于设置消息容器的颜色为浅蓝色。

is-success:该类用于设置消息容器的颜色为绿色。

is-warning:该类用于设置消息容器的颜色为黄色。

is-danger:该类用于设置消息容器的颜色为红色。

句法:


<article class="message is-dark ">

  <div class="message-header">

    <!-- 消息头内容-->

  </div>

  <div class="message-body">

      <!-- 消息正文内容 -->  

  </div>

</文章>

例子:



<!DOCTYPE html>

<html>

  

<head>

    <title>Bulma Message Colors</title>

  

    <!-- Include Bulma CSS -->

    <link rel='stylesheet' href=

'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>

</head>

  

<body>

    <div class='content container has-text-justified'>

        <div class='columns is-mobile is-centered'>

            <div class='column is-8'>

                <h1 class="has-text-success 

                    has-text-centered">GeeksforGeeks

                </h1>

  

                <h3 class="has-text-centered">

                    Bulma Message Colors

                </h3>

  

                <article class="message is-dark">

                    <div class="message-header">

                        <p>GeeksforGeeks - Dark Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-primary">

                    <div class="message-header">

                        <p>GeeksforGeeks - Primary Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-link">

                    <div class="message-header">

                        <p>GeeksforGeeks - Link Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-info">

                    <div class="message-header">

                        <p>GeeksforGeeks - Info Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-success">

                    <div class="message-header">

                        <p>GeeksforGeeks - Success Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-warning">

                    <div class="message-header">

                        <p>GeeksforGeeks - Warning Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

  

                <article class="message is-danger">

                    <div class="message-header">

                        <p>GeeksforGeeks - Danger Message Color</p>

                        <button class="delete" aria-label="delete">

                        </button>

                    </div>

                    <div class="message-body">

                        <strong>'GeeksforGeeks'</strong> is

                        a computer science portal.it was

                        created with a goal in mind to

                        provide well written, well thought

                        and well explained solutions for

                        selected questions. The core team

                        of five super geeks constituting

                        of technology lovers and computer

                        science enthusiasts have been

                        constantly working in this direction.

                    </div>

                </article>

            </div>

        </div>

    </div>

</body>

  

</html>



用户名 Name
评论 Comment

深信服  相关内容

——
27

2022-02

C中的UDP服务器-客户端实现

主机之间通信有两种主要的传输层协议:TCP和UDP。创建 TCP Server/Client 已在上一篇文章中讨论过。先决条件:创建 TCP 服务器/客户端理论在 UDP 中,客户端不会像 TCP 那样与服务器形成连接,而只是发送数据报。同样,服务器不需要接受连接,只是等待数据报… [了解更多]

27

2022-02

TCP 和 UDP 的区别

基础传输控制协议 (TCP)用户数据报协议 (UDP)服务类型TCP 是一种面向连接的协议。面向连接的意思是通信设备在传输数据之前应该建立连接,在传输数据之后应该关闭连接。UDP是面向数据报的协议。这是因为打开连接、维护连接和终止连接没有开销。UDP 对于广播和多播类型的网络传输… [了解更多]

24

2022-02

网络钓鱼

浏览电子邮件的“垃圾邮件”部分。你看到了什么??您可能已经赢得了一辆全新的奥迪,或者您甚至没有购买的彩票中了令人难以置信的金额,要求您提供信用卡详细信息。或者您的银行可能会紧急要求通过电子邮件验证您的帐户详细信息。您是否在垃圾邮件部分看到与上述情况类似的情况?这就是网络钓鱼出现的… [了解更多]

24

2022-02

网络足迹

足迹意味着收集有关可用于执行成功网络攻击的目标系统的信息。为了获取此信息,黑客可能会使用各种方法和变体工具。这些信息是黑客破解系统的第一条道路。有以下两种类型的脚印。主动足迹:主动足迹意味着通过直接接触目标机器来执行足迹。被动足迹:被动足迹是指收集远离攻击者的系统的信息。可以从足… [了解更多]

24

2022-02

信息安全中的信息分类

在当今世界,信息是我们生活的重要组成部分之一。在此,我们将讨论基于不同组织和不同参数的信息分类。组织中的信息应该分类并且必须保密,这就是信息安全出现的原因,它对任何组织都起着至关重要的作用。对信息进行分类的主要原因是,并非所有数据/信息对组织都具有相同的重要性或相同的相关性/关键… [了解更多]

关注

深信服

  • 地 址:成都市人民南路四段成科西路三号 863国家孵化园
  • 电 话:18215 660330
  • 手机:18215 660330
  • 传 真:18215 660330
  • 邮 箱:179001057@qq.com
  • 邮政编码:610000