最適化表單的樣式結構 styling-constructs-for-adaptive-forms
必備條件 prerequisites
了解CSS和LESS架構。
可自訂的內容 what-can-be-customized
文章列出可公開使用的適用性表單CSS類別。 您可以利用這些類別來設定最適化表單中各種元件的樣式。 製作元件的樣式（例如顯示警告的對話方塊和狀態列）不在本文的討論範圍內。 只有在您無法使用 主題編輯器.
在最適化表單中自訂樣式 customizing-styles-in-adaptive-forms
LESS架構可簡化使用案例，以自訂最適化表單中的樣式。 架構可讓您使用一組變數和函式(mixin)來定義樣式。 LESS框架有助於減小捆綁代碼的大小並增加其可重用性。
您可以透過下列方式自訂最適化表單樣式：
- 變更主題
- 更改元件的樣式
變更主題 changing-theme
您可以變更最適化表單的主題，確保其外觀與內嵌最適化表單的網頁一致。
使用CSS屬性而變更適用性表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定和感覺」原則的重大變更（例如元件的版面配置和位置變更），不視為主題變更。
以下一組CSS屬性會根據引導來定義網頁的主題：
- 背景色彩
- 邊框（類型、顏色、厚度）
- 字型色彩
- 邊距
- 邊距
- 字型大小
- LineHeight
目前，LESS變數僅針對適用性表單中各元素的這些屬性定義。
變更元件樣式 changing-component-style
您可以對元素的外觀、版面、定位和可見性進行更改。 若要完成此工作，請建立或更新您的自訂.css檔案，以包含本文所列的樣式結構。
若要將樣式套用至最適化表單，請開啟中的最適化表單以進行編輯，開啟最適化表單容器的屬性，在基本索引標籤中指定自訂CSS檔案的路徑。 適用性表單的預設樣式建構，並以自訂.css檔案中所列的建構加以覆寫。
元件 components
本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者，您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。
容器樣式 container-styling
容器是頂層元件。 其他面板和欄位位於容器元件下。
欄位樣式 field-styling
適用性表單包含各種欄位類型。 每個欄位都有唯一的類名，即欄位的名稱。 該欄位還具有通用類名 guideFieldNode.
欄位包括標籤、小部件、幫助說明（包括長說明和短說明）和「域幫助」表徵圖（問號）。
標籤樣式 label-styling
HTML元素 標籤 用於欄位的包括類 lef 或 top 視標籤在上方還是左側而定。
標籤的CSS規則會使用 guideFieldLabel 標籤。 如果您是作者，請覆寫此規則，讓您的自訂變更可見。
介面工具集樣式 widgets-styling
視其類型而定，Widget也包含類別。 通常，介面工具集包括 guideFieldWidget 類別。 隨HTML提供的小部件通常使用標準HTML要素輸入並選擇。 樣式將相應地進行。 您無法變更自訂Widget的樣式。
介面工具集樣式的限制 limitations-in-widget-styling
焦點、必填和停用欄位的樣式會使用變數進行限制。 不過，您可以覆寫樣式來變更。 提供使用變數的限制主要是為了控制變數的數量。 如果欄位的外觀發生顯著變化，則可以放鬆限制，因為它位於先前討論的任何狀態中。
說明說明 help-description
作者可使用簡短和長篇說明元件，在欄位中指定說明內容。 這兩個元件都有共同類別 .guideHelpDescription 另一類 .long/ .short，視說明類型而定。 「幫助」內容括在段落元素中，以覆蓋說明的樣式。 說明說明（長和短）是使用以widgetshelp開頭的變數來修改，如下表所述：
條款和條件 terms-and-conditions
條款與條件(TnC) ``)介面工具集可讓您指定條款與條件。 您可以使用下表所述的變數來自訂介面工具集。
按鈕 button
按鈕也是小工具。 不過，其樣式與介面工具集稍有不同。 在最適化表單中，下列任一項皆構成按鈕：
- 輸入[類型=文字]
- 按鈕
- 元素，類別為button
按鈕的HTML代碼：
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
問號 question-mark
對於介面工具集，當作者在說明內容中新增長說明時，會顯示問號。 會使用引導中提供的預設圖示。 若要使用自訂圖示，您可以自訂引導圖圖示。
表格 table
您可以使用下列變數來變更表格中標題和內文列的顏色主題。
檔案附件 file-attachment
適用性表單的「檔案附件」Widget可讓您上傳檔案。 您也可以使用變數來自訂介面工具集。
導航樣式 navigator-styles
有四種類型的導航標籤。 這些功能包括左側、頂端、精靈和折疊式功能表的標籤。 每個導航器都有不同的類。
以下是標籤導航器元素的HTML代碼（類似於引導頁簽）:
<li>
tab title
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></span>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
您可以使用CSS規則來變更導覽器的樣式，此規則會使用 後代 選取器。 例如，若要將文字裝飾樣式新增至錨點標籤：
頂部的頁簽導航器：
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
此外，還有可根據頁簽導航器是否嵌套/子/子導航器來設定頁簽導航器樣式的類（包括左側和頂部）。
guideNavIcon類別提供索引標籤導覽器（包括左側和頂部）和精靈導覽器的預設圖示。
面板樣式 panel-styling
面板包含可選工具列及其內容。
面板節點分為導覽器和內容。 那裡 ``不是內容的個別樣式元件。 描述的變數會套用在導覽器上以及內容上。
&ast；最頂端的面板(RootPanel)沒有此類。
行動樣式 mobile-styling
標題列 header-bar
這些變數會影響行動裝置或小型螢幕裝置上可見的標題列，這些裝置包含面板標題以及下一個和後面的導覽器。
捲動指示器 scroll-indicator
這些變數會影響「捲動」指示器，此為顯示在行動裝置或小型螢幕裝置上的橘色箭頭。 「捲動」指標表示畫面的可見部分以外有內容。 您可以向下捲動以查看。 當您點擊內容結尾時，箭頭會消失。
行動版修正工具列版面專屬變數 mobile-fixed-toolbar-layout-specific-variables
下表中的這些變數會影響行動固定工具列配置。