Bootstrap 概觀
Bootstrap 是一個前端框架,可協助您使用現成的 CSS 和 JavaScript 元件為瀏覽、表單和按鈕等常見元素設計 Web 介面。 它還具有回應式格線配置系統,可以根據不同螢幕尺寸的裝置 (例如手機和平板電腦) 調整您的網站。 使用 Bootstrap 配置系統,您可以建立一個在客戶可能使用的任何裝置上都能良好呈現的網站。
Power Pages 範本使用標準 Bootstrap 元件和最少的自訂樣式。 使用這些範本,您可以輕鬆變更主題 (字體、顏色等),以讓整個網站符合您的品牌和偏好。
Power Pages 支援 Bootstrap 版本 3.3.6 和 Bootstrap 版本 5。 Bootstrap 版本 5 提供了改進的使用者體驗 (UX) 功能和新元件,例如 Accordion、offcanvas 和 RTL 支援。
對於新 Power Pages 網站,您需要在環境中設定 Bootstrap 版本 5。 您也可以將現有 Bootstrap 版本 3 網站移轉到版本 5。
自訂啟動程序
若要自訂 Bootstrap,您可以變更變數的值,然後下載使用自訂值編譯的 Bootstrap 版本。
Bootstrap 變數的強大之處在於它們定義了框架中的所有樣式,而不僅僅是一個元素。 例如,變數 @font-size-base
指定網站上文字的預設大小 - 正文、標題和所有其他文字元素。 H1 標題可能定義為 300% @font-size-base
。 設定這個變數就可以運用一致的方式控制網站的整體印刷比例。
您可以透過官方 Bootstrap 網站建立 Bootstrap 的自訂版本,或使用可能提供更簡單的介面或預先設計的主題的第三方網站。 官方啟動程序自訂員網站提供有關啟動程序自訂的詳細資訊。
當您下載自訂的 Bootstrap 版本時,它會包含下列目錄結構:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
根據所使用的自訂工具應用程式,目錄結構可能只包含 bootstrap.min.css
。 它是包含您的自訂設定的檔案。 所有 Bootstrap 自訂版本的其他檔案均相同,而且已包含在您的網站中。