# Bootstrap 5 新手教學實戰營-彙整資源

---此區已停更，已改用書本模式彙整資源---
https://youtu.be/msY4g36daUo

## slack 社群

https://join.slack.com/t/hexschool-share/shared_invite/zt-rl1vdisl-RFInMtQ0RUbHk_TTzedgYQ

目前進度：

主線任務 LV3 未完成

https://codepen.io/mrwang01/pen/JjWBgvV

## 線上講義：

https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2Fd1y3F7nUTlmb8FRkTAVsbQ

## 助教精華筆記
[](https://hackmd.io/@WangShuan)

* 搭配線上講義
http://bit.ly/Bootstrap5實戰營助教TA筆記-HackMD

## 線上影音清單連結：
https://youtube.com/playlist?list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P

<iframe width="560" height="315" src="https://www.youtube.com/embed/B9EGGQr-r80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 個人紀錄區：
CSS Reset 分兩種版本
CSS Reset：

https://meyerweb.com/eric/tools/css/reset/

normalize：

bootstrap 本身有導入

.btn .btn-primary .btn-sm 樣式組合技

card :
display : flex;
flex-direction : column

bootstrap img

.img-fluid {
max-width: 100%;
height: auto;
}

persent 寬度換算依據父元素

手機螢幕大小

開版：
最保險 375 414

se 320

iPad 768px
PC 1140 1200

伸縮自如的 RWD 排版術(下)
52:26

桌機版優先：
先寫最大寬度上限
https://codepen.io/liao/pen/WNQJVqr

RWD flex 範例
https://www.mcdonalds.co.jp/menu/

手機版優先
https://codepen.io/liao/pen/jObxgeW

bootstrap 是以手機優先
先寫最小固定寬度

圖片 logo 置換方式

@media (max-width: 768px) {
	.logo{
		margin-bottom:20px;
		width:150px;
	}
	.logo a{
		width:150px;
		height:150px;
		background:url(../images/M2.png) no-repeat
	}	
}

.logo a{
	display:block;
	width:250px;
	height:250px;
	background:url(../images/M1.png);
	/* 圖片取代文字技巧 */
	text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
}

網頁不可以顯示 X 軸

# 格線系統

官方文件檔看過一輪

https://layoutit.com/build

６／１１ 再接再力！

https://layoutit.com/build

box sizing 程式體驗課程有說明
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

## 搭配服用
https://courses.hexschool.com/courses/20201112/lectures/32576520