Bulma - 導航欄

上一頁
下一頁

描述

導航欄是響應式元件，用作網站的導航標題。

導航欄元件包含以下結構 -

  • navbar -

    • navbar-brand - 它包含<a>標籤元素，其中包含一些連結或徽標。

      • navbar-burger - 它是一個漢堡圖示，在小型裝置（例如手機）上切換導航欄選單。

    • navbar-menu - 它是一個右側選單，在桌面裝置上可見，在小型裝置上隱藏。

      • navbar-start - 它出現在選單的左側。

      • navbar-end - 它出現在選單的右側。

        • navbar-item - 它指定導航欄的單個專案。

          • navbar-link - 它指定下拉箭頭。

          • navbar-dropdown - 它指定帶有導航欄專案和分隔符的下拉選單。

            • navbar-divider - 它指定水平線以分隔下拉專案。

以下示例演示了Navbar元件上述元素的使用 -

即時演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Simple Navbar
            </span>
            <br>
            <br>
            
            <nav class = "navbar">
               <div class = "navbar-brand">
                  <a class = "navbar-item" href = "#">TutorialsPoint</a>
                  <div class = "navbar-burger burger" data-target="navbarExample">
                     <span></span>
                     <span></span>
                     <span></span>
                  </div>
               </div>
               <div id = "navbarExample" class = "navbar-menu">
                  <div class = "navbar-start">
                     <a class = "navbar-item" href = "https://bulma.io/">Home</a>
                     <div class = "navbar-item has-dropdown is-hoverable">
                        <a class = "navbar-link" href = "#">Programming Languages</a>
                        <div class = "navbar-dropdown is-boxed">
                           <a class = "navbar-item" href = "#">JavaScript</a>
                           <a class = "navbar-item" href = "#">Python</a>
                           <a class = "navbar-item" href = "#">PHP</a>
                           <a class = "navbar-item" href = "#">Java</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">Separated link</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">One more separated link</a>
                        </div>
                     </div>
                  </div>
                  
                  <div class = "navbar-end">
                     <div class = "navbar-item">
                        <div class = "field is-grouped">
                           <p class = "control">
                              <a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
                              <span class = "icon">
                                 <i class = "fab fa-google-plus-square fa-2x"></i>
                              </span>
                              </a>
                           </p>
                           <p class = "control">
                              <a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
                                 <span class = "icon">
                                    <i class = "fab fa-twitter fa-2x"></i>
                                 </span>
                              </a>
                           </p>
                           <p class = "control">
                              <a class = "button is-info" href = "https://tutorialspoint.tw/java/java_tutorial.pdf">
                                 <span class = "icon">
                                    <i class = "fas fa-download"></i>
                                 </span>
                                 <span>Download</span>
                              </a>
                           </p>
                           
                        </div>
                     </div>
                  </div>
               </div>
            </nav>
         </div>
         
      </section>
   </body>
</html>

它顯示以下輸出 -

導航欄顏色

Bulma允許使用以下修飾符更改導航欄的背景顏色 -

  • is-primary

  • is-link

  • is-info

  • is-success

  • is-warning

  • is-danger

  • is-black

  • is-dark

  • is-light

讓我們使用navbar類中的任何一個上述修飾符建立一個簡單的示例 -

即時演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Navbar Color
            </span>
            <br>
            <br>
            
            <nav class = "navbar is-primary">
               <div class = "navbar-brand">
                  <a class = "navbar-item" href = "#">TutorialsPoint</a>
                  <div class = "navbar-burger burger" data-target = "navbarExample">
                     <span></span>
                     <span></span>
                     <span></span>
                  </div>
               </div>
               <div id = "navbarExample" class = "navbar-menu">
                  <div class = "navbar-start">
                     <a class = "navbar-item" href = "https://bulma.io/">Home</a>
                     <div class = "navbar-item has-dropdown is-hoverable">
                        <a class = "navbar-link" href = "#">Programming Languages</a>
                        <div class = "navbar-dropdown is-boxed">
                           <a class = "navbar-item" href = "#">JavaScript</a>                           
                           <a class = "navbar-item" href = "#">PHP</a>
                           <a class = "navbar-item" href = "#">Java</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">Separated link</a>
                        </div>
                     </div>
                  </div>
                  
                  <div class = "navbar-end">
                     <div class = "navbar-item">
                        <div class = "field is-grouped">
                           <p class = "control">
                              <a class = "bd-tw-button button" data-social-network = "Google plus" href = "#">
                                 <span class = "icon">
                                    <i class = "fab fa-google-plus-square fa-2x"></i>
                                 </span>
                              </a>
                           </p>
                           
                           <p class = "control">
                              <a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
                                 <span class = "icon">
                                    <i class = "fab fa-twitter fa-2x"></i>
                                 </span>
                              </a>
                           </p>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </nav>
         </div>
         
      </section>
   </body>
   
</html>

它顯示以下輸出 -

在上面的示例中，我們使用了is-primary修飾符。如果您想使用其他修飾符，則在navbar類中將此修飾符替換為您自己的修飾符。

上拉導航欄

Bulma允許透過在navbar-item中使用has-dropdown和has-dropdown-up修飾符，將下拉選單顯示在導航欄上方，如下例所示 -

即時演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Dropup Navbar
            </span>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            
            <nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
               <div class = "navbar-brand">
                  <a class = "navbar-item" href = "#">TutorialsPoint</a>
                  <div class = "navbar-burger burger" data-target = "navbarExample">
                     <span></span>
                     <span></span>
                     <span></span>
                  </div>
               </div>
               
               <div id = "navbarExample" class = "navbar-menu">
                  <div class = "navbar-start">
                     <a class = "navbar-item" href = "https://bulma.io/">Home</a>
                     <div class = "navbar-item has-dropdown has-dropdown-up is-active">
                        <a class = "navbar-link" href = "#">Programming Languages</a>
                        <div class = "navbar-dropdown is-boxed">
                           <a class = "navbar-item" href = "#">JavaScript</a>                           
                           <a class = "navbar-item" href = "#">PHP</a>
                           <a class = "navbar-item" href = "#">Java</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">Separated link</a>
                        </div>
                     </div>
                  </div>
               </div>
               
            </nav>
         </div>
      </section>
   </body>
   
</html>

它顯示以下輸出 -

右側下拉選單

您可以使用is-right修飾符將下拉選單放置在右側，如下例所示 -

即時演示 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Right Dropdown
            </span>
            <br>
            <br>
            
            <nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
               <div class = "navbar-brand">
                  <a class = "navbar-item" href = "#">TutorialsPoint</a>
                  <div class = "navbar-burger burger" data-target = "navbarExample">
                     <span></span>
                     <span></span>
                     <span></span>
                  </div>
               </div>
               
               <div id = "navbarExample" class = "navbar-menu">
                  <div class = "navbar-start">
                     <a class = "navbar-item" href = "https://bulma.io/">Home</a>
                     <div class = "navbar-item has-dropdown is-active">
                        <a class = "navbar-link" href = "#">Left Menu</a>
                        <div class = "navbar-dropdown is-boxed">
                           <a class = "navbar-item" href = "#">JavaScript</a>                           
                           <a class = "navbar-item" href = "#">PHP</a>
                           <a class = "navbar-item" href = "#">Java</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">Separated link</a>
                        </div>
                     </div>
                  </div>
                  
                  <div class = "navbar-end">
                     <div class = "navbar-item has-dropdown is-active">
                        <a class = "navbar-link" href = "#">Right Menu</a>
                        <div class = "navbar-dropdown is-right">
                           <a class = "navbar-item" href = "#">JavaScript</a>                           
                           <a class = "navbar-item" href = "#">PHP</a>
                           <a class = "navbar-item" href = "#">Java</a>
                           <hr class = "navbar-divider">
                           <a class = "navbar-item" href = "#">Separated link</a>                         
                        </div>
                     </div>
                  </div>
                  
               </div>
            </nav>
         </div>
         
      </section>
   </body>
   
</html>

它顯示以下輸出 -

bulma_components.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.