ブルマ-ヒーローバナー

説明

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">
                        finddevguides (Main title)
                     </h1>
                     <h2 class = "subtitle">
                        Online Learning (Subtitle)
                     </h2>
                  </div>
               </div>
            </section>

         </div>
      </section>
   </body>

</html>

以下の出力が表示されます-

勾配

Bulmaでは、_is-bold_修飾子を使用して指定した領域を塗りつぶすために使用される2つ以上の色の間の遷移を作成できます。

以下に示すように_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">finddevguides (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="finddevguides" src = "https://www.finddevguides.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">finddevguides (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-hero-banner

目次

ブルマ-ヒーローバナー

説明

勾配

フルハイトヒーロー