英雄组件允许您向您的网页添加一个全宽横幅，它还可以选择覆盖页面的全部高度。
此组件的基本要求是
-
hero作为主容器hero-body作为直接子元素，您可以在其中放置所有内容
要使全高英雄生效，您还需要一个hero-head和一个hero-foot。
赞助商
英雄
一个引人注目的英雄横幅，用于展示某些内容
示例
英雄标题
英雄副标题
HTML
<section class="hero">
<div class="hero-body">
<p class="title">Hero title</p>
<p class="subtitle">Hero subtitle</p>
</div>
</section>颜色 #
与按钮一样，您可以选择8 种不同颜色之一
示例
链接英雄
链接副标题
HTML
<section class="hero is-link">
<div class="hero-body">
<p class="title">Link hero</p>
<p class="subtitle">Link subtitle</p>
</div>
</section>示例
主要英雄
主要副标题
HTML
<section class="hero is-primary">
<div class="hero-body">
<p class="title">Primary hero</p>
<p class="subtitle">Primary subtitle</p>
</div>
</section>示例
信息英雄
信息副标题
HTML
<section class="hero is-info">
<div class="hero-body">
<p class="title">Info hero</p>
<p class="subtitle">Info subtitle</p>
</div>
</section>示例
成功英雄
成功副标题
HTML
<section class="hero is-success">
<div class="hero-body">
<p class="title">Success hero</p>
<p class="subtitle">Success subtitle</p>
</div>
</section>示例
警告英雄
警告副标题
HTML
<section class="hero is-warning">
<div class="hero-body">
<p class="title">Warning hero</p>
<p class="subtitle">Warning subtitle</p>
</div>
</section>示例
危险英雄
危险副标题
HTML
<section class="hero is-danger">
<div class="hero-body">
<p class="title">Danger hero</p>
<p class="subtitle">Danger subtitle</p>
</div>
</section>大小 #
通过使用5 种不同大小之一，您可以获得更令人印象深刻的横幅
is-smallis-mediumis-largeis-halfheightis-fullheight
示例
小英雄
小副标题
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>示例
中型英雄
中型副标题
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>示例
大英雄
大副标题
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>示例
半高英雄
半高副标题
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>示例
全高英雄
全高副标题
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>带导航栏的全高 #
如果您正在使用固定导航栏，则可以在英雄上使用is-fullheight-with-navbar修饰符，使其占据视口高度减去导航栏高度。
示例
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>分为 3 部分的全高英雄 #
要获得一个覆盖整个视口高度的英雄，您可以将其分成3 个垂直部分
-
英雄hero-head（始终在顶部）hero-body（始终垂直居中）hero-foot（始终在底部）
示例
标题
副标题
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.org.cn/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<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.org.cn/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroB">
<span></span>
<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.org.cn/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroC">
<span></span>
<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>Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|