認識 Bootstrap 文件

Bootstrap 路徑 : Documentation

  • Layout 排版
  • Content 內容
    • Reboot 重置 ,會提醒大家目前 Bootstrap 重置了哪些內容
  • Components 元件
  • Utilities 通用類別
    • 元件的輔助,元件樣式不足使用時,可用 utilities 內的樣式
  • Extend 擴充
    • Bootstrap 不夠用時,有哪些其他資源可載入使用
  • Migration 更版紀錄

加入 Bootstrap 元件及組成概念

Bootstrap 路徑 : Intoduction

  • 複製 css 與 JS 連結貼到 <head>
  • 通常 JS 會另外貼到 <body></body> 結束之前,先載入網頁讓畫面出來,JS 互動功能晚點再載入,延遲載入 JS 程式碼有助提高頁面載入速度

Bootstrap-CSS-JS圖示

  • 測試 Bootstrap CSS 是否有順利載入
    • 到 componets / Alerts 複製一段語法貼入 內查看是否有成功顯示
  • 測試 Bootstrap JS 是否有順利載入
    • 到 componets / Navbar 複製一段語法貼入 內查看是否有成功顯示

// 補充說明上方 Navbar 程式碼 ▼▼ 圖片出處於六角課程
Bootstrap-Navbar 程式碼

// 錯誤程式碼寫法 ▼▼ 圖片出處於六角課程
Bootstrap-Navbar 錯誤程式碼

用 Bootstrap 建立第一個網站

  1. Getting Started / Introdction
    • 複製 CSS 與 JS 貼入 HTML 中
  2. Conponents / Navbar
    • 選一組想要的 bavbar 貼入 HTML 中
  3. Conponents / Card
    • 選一組想要的 Card 貼入 HTML 中。 貼上後發現 card 完全沒有間距緊貼左右頁面,這時可用 Layout 複製 .container 包住 Card 區塊,左右間距就產生了
    • 但 card 與上方 Navbar 緊貼 ( 無間距 )。可至 Utilities / spacing 查看margin 、padding 上下左右與間距 size 的的設定,並挑選適合的屬性加入使其產生距離
      • 這邊使用 margin-top:16px; 於 Bootstrap spacing 中顯示方式為 mt-3 。
      • Bootstrap 使用 rem 為單位,預設16px
  4. Card 內的圖示可使用 lorempixel 的假圖產生器
    • http://lorempixel.com/400/200/food/1 → 網址 / 寬度 / 高度 / 類別 / 編碼 ,如果有很多的圖片可使用編碼依序排列下去
    • 把假圖生產器的網址丟入 .card 內的 <img src="..." class="card-img-top" alt="..."> 裡面

// 3. Layout .container 示意圖 ▼▼
Bootstrap-Layout-.container-示意圖

  • lorempixel 假圖產生器
    • 輸入網址 / 寬度/高度/類別 就可產生圖片
    • Use the placeholder Generator 中有很多類別可選擇

lorempixel-示意圖


資料來源

最後修改日期: 9 2 月, 2020

作者