Bulma - 首屏横幅

描述

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://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.htm

打印页面