容器
使用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 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。