bulma 的语法

官网：https://bulma.io/

debug.css

/*! debug.css | MIT License | zaydek.github.com/debug.css */
*:not(path):not(g) {
    color: hsla(210, 100%, 100%, 0.9) !important;
    background: hsla(210, 100%,  50%, 0.5) !important;
    outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;
}

浮动

is-clearfix     清除元素的浮动
is-pulled-left  将元素向左移动
is-pulled-right 将元素向右移动

间距

is-marginless   删除margin
is-paddingless  删除任何填充

其他

is-overlay  完全覆盖第一个定位的父母
is-clipped  添加溢出隐藏
is-radiusless   删除任何半径
is-shadowless   删除任何阴影
is-unselectable 防止文本被选中
is-invisible    添加隐藏的可见性
is-sr-only  可视地隐藏元素，但保持元素可供屏幕阅读器宣布

is-0将删除任何差距（类似于is-gapless）
is-3是默认值，等于该0.75rem值
is-8 是最大的差距 2rem
is-gapless删除列之间的空格，请is-gapless在columns容器上添加修饰符

文字颜色

has-text-white  hsl(0, 0%, 100%)
has-text-black  hsl(0, 0%, 4%)
has-text-light  hsl(0, 0%, 96%)
has-text-dark   hsl(0, 0%, 21%)
has-text-primary    hsl(171, 100%, 41%)
has-text-info   hsl(204, 86%, 53%)
has-text-link   hsl(217, 71%, 53%)
has-text-success    hsl(141, 71%, 48%)
has-text-warning    hsl(48, 100%, 67%)
has-text-danger hsl(348, 100%, 61%)
has-text-black-bis  hsl(0, 0%, 7%)
has-text-black-ter  hsl(0, 0%, 14%)
has-text-grey-darker    hsl(0, 0%, 21%)
has-text-grey-dark  hsl(0, 0%, 29%)
has-text-grey   hsl(0, 0%, 48%)
has-text-grey-light hsl(0, 0%, 71%)
has-text-grey-lighter   hsl(0, 0%, 86%)
has-text-white-ter  hsl(0, 0%, 96%)
has-text-white-bis  hsl(0, 0%, 98%)

背景颜色

has-background-white    hsl(0, 0%, 100%)
has-background-black    hsl(0, 0%, 4%)
has-background-light    hsl(0, 0%, 96%)
has-background-dark hsl(0, 0%, 21%)
has-background-primary  hsl(171, 100%, 41%)
has-background-info hsl(204, 86%, 53%)
has-background-link hsl(217, 71%, 53%)
has-background-success  hsl(141, 71%, 48%)
has-background-warning  hsl(48, 100%, 67%)
has-background-danger   hsl(348, 100%, 61%)
has-background-black-bis    hsl(0, 0%, 7%)
has-background-black-ter    hsl(0, 0%, 14%)
has-background-grey-darker  hsl(0, 0%, 21%)
has-background-grey-dark    hsl(0, 0%, 29%)
has-background-grey hsl(0, 0%, 48%)
has-background-grey-light   hsl(0, 0%, 71%)
has-background-grey-lighter hsl(0, 0%, 86%)
has-background-white-ter    hsl(0, 0%, 96%)
has-background-white-bis    hsl(0, 0%, 98%)

居中

has-text-centered   使文本居中
has-text-justified  使文本合理
has-text-left   使文本与左侧对齐
has-text-right  使文本向右对齐

响应对齐

类                      移动最多768px       平板电脑之间769px和1023px   桌面之间1024px和1215px   宽屏和之间1216px1407px   全高清1408px及以上
has-text-left-mobile         左对齐                    不变                   不变                    不变                   不变

has-text-left-tablet          不变                     左对齐                 左对齐                   左对齐                 左对齐

has-text-left-tablet-only     不变                     左对齐                  不变                    不变                   不变

has-text-left-touch          左对齐                     左对齐                 不变                    不变                   不变  

has-text-left-desktop          不变                     不变                  左对齐                  左对齐                 左对齐

has-text-left-desktop-only     不变                     不变                    不变                    左对齐                 不变

has-text-left-widescreen       不变                     不变                    不变                    左对齐                 左对齐

has-text-left-widescreen-only  不变                     不变                    不变                    左对齐                 不变

has-text-left-fullhd           不变                     不变                    不变                    不变                   左对齐  

文字转型

// 您可以使用4个文本转换助手之一来转换文本
is-capitalized  将每个单词的第一个字符转换为大写
is-lowercase    将所有字符转换为小写
is-uppercase    将所有字符转换为大写
is-italic   将所有字符转换为斜体

文字重量

has-text-weight-light   将文本权重转换为光
has-text-weight-normal  将文本权重转换为正常
has-text-weight-semibold    将文本权重转换为半粗体
has-text-weight-bold    将文本权重转换为粗体`

对于大小修饰符，您可以为不同的断点设置窄列：

.is-narrow-mobile
.is-narrow-tablet
.is-narrow-touch
.is-narrow-desktop
.is-narrow-widescreen
.is-narrow-fullhd

column间隙

is-0将删除任何差距（类似于is-gapless）
is-3是默认值，等于该0.75rem值
is-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8

column间隙以及设备

is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd

垂直对齐列 请将is-vcentered修改器添加到columns容器中。

<div class="columns is-vcentered"></div>

每当您想要开始一个新行时，您可以关闭一个columns容器并开始一个新容器。但是您也可以添加is-multiline修饰符并添加比单行中更多的列元素。

<div class="columns is-multiline is-mobile"></div>

图片的最大宽度。居中center

<figure class="image center">
    <img src="images/bulma-logo-white.png" style="max-width: 256px;">
</figure>

<div class="column">
    <div class="notification"> // 背景颜色
        <p class="is-size-5"> // 字体大小
            Bulma is a modern CSS framework from @jgthms, based on Flexbox.
            Using Bulma, we can describe our website's design using just classes. ᕕ( ᐛ )ᕗ
        </p>
    </div>
</div>
<div class="column is-one-third"> // is-one-third一排显示三行
</div>

字体的适配

@media (max-width: 672px) {
    :root {
        font-size: 90%;
    }
}   

背景图片适配

@media (max-width: 1024px) { .hero { background: black url(images/hero-2.jpg) center / cover; } }
@media (max-width:  768px) { .hero { background: black url(images/hero-3.jpg) center / cover; } }

right 图标

<div class="column right">
    <p class="navbar-item has-text-black desktop">SHOP     </p>
    <p class="navbar-item has-text-black desktop">SIGN IN  </p>
    <figure class="navbar-item image has-text-black">
        <i class="fas fa-bars" style="width: 1rem; height: 1rem;"></i>
    </figure>
</div>

grid.css

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }

#grid {
    display: grid;
    grid-template-areas:
        "a a a a"
        "b c d e";

    grid-row-gap: 1rem;
}

@media (max-width: 512px) {
    #grid {
        grid-template-areas:
            "a a a"
            "b c d"
            "e e e";
    }
}

<main class="hero-foot center" style="padding: 2rem;">
    <div id="grid" style="width: 768px;">
        <div id="a" class="center-column">
            <p class="has-text-centered has-text-white">
                ​The quickest car in the world, with record-setting<br>
                acceleration, range and performance.
            </p>
        </div>
        <div id="b" class="center-column">
            <p class="title has-text-white">
                <i class="fas fa-tachometer-alt has-text-grey-light"
                    style="width: 0.75em; height: 0.75em;"></i>
                1.9<span class="is-size-5">s</span>
            </p>
            <p class="subtitle has-text-white is-7">0-60 mph</p>
        </div>
        <div id="c" class="center-column" style="border-left: 1px solid gray;">
            <p class="title has-text-white"><span class="is-size-5">+</span>250<span class="is-size-5">mph</span></p>
            <p class="subtitle is-7 has-text-white">Top Speed</p>
        </div>
        <div id="d" class="center-column" style="border-left: 1px solid gray;">
            <p class="title has-text-white">620</span><span class="is-size-5">mi</span></p>
            <p class="subtitle is-7 has-text-white">Mile Range</p>
        </div>
        <div id="e" class="center-column">
            <a class="button is-danger is-inverted is-rounded is-outlined has-text-weight-bold"
                style="width: 100%; border: 0.15em solid white;">
                Reserve Now
            </a>
        </div>
    </div>
</main>

dom操作方法

(document.getElementById("navbarCounterNetwork").classList.add("is-active");
document.getElementById("nav-toggle").classList.remove("is-active"))

is-narrow：网格的宽度由内容的宽度决定
is-centered：网格内容居中对齐
is-gapless：网格之间没有间距

四分之三：is-three-quarters
四分之一： is-one-quarter
三分之二：is-two-thirds
三分之一：is-one-third
二分之一：is-half
五分之四：is-four-fifths
五分之三：is-three-fifths
五分之二：is-two-fifths
五分之一：is-one-fifth

如果希望手机和平板是垂直堆叠，其他宽度平铺，可以使用is-desktop修饰类。

如果希望在不同设备，网格占据不同的宽度，可以像下面这样写。

<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>

is-hidden-mobile：只在手机隐藏
is-hidden-tablet-only：只在平板隐藏
is-hidden-desktop-only ：只在桌面隐藏
is-hidden-touch：手机和平板隐藏，其他宽度显示