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 因此之後應該會再補上關於這堂課以及主線任務提供的教學影片,所提到且不熟的內容,來完備我缺少的觀念~

接下來,繼續加油!

參考資料