Bulma - 麵包屑

描述

.breadcrumb 類是定義麵包屑元件所必需的，.is-active 類可用於顯示一個特定的活動頁面。

預設的 .breadcrumb 類對齊到左側。你可以透過將 .breadcrumb 類與 is-centered 類（用於居中對齊）和 is-right 類（用於右對齊）相結合來對齊麵包屑容器。

以下示例介紹瞭如何顯示麵包屑（在 nav 標記中使用 breadcrumb 類）以及頁面中元素的對齊方式 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Card</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
    <body>
      <section class = "section">
         <div class = "container">
            <h1 class = "is-size-2">Breadcrumb</h1>
            <nav class = "breadcrumb is-small" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active"><a href = "#" aria-current = "page">Breadcrumb</a></li>
               </ul>
            </nav>
            <br>
            <!-- <p class = "is-size-3">Alignment </p> <br> -->
            <h1 class = "is-size-3">Alignment</h1>
            <br>
            <h1 class = "is-size-5">Center</h1>
            <nav class = "breadcrumb is-centered" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Breadcrumb</a>
                  </li>
               </ul>
            </nav>
            <br>
            <h1 class = "is-size-5">Right</h1>
            <nav class = "breadcrumb is-right" aria-label =" breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Breadcrumb</a>
                  </li>
               </ul>
            </nav>
            
         </div>
      </section>
   </body>
   
</html>

執行上面的程式碼，你將得到下面的輸出 −

圖示

.breadcrumb 類可用於與 Font Awesome 圖示一起使用，並且還可與附加的分隔符類（例如 has-arrow-separator、has-bullet-separator、has-dot-separator、has-succeeds-separator 類）相結合。

以下示例演示瞭如何使用上述附加的分隔符類連同 .breadcrumb 類容器以及圖示 −

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Breadcrumb - Icons</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">     
            <p class = "is-size-4">Breadcrumb with Icons</p>
            <nav class = "breadcrumb" aria-label = "breadcrumbs">
               <ul>
                  <li>
                     <a href = "#">
                        <span class = "icon is-small">
                           <i class = "fas fa-home" aria-hidden = "true"></i>
                        </span>
                        <span>Home</span>
                     </a>
                  </li>
                  
                  <li>
                     <a href = "#">
                        <span class = "icon is-small">
                           <i class = "fas fa-book" aria-hidden = "true"></i>
                        </span>
                        <span>Tutorialspoint</span>
                     </a>
                  </li>
                  <li>
                     <a href = "#">
                        <span class = "icon is-small">
                           <i class = "fas fa-puzzle-piece" aria-hidden = "true"></i>
                        </span>
                        <span>Bulma</span>
                     </a>
                  </li>
                  
                  <li class = "is-active">
                     <a href = "#">
                        <span class = "icon is-small">
                           <i class = "fas fa-thumbs-up" aria-hidden = "true"></i>
                        </span>
                        <span>Documentation</span>
                     </a>
                  </li>
               </ul>
            </nav>
            <p class = "is-size-4">Different types of Breadcrumbs</p>
            <br>
            
            <nav class = "breadcrumb has-arrow-separator" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Documentation</a>
                  </li>
               </ul>
            </nav>
            <br>
            
            <nav class = "breadcrumb has-bullet-separator" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Documentation</a>
                  </li>
               </ul>
            </nav>
            <br>
            
            <nav class = "breadcrumb has-dot-separator" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current="page">Documentation</a>
                  </li>
               </ul>
            </nav>
            <br>
            
            <nav class = "breadcrumb has-succeeds-separator" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Documentation</a>
                  </li>
               </ul>
            </nav>
         </div>
         
      </section>
   </body>
   
</html>

它顯示以下輸出 −

尺寸

.breadcrumb 類可以與 3 種類型的尺寸類結合使用，如 is-small、is-medium 和 is-large。

以下示例顯示了頁面中不同尺寸的麵包屑 −

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Breadcrumb - Sizes</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <h1 class = "is-size-2">Breadcrumb Sizes</h1>
            <br>
            <p class = "is-size-5">Small</p>
            <nav class = "breadcrumb is-small" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current="page">Documentation</a>
                  </li>
               </ul>
            </nav>
            
            <!-- <p class = "is-size-3">Alignment</p><br> -->
            <p class = "is-size-5">Medium</p>
            <br>
            <nav class = "breadcrumb is-medium" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Documentation</a>
                  </li>
               </ul>
            </nav>
            
            <p class = "is-size-5">Large</p>
            <br>
            <nav class = "breadcrumb is-large" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Home</a></li>
                  <li><a href = "#">Tutorialspoint</a></li>
                  <li><a href = "#">Bulma</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Documentation</a>
                  </li>
               </ul>
            </nav>
         </div>
         
      </section>
   </body>
   
</html>

它顯示以下輸出 −

bulma_components.htm

列印頁面

上一個

下一個