01 | Bootstrap使用入門

Bootstrap做一個簡單的頁面佈局 在正式去改專案程式碼之前，我們先做一個靜態頁面，根據我們之前的設計。這也是正式開發中常見的流程——有前端組/部門來做靜態頁面，後端來套頁面。

介紹 我們先來了解下Bootstrap是什麼。Bootstrap發展到現在，已經不能夠用css框架來概括了，因為它提供了很多除了頁面佈局之外的功能，封裝好了很多常用的互動的元件。因此這個框架中除了有css之外，還有javascript程式碼。這些都是我們開發是會用到的。

Bootstrap之所以能夠流行起來，最大的原因還是它的易用性和美觀，雖然不如專門的業務定製來的更好，但對於沒有設計師團隊資源的人來說，已經比自己畫的頁面好看很多了。

我們先看下這個框架能夠提供給我們什麼功能，從大的分類上來說包含以下幾個：

頁面腳手架 —— 比如：樣式重置、瀏覽器相容、格柵系統、兩個簡單的佈局 基礎的css樣式 —— 比如：程式碼高亮、排版、表單、表格和一些小的樣式效果 元件 —— 提供了很多常用元件，如：tab、pill、導航、彈窗、頂部欄等 javascript外掛 —— 主要是一些動態的功能，比如下拉選單、模態窗、進度條等 佈局和格柵系統 佈局和格柵系統需要單獨拿出來說，我們大部分需要用到的就是兩個配置/樣式。

佈局我們可以

簡單的頁面佈局 有了一個大概的瞭解之後，我們來實踐一下，

參考 http://v3.bootcss.com/ https://getbootstrap.com/ http://www.bootcdn.cn/bootstrap/ https://zh.wikipedia.org/wiki/SHA%E5%AE%B6%E6%97%8F https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes https://developer.mozilla.org/zh-CN/docs/Web/Security/%E5%AD%90%E8%B5%84%E6%BA%90%E5%AE%8C%E6%95%B4%E6%80%A7#%E5%9C%A8_script_%E6%A0%87%E7%AD%BE%E4%B8%AD%E5%A2%9E%E5%8A%A0_SRI