2.6 块布局

块容器是一种简单的间隔工具。它允许同级HTML元素之间具有一致的边距。除了最后一个之外,它对所有同级应用增加了一个底部边距margin-bottom。这样可以防止最后一个同级在底部添加不必要的空间。

块容器可以包含任何内容。

以下的元素都默认使用了块元属性:

breadcrumb、level、message、pagination、tabs、box、content、notification、other、progress、table、title。

块容器的使用很简单,以下是一个简单的用法,

<div class="block">
          此文本位于块内。.
  </div>

下面是个综合实例,里面的代码现在不需要关注,只看效果就好了。


没有使用block

30%
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

使用了 block

30%
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
<div class="columns is-size-6">
    <div class="column">
      
  <p class="title mb-0">没有使用block</p>
  <div class="block mb-0">
    <div class="field is-grouped">
      <div class="control is-expanded">
        <input class="input" type="text" placeholder="Text input">
      </div>
      <div class="control">
        <button class="button is-primary">Button</button>
      </div>
    </div>
  </div>
  <nav class="pagination mb-0" role="navigation" aria-label="pagination">
    <a class="pagination-previous" title="This is the first page" disabled="">Previous</a>
    <a class="pagination-next">Next page</a>
    <ul class="pagination-list">
      <li>
        <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
      </li>
      <li>
        <a class="pagination-link" aria-label="Goto page 2">2</a>
      </li>
      <li>
        <a class="pagination-link" aria-label="Goto page 3">3</a>
      </li>
    </ul>
  </nav>
  <progress class="progress is-success mb-0" value="30" max="100">30%</progress>
  <div class="notification is-warning mb-0">
    <button class="delete"></button>
    Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>
  <article class="message is-danger mb-0">
    <div class="message-header">
      <p>Error</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
  </article>
  
    </div>
    <div class="column">
      
  <p class="title">使用了 block</p>
  <div class="block">
    <div class="field is-grouped">
      <div class="control is-expanded">
        <input class="input" type="text" placeholder="Text input">
      </div>
      <div class="control">
        <button class="button is-primary">Button</button>
      </div>
    </div>
  </div>
  <nav class="pagination" role="navigation" aria-label="pagination">
    <a class="pagination-previous" title="This is the first page" disabled="">Previous</a>
    <a class="pagination-next">Next page</a>
    <ul class="pagination-list">
      <li>
        <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
      </li>
      <li>
        <a class="pagination-link" aria-label="Goto page 2">2</a>
      </li>
      <li>
        <a class="pagination-link" aria-label="Goto page 3">3</a>
      </li>
    </ul>
  </nav>
  <progress class="progress is-success" value="30" max="100">30%</progress>
  <div class="notification is-warning">
    <button class="delete"></button>
    Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>
  <article class="message is-danger">
    <div class="message-header">
      <p>Error</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
  </article>
  
    </div>
</div>


返回头部

问题反馈
返回顶部