jQuery Mobile 網格

jQuery Mobile 網格佈局

jQuery Mobile 提供了一套基於 CSS 的分列佈局。然而，在移動設備上，由於考慮手機的螢幕寬度狹窄，一般不建議使用分欄分列佈局。

但有時您想要將較小的元素（如按鈕或導航標籤）並排地排列在一起，就像是在一個表格中一樣。這種情況下，推薦使用分列佈局。

網格中的列是等寬的（合計是 100%），沒有邊框、背景、margin 或 padding。

這裏有四種佈局網格可供使用：

網格類 列 列寬 對應 實例
ui-grid-solo 1 100% ui-block-a
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e

lamp 在列容器內，子元素擁有的 class 為 ui-block-a|b|c|d|e 取決於列數。列會浮動並排。

實例 1:class 為 ui-grid-a（兩列佈局），您必須指定 ui-block-a 和 ui-block-b 的兩個子元素。

實例 2:class 為 ui-grid-b（三列佈局），則必須添加 ui-block-a、ui-block-b 和 ui-block-c 的三個子元素。

自定義網格

通過使用CSS，您可以自定義列塊：

實例

<style>
.ui-block-a, .ui-block-b, .ui-block-c {
    background-color: lightgray;
    border: 1px solid black;
    height: 100px;
    font-weight: bold;
    text-align: center;
    padding: 30px;
}
</style>

您也可以通過使用內嵌樣式來自定義塊：

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

多行

在列中也可以有多個行。

注意：ui-block-a-class 總是創建一個新行：

實例

<div class="ui-grid-b">
  <div class="ui-block-a"><span>一些文本</span></div>
  <div class="ui-block-b"><span>一些文本</span></div>
  <div class="ui-block-c"><span>一些文本</span></div>
  <div class="ui-block-a"><span>一些文本</span></div>
  <div class="ui-block-b"><span>一些文本</span></div>
  <div class="ui-block-a"><span>一些文本</span></div>
</div>

回應式網格

在小螢幕中，不建議一行中並排太多按鈕（文本會縮短）。

我們在容器使用 ui-responsive 類來創建回應式網格：

實例

<div class="ui-grid-b ui-responsive">