Bootstrap官網：Bootstrap中文網 鉑特優選

Bootstrap 下載

點擊進入中文文檔

點擊下載?

生產文件是開發響應式網頁應用，源碼是底層邏輯代碼，因為是要制作響應式網頁，所以下載開發文件

引入 css 文件， bootstrap.css 和 bootstrap.main.css ，前者跟平常書寫 css 的樣式一樣，都是選擇器然后樣式屬性，后者則是給瀏覽器看的，但是輕量，所以一半就是選擇 后者。

要使用哪個就將哪個放到根目錄文件夾中

Bootstrap 使用

• 引入 Bootstrap CSS 文件
• 調用類名 ：container? 響應式布局版心類型

Bootstrap - 刪格系統?

在柵格系統中整個網頁寬度平分12等份，一行排4個，每個是3份，類名中就加上這個份數

安裝插件 IntelliSense for CSS class names in HTM，能提示柵格系統相應的類?

Bootstrap - 全局樣式 - 按鈕

Bootstrap - 全局樣式 - 表格類:

table-success加給整個 table則整個表格顏色都是綠色，也可以加給一行，該行就是綠色

Bootstrap 組件 （Components)?:

js文件不是必須的，如果網頁有動態效果引入即可，沒有就不用

直接官網復制粘貼 導航欄 HTML 代碼，然后按需進行修改

例如改變背景色，右鍵檢查?找出背景色所在選擇器，將 樣式寫在 link 引入的 bootstrap.main.css之后，因為后邊的會覆蓋前邊樣式，并且注意 右鍵檢查時有沒有 ！import 將 css 優先級提到最高

（導航欄 - j靜態 - 不帶 js）

輪播圖 - 動態 - 帶 js?

引入 js 文件

?

Bootstrap - 字體圖標:

下載安裝使用

?

?

使用字體圖標時，先引入字體圖標文件，在其字體圖標調用時類名前加上 bi?-

綜合案例 - 首屏

• 新建 less文件，將其導出到 css 文件夾中
• 在 html 中 引入 bootstrap 框架樣式，字體圖標，js 文件，以及自己的 css 文件，還有字體圖標

導航

?

設計稿中背景色是 透明的：右鍵查找背景色屬性就行層疊修改

?固定定位

?

版心 ：去掉 fluid

?

導航內容左右對齊：flex-grow : 0;

?

左邊換圖，右邊換字?（多加了 3 個 a）

?

輪播圖

• 使用背景圖更方便而不是 img，因為 img 需要寫寬高，同樣其父級盒子也要寫寬高，所以直接在 div 盒子中寫背景圖更方便

• 增加指示器個數與背景圖個數一樣

圖片響應式效果：

因為之前導航欄沒有輪播圖，字又是白色，如果設置背景顏色為透明的話就看不見了，現在將背景顏色改為透明

開源項目：

• 加 container 類版心居中
• 柵格系統設置響應式布局，給四個盒子加上視口寬度寬度分別大于 992 和 768 時的盒子分布情況的類
• container類是版心居中效果
• row是 flex 布局效果

?

• 不管視口如何變化，高度不變始終 200,所以設置 高度
• 因為已經給了 一行排列的四個盒子寬度設置是 25%，所以如果要加上右外邊距的話，鐵定得換行。選中一行排列的四個盒子發現每個盒子設置了內邊距，所以在盒子中加上一個 a ,給 a 設置寬度跟父級一樣，設置背景色，內邊距不會填充子級的背景色，所以視覺上就相當于兩個盒子之間有了 margin
• 所以柵格中盒子之間顯示的邊距不是 margin 而是 padding

?

接下來就是 javascript了