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.org.cn/">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.com/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.org.cn/">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.org.cn/">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.org.cn/">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
打印页面
上一页
下一页
广告