Day 10 (Bootstrap)

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;      }