Primary
All Public Private Sources Forks
组合面板(Panel)
可组合面板,用于紧凑控制
面板是多种类型的容器:
panel-heading
面板头,面板的第一个元素
panel-tabs
面板标签,通常是导航
panel-block
面板块,可以包含其他元素,例如:
control
表单控件input
输入框button
按钮panel-icon
图标面板块可以是链接或带有复选框的标签。
Example
HTML
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
mojs
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">
Reset all filters
</button>
</div>
</nav>
面板组件有$colors Sass映射定义的所有不同颜色。只需附加一个颜色修饰符。
例如,要使用primary color,请使用"panel is-primary"
作为类。
HTML
<article class="panel is-primary">
<p class="panel-heading">
Primary
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-primary" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
HTML
<article class="panel is-link">
<p class="panel-heading">
Link
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-link" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
HTML
<article class="panel is-info">
<p class="panel-heading">
Info
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-info" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
HTML
<article class="panel is-success">
<p class="panel-heading">
Success
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-success" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
HTML
<article class="panel is-warning">
<p class="panel-heading">
Warning
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-warning" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
HTML
<article class="panel is-danger">
<p class="panel-heading">
Danger
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-danger" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
$panel-margin
$block-spacing
1.5rem
$panel-item-border
1px solid $border-light
$panel-radius
$radius-large
6px
$panel-shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$panel-heading-background-color
$border-light
hsl(0, 0%, 93%)
$panel-heading-color
$text-strong
hsl(0, 0%, 21%)
$panel-heading-line-height
1.25
$panel-heading-padding
0.75em 1em
$panel-heading-radius
$radius
4px
$panel-heading-size
1.25em
$panel-heading-weight
$weight-bold
700
$panel-tabs-font-size
0.875em
$panel-tab-border-bottom
1px solid $border
$panel-tab-active-border-bottom-color
$link-active-border
hsl(0, 0%, 29%)
$panel-tab-active-color
$link-active
hsl(0, 0%, 21%)
$panel-list-item-color
$text
hsl(0, 0%, 29%)
$panel-list-item-hover-color
$link
hsl(229, 53%, 53%)
$panel-block-color
$text-strong
hsl(0, 0%, 21%)
$panel-block-hover-background-color
$background
hsl(0, 0%, 96%)
$panel-block-active-border-left-color
$link
hsl(229, 53%, 53%)
$panel-block-active-color
$link-active
hsl(0, 0%, 21%)
$panel-block-active-icon-color
$link
hsl(229, 53%, 53%)
$panel-icon-color
$text-light
hsl(0, 0%, 48%)
$panel-colors
$colors
Bulma colors