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