Bootstrap - 概述

Bootstrap

Bootstrap 是一個流行的開源前端框架，用於建立響應式和移動優先的網站和 Web 應用程式。

它提供了一套 CSS 和 JavaScript 元件，例如網格、表單、按鈕、導航欄等等，這些元件可以輕鬆實現和自定義，以建立響應式且視覺上吸引人的 Web 介面。

使用 Bootstrap，開發者可以透過利用預先設計的元件以及網格系統來建立響應式佈局，從而節省時間和精力。它還提供了許多樣式選項和實用工具，以增強網站的整體外觀和功能。Bootstrap 被廣大 Web 開發者廣泛使用，以簡化 Web 開發流程並建立一致且視覺上吸引人的使用者介面。

Bootstrap 的歷史

Mark Otto 和 Jacob Thornton 在 Twitter 開發了 Bootstrap。2011 年 8 月，Bootstrap 在 GitHub 上作為開源產品釋出。

Bootstrap 5 及更高版本中的關鍵點

與 Bootstrap 4 相比，Bootstrap 5 有幾個新功能和更改。一些值得注意的包括：

更小的檔案大小：Bootstrap 5.* 設計得更輕量級，去除了 jQuery 和其他依賴項。它已切換到原生 JavaScript。這導致載入速度更快。
改進的網格系統：Bootstrap 5.* 中的網格系統具有新的、更靈活的佈局。它引入了一個新的間距實用工具，並且不再依賴浮動。
更新的預設顏色和主題：Bootstrap 5.* 引入了一個新的預設調色盤和主題。新的顏色更現代、更具視覺吸引力。
改進的表單控制元件：Bootstrap 5.* 中的表單控制元件已透過新的樣式和選項得到增強。複選框和單選按鈕有新的樣式，以及改進的自定義選擇選單。
新的輔助類和實用工具：Bootstrap 5.* 引入了新的實用工具類和輔助程式，例如垂直居中、拉伸連結實用工具等等。
改進的文件和可訪問性：Bootstrap 5 的文件已更新和改進，使其更易於使用和理解。此外，Bootstrap 5 更關注可訪問性，具有更好的 ARIA 支援和改進的鍵盤導航。

Bootstrap - 優勢

使用 Bootstrap 有幾個好處：

響應式設計：Bootstrap 基於移動優先方法構建，這意味著它設計為響應式並適應不同的螢幕尺寸。這確保您的移動應用程式在各種裝置（包括智慧手機和平板電腦）上都能很好地顯示和執行。
節省時間：Bootstrap 提供了各種預定義且可自定義的 CSS 和 JavaScript 元件，例如網格、按鈕、導航欄和模態框。這些現成的元件有助於開發人員節省時間和精力，無需從頭開始編寫所有程式碼。
一致的外觀：使用 Bootstrap，您可以在移動應用程式中實現一致且專業的外觀。它提供了一組預定義的樣式和主題，可以輕鬆自定義以匹配您的品牌標識。
跨瀏覽器相容性：Bootstrap 設計為可在不同的 Web 瀏覽器中良好執行，確保您的移動應用程式對於使用者來說功能一致，無論他們偏好使用哪個瀏覽器。
社群和支援：Bootstrap 擁有一個龐大且活躍的開發人員社群，他們為改進 Bootstrap 並透過論壇和線上資源提供支援做出了貢獻。如果您在移動應用程式的開發過程中遇到任何挑戰或有任何疑問，這將非常有幫助。
可訪問性：Bootstrap 遵循現代 Web 開發標準和最佳實踐，包括可訪問性指南。這確保您的移動應用程式可供殘疾使用者訪問，從而提高其可用性和覆蓋面。
持續更新和增強：Bootstrap 定期更新和改進，包括新功能、錯誤修復和效能增強。透過使用 Bootstrap，您可以利用這些更新來保持移動應用程式的最新狀態和最佳化。

Bootstrap - 重要的全域性樣式

讓我們檢查一下 Bootstrap 如何使用數量有限的關鍵全域性樣式和設定，這些設定主要側重於規範跨瀏覽器樣式。

HTML5 文件型別

必須使用 HTML5 文件型別，否則樣式將不完整且不合適。

對於 LTR（從左到右）方向

    <!DOCTYPE html>
    <html lang="en">
      ...
    </html>

對於 RTL（從右到左）方向

    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
      ...
    </html>

視口元標籤

Bootstrap 遵循“移動優先”的開發方法，其中程式碼最初針對移動裝置進行最佳化，然後透過 CSS 媒體查詢根據需要放大元件。為了確保在所有裝置上準確呈現和觸控縮放，必須在網頁的<head>部分中包含響應式視口元標籤。

    <meta name="viewport" content="width=device-width, initial-scale=1">

Box-sizing

全域性box-sizing值從content-box切換到border-box，用於 CSS 中的擴充套件大小。它確保元素的最終寬度不受padding的影響。

以下程式碼將使所有巢狀元素（包括透過::before和::after生成的元素）繼承指定的box-sizing，用於該.selector-for-some-widget

    .selector-for-some-widget {
        box-sizing: content-box;
      }

重置樣式

為了糾正各種瀏覽器和裝置之間存在的不一致性，請使用重置樣式。這將改進跨瀏覽器渲染。

使用 CDN

CDN（內容分發網路）是一個伺服器網路，它可以加快資料密集型應用程式的網頁載入速度。

如何使用 Bootstrap CDN？

請按照以下步驟操作：

構建一個基本的 HTML 檔案 - 使用您喜歡的程式碼編輯器建立檔案。
將檔案轉換為 Bootstrap 模板 - 包括Bootstrap CSS CDN和 Bootstrap JS CDN 檔案，以及透過其 CDN 連結的 Popper 和 Bootstrap jQuery。
儲存並檢視檔案 - 將檔案儲存為副檔名為.html的模板。

列印頁面