【前端基礎】Bootstrap

什麼是 Bootstrap ？

Bootstrap ，來自 Twitter ，是目前很受歡迎的前端框架。 Bootstrap 是基於 HTML 、 CSS 、 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

 

它由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發，是一個 CSS/HTML 框架。 Bootstrap 提供了優雅的 HTML 和 CSS 規範，它即是由動態 CSS 語言 Less 寫成。 Bootstrap 一經推出後頗受歡迎，一直是 GitHub 上的熱門開源專案，包括 NASA 的 MSNBC （微軟全國廣播公司）的 Breaking News 都使用了該專案。

 

國內一些移動開發者較為熟悉的框架，如 WeX5 前端開源框架等，也是基於 Bootstrap 原始碼進行效能最佳化而來。

 

Bootstrap 框架用途和優點

我們可以使用 Bootstrap 框架提供的樣式和元件快速的完成一個網站的前端頁面，只需要引用一些定義好樣式和元件（透過定義好的 class 來引用相應的樣式和元件），就可以完成一個非常漂亮網頁。而且 Bootstrap 框架還支援自適應，在不同大小的螢幕上會自動調節網頁顯示的內容，避免了在在 pc 上很漂亮的網頁，而在移動端左右出現捲軸，網頁內容太小看不清等不利於使用者體驗的表現。

 

Bootstrap 文件目錄結構

bootstrap /

├── css  // CSS 檔案

│    ├── bootstrap-theme.css  // Bootstrap 主題樣式檔案

│    ├── bootstrap-theme.css.map

│    ├── bootstrap-theme.min.css  // 主題相關樣式壓縮檔案

│    ├── bootstrap-theme.min.css.map

│    ├── bootstrap.css

│    ├── bootstrap.css.map

│    ├── bootstrap.min.css  // 核心 CSS 樣式壓縮檔案

│    └── bootstrap.min.css.map

├── fonts  // 字型檔案

│    ├── glyphicons-halflings-regular.eot

│    ├── glyphicons-halflings-regular.svg

│    ├── glyphicons-halflings-regular.ttf

│    ├── glyphicons-halflings-regular.woff

│    └── glyphicons-halflings-regular.woff2

└── js  // JS 檔案

    ├── bootstrap.js

    ├── bootstrap.min.js  // 核心 JS 壓縮檔案

└── npm.js

 

更多 Bootstrap 課程：