.

iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

後轉前要多久系列 第 17

【後轉前要多久】# Day17 BootStrap - 介紹、導入

  • 分享至 

  • xImage
  •  

個人主要是看金魚都能懂的Bootstrap影片學習BootStrap的,
比起看文件的方式學習,金魚有帶很多比較有趣的範例及常見排版,
但CSS樣式及BootStrap,我覺得最重要的還是自己練習過才會更加精熟。

BootStrap

BootStrap是透過CSS和JS寫成的一包library,
載入後可以透過library中存在的class直接來套用CSS樣式,
搭配上對應的HTML使用就能組成元件了。

BootStrap可以想像成,
假如你平常有自己實做一些小元件、自己刻寫CSS,
當刻了好幾次之後,就發現很多元件大同小異,
比方說: 連結導覽列、按鈕、頁碼
這邊用到、那邊也用的到,基本上都是同樣的外觀形式

又或者寫了幾次後,發現其實每個網站都有各自的顏色風格,
連結導覽列、按鈕、頁碼的顏色,只要在同一個網站上,都是那兩三種顏色在變化
最後就把顏色抽出來另外寫

而外存下來或者抽出來寫,下次用到時就直接複製過來用、小改一下,
就能很快達成需求啦~
BootStrap就是類似這樣眾人的經驗產物

BootStrap box-sizing

BootStrap 使用box-sizing: border-box
定義width、height就是實際呈現長寬,
border與padding列入其中會自動按比例計算,
而margin不在計算範圍內,但仍向外擴張。

版本4與5差異

BootStrap 4 的部分JS功能是依賴於jQuery的。

但BootStrap5 完全捨棄掉了 jQuery,
也等於是捨棄掉了對IE11瀏覽器的支援。

Bootstrap 5 is designed to be used without jQuery.

引入方式

BootStrap引入方式分成兩種(基本上所有網頁套件引入方式都分成這兩種)

方法1 CDN連結

把CDN網址加入到html <head>中,透過CDN連結引入,
當有人要瀏覽你的網站時,瀏覽器會先去下載CDN連結中的library回來。

參考 v4.6版本v5.1版本

JS分成Bundle及Separate兩種版本,
Separate是把必要用到的套件獨立開來放,(v5用到popper、v4用到jquery及popper)
而Bundle是把Separate合在一塊,所必要用到的套件都在這裡面了

在此以v5.1做示範

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

...

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

優點: 不用自己將Bootstrap載下來;加一兩行程式碼就搞定bootstrap的載入
缺點: CDN不是自己的,沒辦法修改客製化library。CDN會不會有連不上、或者安全性上的考量?

方法2 下載到本地中引入

也可以將整包BootStrap下載下來,放到專案裡面。
載下來後,因為library在本地,可以隨意修改。

參考 v4.6版本v5.1版本

Compiled CSS and JS下載 (Source files需再透過SASS編譯後才能使用)

載到本地
載下來會發現有這麼多的檔案。

優點: 可以客製化library。
缺點: 多了一些步驟。在第一次傳輸時可能比CDN還慢(因CDN有cache機制)


一開始學習建議把整包bootstrap載下來使用

沒方向要從哪裡開始?

以v5.1為例,

載下來後,css資料夾內有這麼多個檔案
bootstrap.css
bootstrap.rtl.css
bootstrap-grid.css
bootstrap-grid.rtl.css
bootstrap-reboot.css
bootstrap-reboot.rtl.css
bootstrap-utilities.css
bootstrap-utilities.rtl.css
要從哪裡開始?

CSS其實只要留bootstrap.css這個檔案就可以了,
因為bootstrap.css裡面已經包含所有其他如 grid、reboot、utilities版本的css。

min版本是把程式碼排版換行、空白全部刪除,經過壓縮降低檔案大小的版本
其他的例如 bootstrap.css.mapbootstrap.min.cssbootstrap.min.css.map 這些資料都可以先刪除,
以降低一次接觸太多的新東西的恐慌程度。

另外JS也是,只留bootstrap.bundle.js就好,其餘刪除。

刪光光之後只會留下這兩個檔案,看起來心情舒暢許多

只會留下這兩個檔案

之後試試看以下的程式碼,新增一個div.container

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<div class="container"></div>

</body>
</html>

使用Webstorm IDE的話,按下ctrl+左鍵 就可以導到有出現container位置的CSS去了,
在開發時,有助於我們查看BootStrap內到底寫了些什麼樣的CSS樣式。

webstorm


上一篇
【後轉前要多久】# Day16 CSS - 小物件實做(引導列、滑動按鈕、同心圓、限時特價商品)
下一篇
【後轉前要多久】# Day18 BootStrap - 快速看文件
系列文
後轉前要多久30
圖片
  直播研討會

尚未有邦友留言

立即登入留言