bulma 的语法
2019-04-28 本文已影响0人
LH8966
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：手机和平板隐藏，其他宽度显示
