了解CSS和LESS架構。
文章列出可公開使用的適用性表單CSS類別。 您可以利用這些類別來設定最適化表單中各種元件的樣式。 製作元件的樣式(例如顯示警告的對話方塊和狀態列)不在本文的討論範圍內。 只有當您無法使用主題編輯器來建立元件樣式時,才使用這些樣式結構來建立樣式(使用CSS或更少)。
LESS架構可簡化使用案例,以自訂最適化表單中的樣式。 架構可讓您使用一組變數和函式(mixin)來定義樣式。 LESS框架有助於減小捆綁代碼的大小並增加其可重用性。
您可以透過下列方式自訂最適化表單樣式:
您可以變更最適化表單的主題,確保其外觀與內嵌最適化表單的網頁一致。
使用CSS屬性而變更適用性表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定和感覺」原則的重大變更(例如元件的版面配置和位置變更),不視為主題變更。
以下一組CSS屬性會根據引導來定義網頁的主題:
目前,LESS變數僅針對適用性表單中各元素的這些屬性定義。
您可以對元素的外觀、版面、定位和可見性進行更改。 若要完成此工作,請建立或更新您的自訂.css檔案,以包含本文所列的樣式結構。
若要將樣式套用至最適化表單,請開啟中的最適化表單以進行編輯,開啟最適化表單容器的屬性,在基本索引標籤中指定自訂CSS檔案的路徑。 適用性表單的預設樣式建構,並以自訂.css檔案中所列的建構加以覆寫。
本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者,您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。
容器是頂層元件。 其他面板和欄位位於容器元件下。
CSS 類別 |
|
變數說明 |
變數說明 |
|
容器的背景顏色 |
|
容器的邊框間距 |
|
容器的邊界 |
|
容器的字型顏色 |
適用性表單包含各種欄位類型。 每個欄位都有唯一的類名,即欄位的名稱。 該欄位還具有公共類名guideFieldNode
。
欄位包括標籤、小部件、幫助說明(包括長說明和短說明)和「域幫助」表徵圖(問號)。
CSS 類別 |
|
變數 |
說明 |
|
欄位填補 |
|
欄位錯誤訊息的字型顏色 |
|
欄位錯誤消息的字型大小 |
用於欄位的HTML元素label包含類別left或top,具體取決於標籤位於上方還是左側。
CSS 類別 |
|
變數 |
說明 |
|
欄位標籤的字型顏色 |
|
欄位標籤的字型大小 |
|
欄位標籤的CSS行高屬性 |
|
欄位標籤的CSS字型寬度屬性 |
|
欄位標籤的邊界 |
標籤的CSS規則是使用guideFieldLabel標籤套用。 如果您是作者,請覆寫此規則,讓您的自訂變更可見。
視其類型而定,Widget也包含類別。 通常,Widget包含guideFieldWidget
類。 隨HTML提供的小工具通常使用標準HTML元素輸入並選取。 樣式將相應地進行。 您無法變更自訂Widget的樣式。
CSS 類別 |
|
變數 |
說明 |
|
小工具的背景顏色(複選框和單選按鈕無效) |
|
小工具的邊框顏色 |
|
小工具的邊框大小 |
|
小工具的邊框半徑 |
|
小工具的邊框類型 |
|
介面工具集邊框的焦點類型 |
|
小部件的合併邊框樣式 |
|
介面工具集內的文字顏色 |
|
介面工具集內的文字大小 |
|
介面工具集的CSS行高屬性 |
|
介面工具集的CSS填充屬性 |
|
介面工具集聚焦時的邊框顏色 |
|
強制欄位的介面工具集邊框顏色 |
|
必填欄位的介面工具集背景顏色 |
|
禁用欄位時介面工具集的背景顏色 |
|
禁用欄位時介面工具集的字型顏色 |
|
停用欄位時介面工具集的邊框顏色 |
|
介面工具集的高度(無法用於核取方塊和選項按鈕) |
|
複選框和單選按鈕的高度。 |
|
多選下拉式清單的最大高度 |
焦點、必填和停用欄位的樣式會使用變數進行限制。 不過,您可以覆寫樣式來變更。 提供使用變數的限制主要是為了控制變數的數量。 如果欄位的外觀發生顯著變化,則可以放鬆限制,因為它位於先前討論的任何狀態中。
作者可使用簡短和長篇說明元件,在欄位中指定說明內容。 這兩個元件都具有公共類.guideHelpDescription
和另一個類.long
/ .short
,具體取決於描述的類型。 「幫助」內容括在段落元素中,以覆蓋說明的樣式。 說明說明(長和短)是使用以widgetshelp開頭的變數來修改,如下表所述:
變數 |
說明 |
|
小部件的背景顏色的長幫助 |
|
小工具的邊框顏色 |
|
小工具的左指示器邊框顏色的長幫助 |
|
小工具的背景顏色 |
|
小工具的字型顏色 |
|
小工具的背景顏色簡短工具提示幫助 |
|
小工具的字型顏色簡短工具提示幫助 |
「條款與條件」(TnC
)介面工具集允許您指定條款與條件。 您可以使用下表所述的變數來自訂介面工具集。
變數 |
說明 |
tnc-unvisited |
未訪問的tnc連結的字型顏色。 |
tnc-visited |
訪問的tnc連結的字型顏色。 |
按鈕也是小工具。 不過,其樣式與介面工具集稍有不同。 在最適化表單中,下列任一項皆構成按鈕:
按鈕的HTML程式碼:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS 類別 |
說明 |
|
提供按鈕的表徵圖 |
|
樣式按鈕標籤/註解 |
變數 |
說明 |
|
按鈕的邊框大小 |
|
邊框類型 |
|
按鈕的CSS填充屬性 |
|
按鈕的字型大小 |
|
按鈕的背景顏色 |
|
按鈕的字型顏色 |
|
按鈕的邊框顏色 |
|
填充大按鈕(具有類.buttonlarge的按鈕) |
|
大按鈕的字型大小 |
|
小按鈕的邊框間距(類為.buttonsmall的按鈕) |
|
小按鈕的字型大小 |
|
提供資訊的按鈕的背景顏色(具有類.buttoninformity的按鈕) |
|
資訊性按鈕的字型顏色 |
|
資訊按鈕的邊框顏色 |
|
警告樣式的按鈕(具有類.buttonwarning的按鈕)的背景顏色 |
|
警告樣式的按鈕的字型顏色 |
|
警告樣式的按鈕的邊框顏色 |
|
警報按鈕的背景顏色(具有類.buttonalert的按鈕) |
|
警報按鈕的字型顏色 |
|
警報按鈕的邊框顏色 |
對於介面工具集,當作者在說明內容中新增長說明時,會顯示問號。 會使用引導中提供的預設圖示。 若要使用自訂圖示,您可以自訂引導圖圖示。
CSS 類別 |
|
變數 |
說明 |
|
圖示的顏色 |
|
滑鼠滑鼠暫留在表徵圖上時的顏色 |
您可以使用下列變數來變更表格中標題和內文列的顏色主題。
變數 |
說明 |
|
標題行的背景顏色。 預設值為 |
|
奇數正文行的背景顏色。 預設值為 |
|
偶體行的背景顏色。 預設值為 |
適用性表單的「檔案附件」Widget可讓您上傳檔案。 您也可以使用變數來自訂介面工具集。
變數 |
說明 |
|
填充介面工具集中顯示的檔案 |
|
檔案項的背景顏色 |
|
上邊框的邊框顏色 |
|
檔案項的字型顏色 |
|
介面工具集中「預覽」圖示(Bootstrap圖示)的顏色 |
|
檔案項的注釋高度 |
有四種類型的導航標籤。 這些功能包括左側、頂端、精靈和折疊式功能表的標籤。 每個導航器都有不同的類。
導覽器 |
CSS 類別 |
|
.accordion-navigator |
|
.tab-navigator-vertical |
|
.tab導覽器 |
|
.wizard-navigator |
以下是標籤導航器元素的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規則來變更導覽器的樣式,該規則使用descendant選擇器來選取元素。 例如,若要將文字裝飾樣式新增至錨點標籤:
頂部的頁簽導航器:
.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;
}
此外,還有可根據頁簽導航器是否嵌套/子/子導航器來設定頁簽導航器樣式的類(包括左側和頂部)。
CSS 類別 |
說明 |
|
具有巢狀/子/子導覽器的標籤導覽器(左側和頂部) |
|
沒有巢狀/子/子導覽器的標籤導覽器(左側和頂部) |
guideNavIcon類別提供索引標籤導覽器(包括左側和頂部)和精靈導覽器的預設圖示。
CSS 類別 |
|
您可以在製作時在面板上提供CSS類,以更改特定導航器的表徵圖,其形式為<CLASS_NAME>。 可為導航器的表徵圖添加**<CLASS_NAME>_nav**。
變數 |
說明 |
標籤導覽器 |
|
|
整個頁簽導航器的背景顏色 |
|
頁簽的背景顏色 |
|
頁簽的字型顏色 |
|
暫留時標籤的背景顏色 |
|
暫留時標籤的字型顏色 |
|
面板聚焦時的背景顏色(活動) |
|
面板聚焦時的字型顏色 |
|
面板的完成運算式傳回true時的背景顏色 |
|
面板的完成運算式返回true時的字型顏色 |
|
面板聚焦一次但完成運算式傳回false時的背景顏色 |
|
面板聚焦一次但完成運算式傳回false時的字型顏色 |
|
標籤的邊框顏色 |
|
頁簽的字型大小 |
|
頁簽的邊框間距 |
|
索引標籤的邊界 |
|
垂直標籤的邊距 |
|
標籤的邊框大小 |
|
制表符的最小高度 |
|
嵌套頁簽的縮進 |
嚮導導航器 |
|
|
整個嚮導導航器的背景顏色 |
|
精靈的背景顏色 |
|
嚮導的字型顏色 |
|
面板聚焦時的背景顏色(活動) |
|
面板聚焦時的字型顏色(聚焦) |
|
面板的完成運算式傳回true時的背景顏色 |
|
面板的完成運算式返回true時的字型顏色 |
|
面板聚焦一次但完成運算式傳回false時的背景顏色 |
|
面板聚焦一次但完成表達式返回false時的字型顏色 |
|
精靈的顏色 |
|
嚮導的字型大小 |
|
嚮導的邊框間距 |
|
嚮導的邊框大小 |
|
嚮導導航器項目符號的邊框顏色(前置詞為註解/標籤) |
|
嚮導導航器進度欄的背景顏色 |
|
填充進度條的顏色 |
折疊式面板導覽器 |
|
|
折疊式面板的邊框間距 |
面板包含可選工具列及其內容。
CSS 類別 |
|
變數 |
說明 |
|
面板的背景顏色 |
|
面板文本的字型大小 |
|
面板文本的字型顏色 |
|
面板內填充 |
|
面板說明的字型大小 |
|
面板說明的邊框間距 |
|
面板說明的背景顏色 |
|
面板說明的指示器邊框顏色 |
面板節點分為導覽器和內容。
不是內容的個別樣式元件。 描述的變數會套用在導覽器上以及內容上。
&ast;最頂端面板(RootPanel)沒有此類。
這些變數會影響行動裝置或小型螢幕裝置上可見的標題列,這些裝置包含面板標題以及下一個和後面的導覽器。
CSS 類別 |
|
變數 |
說明 |
|
標題欄的背景顏色 |
|
標題欄內文本的字型顏色 |
|
標題欄的邊框間距 |
這些變數會影響「捲動」指示器,此為顯示在行動裝置或小型螢幕裝置上的橘色箭頭。 「捲動」指標表示畫面的可見部分以外有內容。 您可以向下捲動以查看。 當您點擊內容結尾時,箭頭會消失。
CSS 類別 |
|
變數 |
說明 |
|
從底部固定陰旋器位置 |
|
從右到右的陰旋器的固定位置 |
|
捲軸寬度 |
|
陰囊高度 |
下表中的這些變數會影響行動固定工具列配置。
CSS 類別 |
|
變數 |
說明 |
|
從底部固定行動裝置上的工具列位置 |
|
從上方固定行動裝置上的工具列位置 |
|
修正行動裝置上左側工具列的位置 |
|
在行動裝置上,從右方固定工具列的位置 |
|
從頂部固定工具欄按鈕表徵圖的位置 |
|
行動裝置上工具列按鈕圖示的寬度 |
|
行動裝置上工具列按鈕圖示的高度 |
|
行動裝置上工具列的背景顏色 |