Bulma - 容器和級別

上一個

下一個

描述

Bulma 使用容器來表示基本佈局元素並封裝網站內容。容器類在不同的裝置上將具有以下寬度值 -

桌面的最大寬度為 960 畫素。
寬屏的最大寬度為 1152 畫素。
全高畫質的最大寬度為 1344 畫素。

我們來建立容器類的一個簡單示例 -

注意 - 調整編碼基礎輸出視窗大小，以檢視根據視窗大小發生的更改。

現場演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Container 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>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Container
            </span>
            <br>
            <br>
            
            <div class = "container">
               <div class = "notification has-background-grey-lighter">
                  This container works on desktop.
               </div>
            </div>
            <br>
            
            <div class = "container is-fluid">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fluid</strong> container, which has 32px gap on either side, on any viewport size.
               </div>
            </div>
            <br>
            
            <div class = "container is-widescreen">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fullwidth</strong> container, works until <i>$widescreen</i> breakpoint.
               </div>
            </div>
            <br>
            
            <div class = "container is-fullhd">
               <div class = "notification has-background-grey-lighter">
                  This is <strong>fullwidth</strong> container, works until <i>$fullhd</i> breakpoint.
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 -

級別

Bulma 包括水平級別以指定左側和右側的級別。level-left 類指定左側的元素，而level-right 類指定右側的元素。你可以透過使用level-item 類定義每個單獨的元素。

級別包含兩種型別的級別。

居中級別 - 你可以在level容器中讓專案居中。
移動級別 - 如果你想在移動裝置上水平顯示專案，則在level容器中使用is-mobile 修飾符。

我們來透過使用上述級別型別建立level的一個簡單示例，如下所示 -

注意 - 調整編碼基礎輸出視窗大小，以檢視根據視窗大小發生的更改。

現場演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Container 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>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Level
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Level structure</span>
            <nav class = "level has-background-grey-lighter">
               <div class = "level-left has-background-warning">
                  <p class = "level-item"><a>Menu 1</a></p>
                  <p class = "level-item"><a>Menu 2</a></p>
                  <p class = "level-item"><a>Menu 3</a></p>
               </div>
               <div class = "level-right has-background-warning">
                  <p class = "level-item"><a>Menu 1</a></p>
                  <p class = "level-item"><a>Menu 2</a></p>
                  <p class = "level-item"><a>Menu 3</a></p>
               </div>
            </nav>
            
            <span class = "is-size-5">Centered Level</span>
            <nav class = "level has-background-grey-lighter">
               <div class = "level-item has-text-centered">
                  <p>Item-1</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-2</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-3</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-4</p>
               </div>
            </nav>
            
            <span class = "is-size-5">Mobile Level</span>
            <nav class = "level has-background-grey-lighter is-mobile">
               <div class = "level-item has-text-centered">
                  <p>Item-1</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-2</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-3</p>
               </div>
               <div class = "level-item has-text-centered">
                  <p>Item-4</p>
               </div>
            </nav>
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 -

bulma_layout.htm

列印頁面

上一個

下一個