布尔玛 - 标签

上一页
下一页

说明

布尔玛提供标签导航菜单，具有不同的样式来显示内容。你可以使用tabs基类和无序列表创建标签导航菜单。

以下示例展示了如何使用tabs类创建标签导航菜单以及图标 −

实时演示 
<!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">Tabs</span><br><br>
            <span class = "is-size-5">Simple Tab</span><br><br>
            <div class = "tabs">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Centered Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-centered">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Right Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-right">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Tabs with Icons
            </span>
            <br>
            <br>
            
            <div class = "tabs">
               <ul>
                  <li class = "is-active">
                     <a>
                        <span class = "icon is-small">
                           <i class = "fas fa-home" aria-hidden = "true"></i>
                        </span>
                        <span>Home</span>
                     </a>
                  </li>
                  <li>
                     <a>
                        <span class = "icon is-small">
                           <i class = "fas fa-building" aria-hidden = "true"></i>
                        </span>
                        <span>About Us</span>
                     </a>
                  </li>
                  <li>
                     <a>
                        <span class = "icon is-small">
                           <i class = "fas fa-cogs" aria-hidden = "true"></i>
                        </span>
                        <span>Services</span>
                     </a>
                  </li>
                  <li>
                     <a>
                        <span class = "icon is-small">
                           <i class = "fas fa-file-signature" aria-hidden = "true"></i>
                        </span>
                        <span>Contact Us</span>
                     </a>
                  </li>
               </ul>
            </div>
            
         </div>
      </section>
   </body>
   
</html>

它显示以下输出 −

标签大小

你可以通过将 is-small、is-medium和is-large之类的3个修饰符用于标签组件来指定标签的大小。

以下示例确定如何在不同大小中显示标签 −

实时演示 
<!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">
               Tab Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-small">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Medium Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-medium">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Large Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-large">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

标签样式

你可以为标签指定带有边框（is-boxed类）、圆角（is-toggle-rounded类）元素的样式，如下面的示例所示 −

实时演示 
<!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">
               Tab Styles
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Bordered Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-boxed">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Toggle Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-toggle">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Rounded Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-toggle is-toggle-rounded">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

组合标签

布尔玛允许你将标签与不同类型的修饰符组合，如is-centered、is-boxed、is-medium、is-fullwidth等，如下面的示例所示 −

实时演示 
<!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">
               Combining Tabs
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Centered and Boxed Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-centered is-boxed">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Toggle and Fullwidth Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-toggle is-fullwidth">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Centered, Boxed and Medium Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-centered is-boxed is-medium">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
            <br>
            <br>
            
            <span class = "is-size-5">
               Toggle, Fullwidth and Large Tab
            </span>
            <br>
            <br>
            
            <div class = "tabs is-toggle is-fullwidth is-large">
               <ul>
                  <li class = "is-active"><a>Home</a></li>
                  <li><a>About Us</a></li>
                  <li><a>Services</a></li>
                  <li><a>Contact Us</a></li>
               </ul>
            </div>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

bulma_components.htm
打印页面
上一页
下一页
广告