Bulma布局

2020-10-10 19:49发布

容器

使用container类将内容居中显示,一般用于:

  • .navbar

  • .hero

  • .section

  • .footer

<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>

 

<div class="container is-fluid">
  <div class="notification">
    This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
    viewport size.
  </div>
</div>


Level元素居中显示

不涉及到level-left和level-right的部分,level直接包含level-item的,都可以居中显示。


媒体对象(最多嵌套三层)

media,media-left,media-right,media-content

<article class="media">
 <figure class="media-left">
   <p class="image is-64x64">
     <img src="https://bulma.io/images/placeholders/128x128.png">
   </p>
 </figure>
 <div class="media-content">
   <div class="content">
     <p>
       <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
       <br>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
     </p>
   </div>
   <nav class="level is-mobile">
     <div class="level-left">
       <a class="level-item">
         <span class="icon is-small"><i class="fas fa-reply"></i></span>
       </a>
       <a class="level-item">
         <span class="icon is-small"><i class="fas fa-retweet"></i></span>
       </a>
       <a class="level-item">
         <span class="icon is-small"><i class="fas fa-heart"></i></span>
       </a>
     </div>
   </nav>
 </div>
 <div class="media-right">
   <button class="delete"></button>
 </div>
</article>



 英雄横幅

使用hero作为主类,hero-body作为直接子类

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

设置英雄画幅的颜色(is-primary)

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

 

 

 

 

 

设置英雄画幅的大小(is-medium,is-large,is-fullheight)

 

<section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Medium title
      </h1>
      <h2 class="subtitle">
        Medium subtitle
      </h2>
    </div>
  </div>
</section>

is-fullheight-with-navbar 


 英雄画幅分三部分(hero-head,hero-body,hero-foot)

<section class="hero is-success is-fullheight">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://lqzhgood.github.io/bulma-docs-cn/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-success is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>
 
  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </div>
  </div>
 
  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>
[object Object][object Object]


 页脚

卡片

使用卡片可以任意构建你喜欢的卡片样式

  • is-ancestor

  • is-parent

  • is-child

  •  

  • is-vertical

<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="https://lqzhgood.github.io/bulma-docs-cn/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
</div>
 tile有三个级别的上下文:is-ancestor,is-parent,is-child
 有一个方向修饰:is-vertical
 有十二种水平尺寸:is-1~~~~~is-12

作者:dayAndnight2018
链接:https://blog.csdn.net/Day_and_Night_2017/article/details/85261509
来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。