panel 有这几种类型的容器:
-
panel-heading第一个子元素 -
panel-tabs用于导航 -
panel-block可以包含其他元素,例如:controlinputbuttonpanel-icon
panel-block 可以是一个锚标签 <a> 或包含一个复选框 <label> 的标签。
文档
当你使用 Bulma 创建一个网站 所需要的一切
panel 有这几种类型的容器:
panel-heading 第一个子元素
panel-tabs 用于导航
panel-block 可以包含其他元素,例如:
controlinputbuttonpanel-icon
panel-block 可以是一个锚标签 <a> 或包含一个复选框 <label> 的标签。
<nav class="panel">
<p class="panel-heading">
repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-small" type="text" placeholder="search">
<span class="icon is-small is-left">
<i class="fas fa-search"></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"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch"></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>| Name | Default value |
|---|---|
| Name | Default value |
$panel-item-border
|
1px solid $border
|
$panel-heading-background-color
|
$background
|
$panel-heading-color
|
$text-strong
|
$panel-heading-line-height
|
1.25
|
$panel-heading-padding
|
0.5em 0.75em
|
$panel-heading-radius
|
$radius
|
$panel-heading-size
|
1.25em
|
$panel-heading-weight
|
$weight-light
|
$panel-tab-border-bottom
|
1px solid $border
|
$panel-tab-active-border-bottom-color
|
$link-active-border
|
$panel-tab-active-color
|
$link-active
|
$panel-list-item-color
|
$text
|
$panel-list-item-hover-color
|
$link
|
$panel-block-color
|
$text-strong
|
$panel-block-hover-background-color
|
$background
|
$panel-block-active-border-left-color
|
$link
|
$panel-block-active-color
|
$link-active
|
$panel-block-active-icon-color
|
$link
|
$panel-icon-color
|
$text-light
|
这是一个 开源项目.
错别字? Or 有疑问?
在GitHub上改进这个页面。
Bulma Partners
Check out their products!