Bootstrap 5 新手教學實戰營 - Week 1

疫情在家，就上網搜尋了一下有什麼東西可以打發時間，就發現了六角學院推出的「21 天 Bootstrap 5 新手教學實戰營」，既然要少出門，那就來報名好好充實一下自己的技術！

什麼是 Bootstrape？

是一個由 HTML、CSS、JavaScript 撰寫而成的前端框架，因為使用 RWD 自適應設計以及行動版優先，讓網站在各個裝置都能夠順利地顯示。

另外開發者可以專心在 HTML 上的開發，因為不管是 CSS 還是 JavaScript，Bootstrap 都有設計好的樣式或是套件可以去使用，是一個可以快速建置網頁介面的工具。

Bootstrape 5 文件

開始撰寫前：了解 CDN 與本地下載的差異

CDN 下載

  • 因為是載入別人的主機，所以流量部分不會算自己的。
  • 會根據使用者所在地連到距離最近的主機，所以速度不會是問題。
  • 如果 CDN 掛掉就會連不上。（但機率較不大）

本地下載

  • 可以客製化修改一些程式碼。
  • 若完整下載會較大，但也可以下載部分。（不過其實影響也還好，根據經驗圖片是影響較大的）

使用 CDN 安裝

CSS

將這段 代碼貼到 內所有樣式表之前。

1
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

JavaScript

將代碼貼在 結尾處。

1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

其它

以上只是將基本 CDN 安裝方式列出，另外還有分離式的 JavaScript 腳本代碼或是初學者範本，請 點擊我 觀看。

使用本地下載安裝

按此 並看到「編譯好的 CSS 和 JS」，按下下載。解壓縮檔案後，嵌入以下檔案即可使用：

  • css/bootstrap.min.css
  • js/bootstrap.bundle.min.js

如何確認 BootStrap 有安裝成功？( 以及相關技巧 )

可以裝設一些 BootStrap 撰寫好的套件來玩玩，像是 按鈕、互動視窗或是卡片。

使用 Bootstrap：用按鈕當範例

我只擷取兩行語法而已，它的用法就是去更改、組合 class，以下方語法為例，「btn」是預設按鈕該有的樣式，但在增加「btn-primary」就會根據例如背景顏色的不同、其它與預設樣式不同的設定值，去覆蓋原本預設樣式的設定值。

1
2
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

CSS Reset 與重置

早期 W3C 還沒有制定 HTML、CSS 等相關規格，導致各家瀏覽器對於 CSS 的預設樣式並不一樣，因此網頁設計師在一開始就必須先進行 CSS Reset 來將各瀏覽器不一樣的地方強制歸零，重置了各瀏覽器的樣式設定。

而 Bootstrap 也有針對向字型、標題、段落、……等還有其它部分做了重置，詳情可以參考這個頁面。

終於撰寫完 Week 1 筆記！

由於看到這個課程是星期一的時候，距離第二堂的週三剩兩天，然後週三要上整天的遠距教學，所以趕緊在週二晚上把針對課程內容的筆記補完，待會會再嘗試撰寫 LV1、LV3 的作業內容以及其它主線任務，希望能順利完成啊！

另外因為這次的課程，發現自己對於 CSS 以及 RWD 的某一些觀念真的不是很熟悉，或是聽到才驚覺原來如此啊！XD 因此之後應該會再補上關於這堂課以及主線任務提供的教學影片，所提到且不熟的內容，來完備我缺少的觀念～

接下來，繼續加油！

參考資料