New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

Panel

一个可组合的 面板,用于控制紧凑的内容

Colors No
Sizes No
Variables Yes

panel 有这几种类型的容器:

  • panel-heading 第一个子元素
  • panel-tabs 用于导航
  • panel-block 可以包含其他元素,例如:
    • control
    • input
    • button
    • panel-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>

Variables | 变量 #

你可以使用 这些变量自定义 这些 component。只需要在导入 Bulma 之前设置这些变量 学习如何开始.

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

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!