官網(wǎng)：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：網(wǎng)格的寬度由內容的寬度決定
is-centered：網(wǎng)格內容居中對齊
is-gapless：網(wǎng)格之間沒有間距
四分之三：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修飾類。
如果希望在不同設備沧踏，網(wǎng)格占據(jù)不同的寬度歌逢，可以像下面這樣寫。
<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：手機和平板隱藏翘狱，其他寬度顯示
