Bootstrap入門指南：開始使用簡單強大的前端框架

15th鐵人賽 bootstrap5 bootstrap入門前端超實用框架: bootstrap 入門到實戰教學 bootstrap教學

阿沁

2023-09-16 00:18:33

2583 瀏覽

分享至

如果你是一位從事前端開發的人，那麼 Bootstrap 將成為你的得力助手。它是世界上最受歡迎的框架，用於建立響應式、行動優先的網站。為網站和應用程式的設計和開發提供了許多有用的工具。在這篇文章中，我將介紹Bootstrap 的特色、好處以及如何開始使用它。

Bootstrap 是什麼？

Bootstrap 是一個開源的前端框架，由 Twitter 開發並維護。它提供了一組用於網頁設計和開發的CSS樣式、JavaScript組件和模板。Bootstrap 的目標是幫助開發者建立美觀、響應式（適應各種螢幕尺寸）、且易於維護的網站和應用程式。
下圖為官方文件，提供各種元件、類別與講解。

Bootstrap 的特色：

簡單易用
Bootstrap 的設計原則之一是簡單易用。因為它本身已經具豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。等程式碼，當我們有需要，就可以通過在HTML中添加預定義的CSS類別，輕鬆實現各種效果，無需自己編寫大量的CSS代碼。
響應式設計
Bootstrap 提供了強大的響應式設計工具，使你的網站在不同大小的螢幕上都能正確顯示，無需額外的編碼。
風格一致性
Bootstrap 的風格和元件是經過精心設計的，確保你的網站看起來一致且專業。
大量元件
Bootstrap 包含了許多常用的前端元件，如按鈕、導航、表格、表單等，減少了開發時間。

為什麼要使用 Bootstrap？

或許你會覺得: 「我自己就很會寫CSS跟HTML了，那還需要使用Bootstrap嗎?」
那我告訴你: 太好了!那你更適合使用bootstrap了! 以下是一些使用 Bootstrap 的好處：

節省時間
Bootstrap 提供了大量的預設樣式和組件，可以節省你編寫自定義CSS和JavaScript的時間。
響應式設計
在行動設備和桌面瀏覽器上都能正確顯示你的網站，無需額外的代碼。
易於自定義
儘管 Bootstrap 提供了預設樣式，但你仍然可以輕鬆自定義它們以滿足你的設計需求。
大型社區支持
由於 Bootstrap 的廣泛使用，你可以輕鬆找到解決問題的資源，並參與活躍的開發社區。

既然好處那麼多，我們趕快開始使用，讓bootstrap 成為我們的得力助手!

如何開始使用 Bootstrap？

在這裡放上bootstrap 的官方文件 : Bootstrap 官方文件。
這裡也有六角學院翻譯過後的中文版官方文件 :中文版 Bootstrap 官方文件。

要開始使用 Bootstrap，只需遵循這些簡單的步驟：

引入 Bootstrap CSS 和 JavaScript cdn (官方文件有其他方法，這篇文章使用cdn 方式):
在你的HTML文件中，使用以下代碼引入 Bootstrap 的CSS和JavaScript文件(官方文件的這一頁也有)：

<!-- Bootstrap css 的cdn ，放HTML 的 head中-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

<!-- Bootstrap Javascript 的cdn ， 放在HTML </body> 之前-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>

至於為何要導入Bootstrap JavaScript，是因為我們可能會用到像是彈出視窗效果的模組，就會需要JavaScript。