適用性表單的樣式結構

必備條件

了解CSS和LESS架構。

可自定義的

文章列出可公開使用的適用性表單CSS類別。 您可以利用這些類別來設定最適化表單中各種元件的樣式。 製作元件的樣式（例如顯示警告的對話方塊和狀態列）不在本文的討論範圍內。 只有當您無法使用主題編輯器來建立元件樣式時，才使用這些樣式結構來建立樣式（使用CSS或更少）。

自訂最適化表單的樣式

LESS架構可簡化使用案例，以自訂最適化表單中的樣式。 架構可讓您使用一組變數和函式(mixin)來定義樣式。 LESS框架有助於減小捆綁代碼的大小並增加其可重用性。

您可以透過下列方式自訂最適化表單樣式：

  • 變更主題
  • 更改元件的樣式

更改主題

您可以變更最適化表單的主題，確保其外觀與內嵌最適化表單的網頁一致。

使用CSS屬性而變更適用性表單的整體外觀通常是主題變更的一部分。 對「最適化表單的確定和感覺」原則的重大變更（例如元件的版面配置和位置變更），不視為主題變更。

以下一組CSS屬性會根據引導來定義網頁的主題：

  • 背景色彩
  • 邊框（類型、顏色、厚度）
  • 字型色彩
  • 邊距
  • 邊距
  • 字型大小
  • LineHeight

目前，LESS變數僅針對適用性表單中各元素的這些屬性定義。

更改元件樣式

您可以對元素的外觀、版面、定位和可見性進行更改。 若要完成此工作，請建立或更新您的自訂.css檔案，以包含本文所列的樣式結構。

若要將樣式套用至最適化表單，請開啟中的最適化表單以進行編輯，開啟最適化表單容器的屬性，在基本索引標籤中指定自訂CSS檔案的路徑。 適用性表單的預設樣式建構，並以自訂.css檔案中所列的建構加以覆寫。

元件

本文討論的元件有其預先定義的CSS類別。 您可以編輯變數以修改CSS類別中的樣式。 或者，您也可以重寫整個類。 本節介紹可使用變數修改的元件和樣式中的類。

容器樣式

容器是頂層元件。 其他面板和欄位位於容器元件下。

CSS 類別

guideContainerNode

變數說明

變數說明

container-bgColor

容器的背景顏色

container-padding

容器的邊框間距

container-margin

容器的邊界

container-fontColor

容器的字型顏色

欄位樣式

適用性表單包含各種欄位類型。 每個欄位都有唯一的類名，即欄位的名稱。 該欄位還具有公共類名guideFieldNode。

欄位包括標籤、小部件、幫助說明（包括長說明和短說明）和「域幫助」表徵圖（問號）。

CSS 類別

guideFieldNode

變數

說明

field-padding

欄位填補

field-error-font-color

欄位錯誤訊息的字型顏色

field-error-font-size

欄位錯誤消息的字型大小

標籤樣式

用於欄位的HTML元素​label​包含類別​left​或​top，具體取決於標籤位於上方還是左側。

CSS 類別

guideFieldLabel

變數

說明

label-font-color

欄位標籤的字型顏色

label-font-size

欄位標籤的字型大小

label-line-height

 欄位標籤的CSS行高屬性

label-font-weight

 欄位標籤的CSS字型寬度屬性

label-margin

欄位標籤的邊界

標籤的CSS規則是使用​guideFieldLabel​標籤套用。 如果您是作者，請覆寫此規則，讓您的自訂變更可見。

介面工具集樣式

視其類型而定，Widget也包含類別。 通常，Widget包含guideFieldWidget類。 隨HTML提供的小工具通常使用標準HTML元素輸入並選取。 樣式將相應地進行。 您無法變更自訂Widget的樣式。

CSS 類別

guideFieldWidget

變數

說明

widgets-bg-color

 小工具的背景顏色（複選框和單選按鈕無效）

widgets-border-color

小工具的邊框顏色

widgets-border-thickness

小工具的邊框大小

widgets-border-radius

小工具的邊框半徑

widgets-border-type

小工具的邊框類型

widget-border-focus-type

介面工具集邊框的焦點類型

widgets-border

小部件的合併邊框樣式

widgets-font-color

介面工具集內的文字顏色

widgets-font-size

介面工具集內的文字大小

widgets-line-height

 介面工具集的CSS行高屬性

widgets-padding

介面工具集的CSS填充屬性

widgets-focus-border-color

介面工具集聚焦時的邊框顏色

widgets-mandatory-border-color

強制欄位的介面工具集邊框顏色

widgets-mandatory-bg-color

必填欄位的介面工具集背景顏色

widgets-disabled-bg-color

禁用欄位時介面工具集的背景顏色

widgets-disabled-font-color

禁用欄位時介面工具集的字型顏色

widgets-disabled-border-color

停用欄位時介面工具集的邊框顏色

widget-height

 介面工具集的高度（無法用於核取方塊和選項按鈕）

checkbutton-height

複選框和單選按鈕的高度。

listboxwidget-height

多選下拉式清單的最大高度

介面工具集樣式的限制

焦點、必填和停用欄位的樣式會使用變數進行限制。 不過，您可以覆寫樣式來變更。 提供使用變數的限制主要是為了控制變數的數量。 如果欄位的外觀發生顯著變化，則可以放鬆限制，因為它位於先前討論的任何狀態中。

幫助說明

作者可使用簡短和長篇說明元件，在欄位中指定說明內容。 這兩個元件都具有公共類.guideHelpDescription和另一個類.long/ .short，具體取決於描述的類型。 「幫助」內容括在段落元素中，以覆蓋說明的樣式。 說明說明（長和短）是使用以widgetshelp開頭的變數來修改，如下表所述：

變數

說明

widgets-help-long-bg-color

小部件的背景顏色的長幫助

widgets-help-long-border-color

小工具的邊框顏色

widgets-help-long-border-indicator-color

小工具的左指示器邊框顏色的長幫助

widgets-help-short-bg-color

小工具的背景顏色

widgets-help-short-color

小工具的字型顏色

widgets-help-short-tooltip-bg-color

小工具的背景顏色簡短工具提示幫助

widgets-help-short-tooltip-color

小工具的字型顏色簡短工具提示幫助

條款和條件

「條款與條件」(TnC )介面工具集允許您指定條款與條件。 您可以使用下表所述的變數來自訂介面工具集。

變數

說明
tnc-unvisited 未訪問的tnc連結的字型顏色。
tnc-visited 訪問的tnc連結的字型顏色。

按鈕

按鈕也是小工具。 不過，其樣式與介面工具集稍有不同。 在最適化表單中，下列任一項皆構成按鈕：

  • input[type = text]
  • 按鈕
  • 元素，類別為button

按鈕的HTML程式碼：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS 類別

說明

iconButton-icon

提供按鈕的表徵圖

iconButton-label

樣式按鈕標籤/註解

變數

說明

button-border-size

按鈕的邊框大小

button-border-type

邊框類型

button-padding

按鈕的CSS填充屬性

button-font-size

按鈕的字型大小

button-background-color

按鈕的背景顏色

button-font-color

按鈕的字型顏色

button-border-color

按鈕的邊框顏色

button-large-padding

填充大按鈕（具有類.buttonlarge的按鈕）

button-large-font-size

大按鈕的字型大小

button-small-padding

小按鈕的邊框間距（類為.buttonsmall的按鈕）

button-small-font-size

小按鈕的字型大小

button-info-background-color

提供資訊的按鈕的背景顏色（具有類.buttoninformity的按鈕）

button-info-font-color

資訊性按鈕的字型顏色

button-info-border-color

資訊按鈕的邊框顏色

button-warning-background-color

警告樣式的按鈕（具有類.buttonwarning的按鈕）的背景顏色

button-warning-font-color

警告樣式的按鈕的字型顏色

button-warning-border-color

警告樣式的按鈕的邊框顏色

button-alert-background-color

警報按鈕的背景顏色（具有類.buttonalert的按鈕）

button-alert-font-color

警報按鈕的字型顏色

button-alert-border-color

警報按鈕的邊框顏色

問號

對於介面工具集，當作者在說明內容中新增長說明時，會顯示問號。 會使用引導中提供的預設圖示。 若要使用自訂圖示，您可以自訂引導圖圖示。

CSS 類別

guideHelpQuestionMark

變數

說明

questionmark-font-color

圖示的顏色

questionmark-hover-font-color

滑鼠滑鼠暫留在表徵圖上時的顏色

表格

您可以使用下列變數來變更表格中標題和內文列的顏色主題。

變數

說明

table-header-bg-color

標題行的背景顏色。 預設值為 #333.

table-odd-row-bg-color

奇數正文行的背景顏色。 預設值為 rgb(255, 255, 255).

table-even-row-bg-color

偶體行的背景顏色。 預設值為 #eee.

檔案附件

適用性表單的「檔案附件」Widget可讓您上傳檔案。 您也可以使用變數來自訂介面工具集。

變數

說明

fileItemPadding

填充介面工具集中顯示的檔案

fileItemBackground

檔案項的背景顏色

fileItemBorderColor

上邊框的邊框顏色

fileItemColor

檔案項的字型顏色

filePreviewIconColor

介面工具集中「預覽」圖示(Bootstrap圖示)的顏色

fileItemCommentHeight

檔案項的注釋高度

有四種類型的導航標籤。 這些功能包括左側、頂端、精靈和折疊式功能表的標籤。 每個導航器都有不同的類。

導覽器

CSS 類別

Accordion

.accordion-navigator

tabs on the left

.tab-navigator-vertical

tabs on the top

.tab導覽器

Wizard

.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 類別

說明

nested_true

具有巢狀/子/子導覽器的標籤導覽器（左側和頂部）

nested_false

沒有巢狀/子/子導覽器的標籤導覽器（左側和頂部）

guideNavIcon類別提供索引標籤導覽器（包括左側和頂部）和精靈導覽器的預設圖示。

CSS 類別

guideNavIcon
注意

您可以在製作時在面板上提供CSS類，以更改特定導航器的表徵圖，其形式為<CLASS_NAME>。 可為導航器的表徵圖添加​**<CLASS_NAME>_nav**。

變數

說明

標籤導覽器

navigator-bg-color

整個頁簽導航器的背景顏色

tabs-bg-color

頁簽的背景顏色

tabs-font-color

頁簽的字型顏色

tabs-hover-bg-color

暫留時標籤的背景顏色

tabs-hover-font-color

暫留時標籤的字型顏色

tabs-active-bg-color

面板聚焦時的背景顏色（活動）

tabs-active-font-color

面板聚焦時的字型顏色

tabs-completed-bg-color

面板的完成運算式傳回true時的背景顏色

tabs-completed-font-color

面板的完成運算式返回true時的字型顏色

tabs-stepped-bg-color

 面板聚焦一次但完成運算式傳回false時的背景顏色

tabs-stepped-font-color

 面板聚焦一次但完成運算式傳回false時的字型顏色

tabs-border-color

標籤的邊框顏色

tabs-font-size

頁簽的字型大小

tabs-padding

頁簽的邊框間距

tabs-margin

索引標籤的邊界

tabs-vertical-margin

垂直標籤的邊距

tabs-border-thickness

標籤的邊框大小

tabs-min-height

制表符的最小高度

heirarichal-indent

嵌套頁簽的縮進

嚮導導航器

wizard-navigator-bg-color

 整個嚮導導航器的背景顏色

wizard-tabs-bg-color

精靈的背景顏色

wizard-tabs-font-color

嚮導的字型顏色

wizard-tabs-active-bg-color

面板聚焦時的背景顏色（活動）

wizard-tabs-active-font-color

面板聚焦時的字型顏色（聚焦）

wizard-tabs-completed-bg-color

面板的完成運算式傳回true時的背景顏色

wizard-tabs-completed-font-color

面板的完成運算式返回true時的字型顏色

wizard-tabs-stepped-bg-color

 面板聚焦一次但完成運算式傳回false時的背景顏色

wizard-tabs-stepped-font-color

面板聚焦一次但完成表達式返回false時的字型顏色

wizard-tabs-border-color

精靈的顏色

wizard-tabs-font-size

嚮導的字型大小

wizard-tabs-padding

嚮導的邊框間距

wizard-tabs-border-thickness

嚮導的邊框大小

wizard-nav-bullet-border

嚮導導航器項目符號的邊框顏色（前置詞為註解/標籤）

wizard-progress-bg-color

嚮導導航器進度欄的背景顏色

wizard-progress-color

填充進度條的顏色

折疊式面板導覽器

accordion-tabs-padding

折疊式面板的邊框間距

面板樣式

面板包含可選工具列及其內容。

CSS 類別

guidePanelNode

變數

說明

panel-background-color

面板的背景顏色

panel-font-size

面板文本的字型大小

panel-font-color

面板文本的字型顏色

panel-padding

面板內填充

panel-description-font-size

面板說明的字型大小

panel-description-padding

面板說明的邊框間距

panel-help-bg-color

面板說明的背景顏色

panel-help-border-indicator-color

面板說明的指示器邊框顏色

面板節點分為導覽器和內容。 不是內容的個別樣式元件。 描述的變數會套用在導覽器上以及內容上。

&ast；最頂端面板(RootPanel)沒有此類。

行動樣式

標題欄

這些變數會影響行動裝置或小型螢幕裝置上可見的標題列，這些裝置包含面板標題以及下一個和後面的導覽器。

CSS 類別

guide-header-bar

變數

說明

headerbar-background-color

標題欄的背景顏色

headerbar-font-color

標題欄內文本的字型顏色

headerbar-padding

標題欄的邊框間距

滾動指示器

這些變數會影響「捲動」指示器，此為顯示在行動裝置或小型螢幕裝置上的橘色箭頭。 「捲動」指標表示畫面的可見部分以外有內容。 您可以向下捲動以查看。 當您點擊內容結尾時，箭頭會消失。

CSS 類別

mobileScrollIndicator

變數

說明

scrollIndicatorBottom

從底部固定陰旋器位置

scrollIndicatorRight

從右到右的陰旋器的固定位置

scrollIndicatorWidth

捲軸寬度

scrollIndicatorHeight

陰囊高度

行動固定工具列版面特定變數

下表中的這些變數會影響行動固定工具列配置。

CSS 類別

mobileToolbar

變數

說明

mobileToolbarBottom

從底部固定行動裝置上的工具列位置

mobileToolbarTop

從上方固定行動裝置上的工具列位置

mobileToolbarLeft

修正行動裝置上左側工具列的位置

mobileToolbarRight

在行動裝置上，從右方固定工具列的位置

mobileButtonIconTopMargin

從頂部固定工具欄按鈕表徵圖的位置

mobileButtonIconWidth

行動裝置上工具列按鈕圖示的寬度

mobileButtonIconHeight

行動裝置上工具列按鈕圖示的高度

mobilefixedtoolbarbgcolor

行動裝置上工具列的背景顏色

本頁內容