1.疑問？

一定要用Bootstrap嗎? => 自己決定
我朋友說Bootstrap業界沒人用 => 104查就知道了
要怎麼使用部分的Bootstrap
(1)不要修改引用檔
(2)自己寫
(3)看有沒有支援到 CSS files , JS files 有可以分別引用
https://getbootstrap.com/docs/4.6/getting-started/contents/

2.Bootstrap套用後

試試看改變class有甚麼變化？
如果不喜歡可以刪掉不要用或改掉~

3.圖片隨著視窗大小改變

若使用者為手機給小圖,使用電腦給大圖,貼心用
假圖製作網站：https://dummyimage.com/

      <picture>
        <source media="(min-width: 650px)" srcset=".jpg" />
        <source media="(min-width: 465px)" srcset=".jpg" />
        <img src=".jpg" style="width: auto" />
      </picture>

4.文字位置設定：

.text-left
.text-center
.text-right
因為span是行內元素所以沒有空間可以移動,區塊(block)的才可以使用

      <span class="text-center">Cat</span>
      <p class="text-center">Cat</p>
      <div class="text-center">Cat</div>
      <h1 class="text-center">Cat</h1>

5.在不同的螢幕寬度上，設定不同的對齊方式

https://getbootstrap.com/docs/4.6/layout/grid/#grid-options

      <p class="text-sm-right">Cat</p>
      <p class="text-md-right">Apple</p>
      <p class="text-lg-right">bee</p>
      <p class="text-xl-right">dog</p>

或
當文字溢出時,使用「…」來表達 .text-truncate
width: 25% => 會配合螢幕變動

<span class="d-inline-block text-truncate" style="width: 25%"> CatCatCatCatCatCatCatCatCatCatCatCatCatCat </span>

6.margin,padding的命名及使用方式

https://getbootstrap.com/docs/4.6/utilities/spacing/

{property}{sides}-{size} for xs

{property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

2.property
只能用m or p

3.sides
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

4.size
0 1 2 3 4 5 auto

如:margin-top * 0.25= mt-1
px-md-5

7.Sizing

m-margin
p-padding
w-width
h-height
有些數字沒有,就必須自己設定 如w-30
https://getbootstrap.com/docs/4.6/utilities/sizing/

8.bootstrap的數字定義

col-1=>12份裡面,要站1份=>8.333%
w-25=>在100%裡面占25=>四分之一
mt-1 =>0.25
flex-grow-1 =>分配位置 只有0.1
order-1 =>越小越前面,共12

9.bootstrap一樣有padding難題

同CSS 會整個被推下去

      .box {
        background-color: red;
        height: 200px;
      }

    <div class="box">
      <div class="mt-5">Apple</div>
    </div>

解決辦法

      .box {
        background-color: red;
        height: 200px;
        /* 方法1. */
        /* padding: 1px; */
        /* 方法2. */
        /* border: 5px solid black; */
      }

      .box > div {
        width: 100px;
        height: 100px;
        background-color: royalblue;
        /* 方法3.*/
        display: inline-block;
      }