使用hero组件,您可以在网页上添加全宽横幅,该横幅也可以选择覆盖页面的整个高度。
该组件的基本要求是:
-
hero
作为主要容器-
hero-body
作为直接的子元素,您可以在其中放置所有内容。
-
要使 全高 hero工作, 您还需要一个 hero-head
和一个 hero-foot
.
Hero
An imposing hero banner to showcase something
使用hero组件,您可以在网页上添加全宽横幅,该横幅也可以选择覆盖页面的整个高度。
该组件的基本要求是:
hero
作为主要容器
hero-body
作为直接的子元素,您可以在其中放置所有内容。
要使 全高 hero工作, 您还需要一个 hero-head
和一个 hero-foot
.
示例
Hero title
Hero subtitle
HTML
<section class="hero">
<div class="hero-body">
<p class="title">
Hero title
</p>
<p class="subtitle">
Hero subtitle
</p>
</div>
</section>
示例
Primary hero
Primary subtitle
HTML
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Primary hero
</p>
<p class="subtitle">
Primary subtitle
</p>
</div>
</section>
示例
Link hero
Link subtitle
HTML
<section class="hero is-link">
<div class="hero-body">
<p class="title">
Link hero
</p>
<p class="subtitle">
Link subtitle
</p>
</div>
</section>
示例
Info hero
Info subtitle
HTML
<section class="hero is-info">
<div class="hero-body">
<p class="title">
Info hero
</p>
<p class="subtitle">
Info subtitle
</p>
</div>
</section>
示例
Success hero
Success subtitle
HTML
<section class="hero is-success">
<div class="hero-body">
<p class="title">
Success hero
</p>
<p class="subtitle">
Success subtitle
</p>
</div>
</section>
示例
Warning hero
Warning subtitle
HTML
<section class="hero is-warning">
<div class="hero-body">
<p class="title">
Warning hero
</p>
<p class="subtitle">
Warning subtitle
</p>
</div>
</section>
示例
Danger hero
Danger subtitle
HTML
<section class="hero is-danger">
<div class="hero-body">
<p class="title">
Danger hero
</p>
<p class="subtitle">
Danger subtitle
</p>
</div>
</section>
You can have even more imposing banners by using one of 5 different sizes:
is-small
is-medium
is-large
is-halfheight
is-fullheight
示例
Small hero
Small subtitle
HTML
<section class="hero is-small is-primary">
<div class="hero-body">
<p class="title">
Small hero
</p>
<p class="subtitle">
Small subtitle
</p>
</div>
</section>
示例
Medium hero
Medium subtitle
HTML
<section class="hero is-medium is-link">
<div class="hero-body">
<p class="title">
Medium hero
</p>
<p class="subtitle">
Medium subtitle
</p>
</div>
</section>
示例
Large hero
Large subtitle
HTML
<section class="hero is-large is-info">
<div class="hero-body">
<p class="title">
Large hero
</p>
<p class="subtitle">
Large subtitle
</p>
</div>
</section>
示例
Half height hero
Half height subtitle
HTML
<section class="hero is-success is-halfheight">
<div class="hero-body">
<div class="">
<p class="title">
Half height hero
</p>
<p class="subtitle">
Half height subtitle
</p>
</div>
</div>
</section>
示例
Fullheight hero
Fullheight subtitle
HTML
<section class="hero is-danger is-fullheight">
<div class="hero-body">
<div class="">
<p class="title">
Fullheight hero
</p>
<p class="subtitle">
Fullheight subtitle
</p>
</div>
</div>
</section>
If you are using a fixed navbar, you can use the is-fullheight-with-navbar
modifier on the hero for it to occupy the viewport height minus the navbar height.
示例
HTML
<nav class="navbar">
<div class="container">
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">Github</a>
<a class="button is-link">Download</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-link is-fullheight-with-navbar">
<div class="hero-body">
<p class="title">
Fullheight hero with navbar
</p>
</div>
</section>
To obtain a hero that will cover the whole height of the viewport, you can split it in 3 vertical parts:
hero
hero-head
(always at the top)hero-body
(always vertically centered)hero-foot
(always at the bottom)HTML
<section class="hero is-primary is-medium">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.zcopy.site/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" 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-primary is-inverted">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<nav class="tabs">
<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>
HTML
<section class="hero is-info is-large">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.zcopy.site/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroB" 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-info is-inverted">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
</div>
</div>
<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>
HTML
<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://bulma.zcopy.site/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-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">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
</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>
$hero-body-padding
3rem 1.5rem
$hero-body-padding-tablet
3rem 3rem
$hero-body-padding-small
1.5rem
$hero-body-padding-medium
9rem 4.5rem
$hero-body-padding-large
18rem 6rem
$hero-colors
$colors
Bulma colors