Bulma 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 修饰符为
gradients 创建一个简单的示例，如下所示-
<!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="lidihuo" src = "https://www.lidihuo.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-fullheightlarge 和
fullwidth我> 类。通过替换
section 标记中的
is-medium 类来使用这些类。
