基本的HTML樣式

在移動設備上使用多列布局并不是我們推薦的，但是有時你可能會需要把一些小的元素比如按鈕導航tab等排成一行。

jQuery Mobile框架提供了一個簡單的方法來構建基于CSS的柵格布局，我們約定為ui-grid。

有兩個預設的配置布局 — 兩列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—幾乎可滿足在任何情況下使用的要求。網格寬度是100%的， 且不可見(沒有背景或邊框)，也沒有padding和margin，所以它們不應該影響它們內嵌元素的樣式。

兩列網格

要創建一個兩列(50/50%)布局，首先需要一個容器(class="ui-grid-a")，然后添加兩個子容器(分別添加 ui-block-a和 ui-block-b的 class )：

<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div><!-- /grid-a --> 

上述標記產生下列內容的布局：

正如您在上面看到的，預設網格塊沒有任何樣式，他們只顯示內容。

網格class可以應用于任何容器。在下面的例子中我們為fieldset添加了 ui-grid-a并為兩個button容器應用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset> 

此外，網格塊可以采用主題化系統中的樣式 — 通過增加一個高度和顏色調板，就可以實現這種風格的外觀：

三列網格

另一種網格布局配置在父級容器使用 class=ui-grid-b ，而三個子級容器使用ui-block-a/b/c ， 以創建三列的布局(33/33/33%)。

<div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div><!-- /grid-a --> 

以下是三列網格示例：

三列網格(帶按鈕)：

四列網格

四列網格使用 class=ui-grid-c來創建(25/25/25/25% )。

五列網格

四列網格使用 class=ui-grid-d來創建(20/20/20/20/20% )。

多行網格

網格被設計用來折斷多行的內容。舉例來說，如果你指定一個三列網格中包含九個子塊，他們會折斷成三行三列的布局。 該布局需要為 class=ui-block-子塊使用一個重復的序列(a, b, c, a, b, c 等)來創建：

#p#

柵格布局 （Layout grids (columns)）

在移動設備上使用多列布局并不是我們推薦的，但是有時你可能會需要把一些小的元素比如按鈕導航tab等排成一行。

jQuery Mobile框架提供了一個簡單的方法來構建基于CSS的柵格布局，我們約定為ui-grid。

有兩個預設的配置布局 — 兩列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—幾乎可滿足在任何情況下使用的要求。網格寬度是100%的， 且不可見(沒有背景或邊框)，也沒有padding和margin，所以它們不應該影響它們內嵌元素的樣式。

兩列網格

要創建一個兩列(50/50%)布局，首先需要一個容器(class="ui-grid-a")，然后添加兩個子容器(分別添加 ui-block-a和 ui-block-b的 class )：

<div class="ui-grid-a"> 
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div><!-- /grid-a --> 

上述標記產生下列內容的布局：

正如您在上面看到的，預設網格塊沒有任何樣式，他們只顯示內容。

網格class可以應用于任何容器。在下面的例子中我們為fieldset添加了 ui-grid-a并為兩個button容器應用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset> 

此外，網格塊可以采用 主題化系統 中的樣式 — 通過增加一個高度和顏色調板，就可以實現這種風格的外觀：

三列網格

另一種網格布局配置在父級容器使用 class=ui-grid-b ，而三個子級容器使用ui-block-a/b/c ， 以創建三列的布局(33/33/33%)。

<div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div><!-- /grid-a --> 

以下是三列網格示例：

三列網格(帶按鈕)：

四列網格

四列網格使用 class=ui-grid-c來創建(25/25/25/25% )。

五列網格

四列網格使用 class=ui-grid-d來創建(20/20/20/20/20% )。

多行網格

網格被設計用來折斷多行的內容。舉例來說，如果你指定一個三列網格中包含九個子塊，他們會折斷成三行三列的布局。 該布局需要為 class=ui-block-子塊使用一個重復的序列(a, b, c, a, b, c 等)來創建：

#p#

可折疊塊

可折疊內容標記

創建一個可折疊的內容塊，創建一個容器，并添加 data-role="collapsible" 屬性。

直接在容器里面添加任何標題元素(H1-H6)。框架會把標題自動轉換為一個可點擊的按鈕并且添加一個“+”圖標用來指明它是可以展開的。

在標題后面可以添加任何HTML標記。框架會自動把這些標記包裹在一個容器里用以折疊或顯示(當點擊標題時)。

<div data-role="collapsible"> 
    <h3>I'm a header</h3> 
    <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p> 
    </div> 

我是可折疊的內容。默認我是顯示的，但是你可以點擊標題來隱藏我!

正如這個例子說明，默認情況下內容是展開的，要在頁面加載時折疊內容，添加 data-collapsed="true" 屬性：

<div data-role="collapsible" data-collapsed="true"> 

此代碼將創建一個可折疊的塊：

#p#

主題化內容

主題化內容區域

容器的主要內容區( data-role="content"容器)，應通過增加 為data-role="page"的父容器添加 data-theme 屬性來主題化，以確保背景色能夠在整個頁面都應用，而不管內容的長度是多少。(如果你僅僅為內容容器添加了 data-theme ，則背景色會在內容結束部分截斷，可能會在固定footer和內容之間產生留白 )

<div data-role="page" data-theme="a"> 

主題化可折疊塊

要為折疊塊的標題設置顏色請為容器添加 data-theme 屬性。 該圖標和主體目前沒有data屬性來主題化，但可以直接使用自定義的CSS樣式。

</p> <div data-role="collapsible" data-collapsed="true" data-theme="a">