Bulma - Hero banner
描述
Bulma 提供英雄横幅，以将全宽横幅指定到网页。Bulma 使用 hero 类作为容器，使用 hero-body 作为子项，您可以在其中添加页面内容。
让我们使用 hero 类创建一个简单的英雄横幅示例，如下所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Hero Banner Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Hero Banner
</span>
<br>
<br>
<section class = "hero is-info">
<div class = "hero-body">
<div class = "container">
<h1 class = "title">
Tutorialspoint (Main title)
</h1>
<h2 class = "subtitle">
Online Learning (Subtitle)
</h2>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
它显示以下输出 −
渐变
Bulma 允许在两种或多种颜色之间创建过渡，这些过渡用于通过使用 is-bold 修饰符填充指定区域。
让我们使用 is-bold 修饰符为 渐变 创建一个简单的示例，如下所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Hero Banner Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Gradients
</span>
<br>
<br>
<section class = "hero is-warning is-bold">
<div class = "hero-body">
<div class = "container">
<h1 class = "title">Tutorialspoint (Main title)</h1>
<h2 class = "subtitle">Online Learning (Subtitle)</h2>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
它显示以下输出 −
全高英雄
全高英雄横幅包含 3 个垂直部分 −
hero-head − 它指定英雄横幅的顶部。
hero-body − 它指定英雄横幅的主体部分，垂直居中。
hero-foot − 它指定英雄横幅的底部。
以下示例指定了全高英雄的上述 3 个部分的用法，如下所示 −
注意 − 调整编码地面输出窗口的大小以查看根据窗口大小发生的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Hero Banner Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Full Height Hero
</span>
<br>
<br>
<section class = "hero is-primary is-medium">
<!-- Hero head at the top -->
<div class = "hero-head">
<nav class = "navbar">
<div class = "container">
<div class = "navbar-brand">
<a class = "navbar-item">
<img alt="tutorialspoint" src = "https://www.tutorialspoint.com/bootstrap/images/logo.png" height = "300" width = "200">
</a>
<span class = "navbar-burger burger" data-target = "navbarmenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id = "navbarmenu" class = "navbar-menu">
<div class = "navbar-end">
<a class = "navbar-item is-active">Home</a>
<a class = "navbar-item">AboutUs</a>
<a class = "navbar-item">Services</a>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero content in the middle -->
<div class = "hero-body">
<div class = "container has-text-centered">
<h1 class = "title">Tutorialspoint (Main title)</h1>
<h2 class = "subtitle">Online Learning (Subtitle)</h2>
</div>
</div>
<!-- Hero footer at the bottom -->
<div class = "hero-foot is-info">
<nav class = "tabs">
<div class = "container">
<ul>
<li class = "is-active"><a>Help</a></li>
<li><a>FAQ's</a></li>
<li><a>Privacy</a></li>
<li><a>Feedback</a></li>
<li><a>Terms</a></li>
</ul>
</div>
</nav>
</div>
</section>
</div>
</section>
</body>
</html>
它显示以下输出 −
您还可以使用 is-large 和 is-fullheight 类将全高英雄显示为 large 和 fullwidth。通过替换 section 标签中的 is-medium 类来使用这些类。
bulma_layout.html
