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容器中。

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

图片的最大宽度。居中center

// 背景颜色

// 字体大小 Bulma is a modern CSS framework from @jgthms, based on Flexbox. Using Bulma, we can describe our website's design using just classes. ᕕ( ᐛ )ᕗ

// is-one-third一排显示三行

字体的适配

@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 图标

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";
    }
}

​The quickest car in the world, with record-setting
acceleration, range and performance.

1.9s

0-60 mph

+250mph

Top Speed

620mi

Mile Range

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修饰类。

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

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

你可能感兴趣的:(bulma 的语法)