布林瑪 - 標籤

上一頁
下一頁

說明

布林瑪提供標籤導航選單，具有不同的樣式來顯示內容。你可以使用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
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.