2020年BootStrap課堂筆記

BootStrap

1. BootStrap的簡介

概念：web前端的框架

功能：

1. 定義了很多css樣式和js插件，使編碼簡潔
2. 響應式佈局，同一套頁面可以基於不同的分辨率設備顯示不同佈局

使用步驟

1. 下載好BootStrap文件
2. 將css,font,js文件夾複製粘貼到項目
3. 創建html頁面，引入必要的資源文件bootstrap-3.3.7-dist文件夾，jquery-3.2.1.min.js

響應式佈局

• 同一套頁面可以兼容不同分辨率的設備

• 實現：依賴柵格系統：將一行平均分爲12個格子，可以指定元素佔幾個格子

• 實現步驟：

  1. 定義容器：
     • container：兩邊留白
     • container-fluid:每一種設備都是佔頁面寬度的100%
  2. 定義行:
     • row
  3. 定義元素:指定該元素在不同設備上，所佔的格子數目。class樣式：col-設備代號-格子數目
     • 設備代號：
       • xs：超小屏幕 手機（<768px）
       • sm：小屏幕 平板（>=768px）
       • md：中等屏幕 桌面顯示器（>=992px）
       • lg：大屏幕 大桌面顯示器（>=1200px）
     • 注意：
       1. 一行中如果格子數目超過12，則超過部分自動換行
       2. 柵格類屬性可以向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備
       3. 如果真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素佔滿一

  2.CSS樣式和JS插件

  全局CSS樣式：

  1. 按鈕：class="btn btn-default"
  2. 圖片：
     • class="img-responsive"：圖片在任意尺寸都在100%
  3. 表格
  4. 表單

  組件：

  1. 導航條
  2. 分頁條

  插件：

  1. 輪播圖