科技新知 |
一、宣告bootstrap4及小圖示
見例子
二、Grid 格線：
在畫布上每一列有12格子，視需求來分群，例如分為col-4 + col-8 或是col-4 + col-4 + col-4 總合為12格子，如果總和不足12則用格線的排版來調整左右；如果總和超過12則會摺疊下來。
1.外層 class="row"
2.內層 class="col-x"
3.內層內容放在class="col-x" 的內層
很重要，主要原因是空間補回及flex
三、flex 格線的排版：
flex-direction：決定軸線 "d-flex flex-row","d-flex flex-row-reverse","d-flex flex-column","d-flex flex-column-reverse"
justify-content：主軸線的對齊（不滿12等分時） -start(起點),center(中點),-end(終點),-around(物件平均分配),-between(頭尾靠左及右後物件等距分配)
align-items：交錯軸線的對齊 -start(起點),center(中點),-end(終點),-baseline(對齊文字) ,-stretch(頭尾拉滿)
order：排序 order-1,2,3排序
align-content：所有內元件對齊 -start(起點),center(中點),-end(終點),-around(物件平均分配),-stretch(頭尾拉滿)
align-self：針對某一內物件的對齊（交錯軸方向） -start(起點),-center(中點),-end(終點),-baseline(對齊文字),-stretch(頭尾拉滿)
flew-wrap：換行
見例子
四、透過 @media screen 控制顯示器的斷點
xs：顯示寬度 < 576px 直式手機 col-x (不要寫成col-xs-) 內建值
sm︰顯示寬度 576px ~ 768px之間 橫式手機 col-sm-x
md：顯示寬度 768px ~ 992px之間 平板 col-md-x
lg：顯示寬度 992px ~ 1200px 電腦 col-lg-x
xl：顯示寬度 > 1200px 大電腦 col-xl-x
見例子
四、外部容器container 與container-fluid的差異
-fluid滿版
五、間隔 utility-space
m,p：margin（邊界，與其他元素間的距離）,padding（留白，內容與框線之間的距離）
t(top),b(bottom),l(left),r(right),x(left,right),y(top,bottom)
0(清空),1,2,3,4,5,auto(置中)
例：px-3 padding,left,right,3
h-50 高度50%
style="height: 100vh" 裝置高100%
六、高度
<div class="row justify-content-end" style="height: 400px">
<div class="col-sm-6 align-self-center">測高度</div>
</div>
|
|
