# 2021-10-22 Bootstrap - Microsoft homepage
###### tags: `Bootstrap` `JS` `2021/10/22` `進度筆記` `前端心得`
---
講師: 佘昌霖 老師
---
# 早上的部分 - 微軟的仿切
# 分析版面
- 先分析頁面
> 先訂區塊
> 導覽列
> > 導覽列下有 Container
> Section
> footer
> 
> 
----
# 幫 Nav 上樣式
> 
> 剛好是 54px
## 取代 Nav bar 的 logo
> 
- 給他一個 class
```
看起來是 137 * 54
實際上 render 是 108 * 23
```
> 複製貼上的東西要調整縮排
> ==記得一個網頁沒有兩個 nav 互相包起來==
> 記得格式要跟 Bootstrap 一樣才有樣式
> 盡量重現環境
---
## 幫他上一個 container
- 不過這個 container 的寬是 1140
- 微軟的實際上沒這麼擠
- 在中間的導覽列中塞六個 li (含 a 標籤)
> 
> 
# 接著用文字顏色
- 調整預設文字顏色
> 找 Bootstrap 的顏色
----
# 如果文字引入
-
> 
> 如果是 css 自己寫的, 記得把引入的 css 放到最下面
> 
> 程式是一行一行讀的, 後面的會蓋過前面的
---
# 修改 bootstrap 的時候要注意格式
> 記得不要動到結構
> 他結構不只是單純 CSS, 還有混入 JS
> 
> 修改的時候要先知道修改哪個區域
- 如果要給個 menu
> 可以在 class 後面再多一個 menu
> 
- 如果綁手綁腳的話就盡量不要用 bootstrap
> 可以先上 Bootstrap 格式, 再上一個東西, 圖片, 文字
---
# 可以試著做出微軟的變版
---
# 微軟的卡片
- 4 排的時候是
```
col-3 col-3 col-3
```
- 2 排的時候是
```
col-6 col-6 col-6
```
- 之類的
> 
> 
> 這樣會一整排
- 可以改成
> 
> 
> 改排數編號
> 
> 
> 給了一個 border
> 然後再調整轉換的時機點
> 
> 可以到小於 sm 之前才變版
- 加個 margin btn
> 
> 
> 調整 margin
> 
> margin-1 會超過大小
- 每個方塊都有空隙就爆了, 要怎辦?
> 在 col 裡面再放一個方塊
> 
- card 在給個顏色
> 
> 再給個高度
> 
- 記得先用 bootstrap 的 card
> 再把它用得跟微軟的一樣
---
# 記得寫註解 - 這是好文明
- 丟微軟分頁的 icon
> 
> 也可以讓分頁自動抓
- font awesome
> font size 可以改變大小
> 也可以上網找別人用好的 CDN
> 
# 有個網站有統整常用套件, CDN
----
# Bootstrap 本身也有 icon
- 記得先看 liscene!
> 看他的使用規範
> 
```
Free, any way you use, open source 都是很重要的關鍵字XD
可以包起來, 然後__業使用
```
> 
> 也可以引入 CDN
> 
---
# 記得也有 Carousel 可以使用!
> 淡入淡出, delay 都有~
----
# 中間三個小卡片
> 
> 
---
# Margin 要記得調整
> 
---
# SVG 丟到 NAV 上
- SVG 本身也是 tag !
> 
> 可以把他丟到 HTML 架構中
> 本身需要佔有體積位置的話可以這樣丟
- 或是 新增一個 svg 檔案
> 
> 把 svg 丟進去
> 要怎麼下指令也會比較好下
> 
---
# 下午的部分
# 預告課後任務
- 切出這三個頁面
- 主頁(首頁)
> 
> 東西很多
- 登入頁面
> 
- 購物車
> 
- 要有 RWD
----
# 文字顏色的權重
- 要找出權重的指令
> 
> 再去蓋過
---
# 調整位置
---
# 做出 右側 nav
> 
---
# 做下拉選單
- Via data attributes
> 構成這個下拉選單, 有些東西是不能改的
```
例如: dropdown-menu
這東西一定要有
他是用 JS 去寫 data-toggle 去觸發的, 同層 class attribute 可以觸發
他會去父層找最接近的 dropsown
```
- Via JS
```
客製化的部分是用 JS 去寫的
```
- 找 dropdown-menu
> 
> 1025px x 660px
- 上個樣式
> 
> 看他現在是用甚麼方式在定位
> ![Uploading file..._xp9t9ra5j]()
```
記得看他剩下來的長度
再用 position 的 right 去推
```
> 然後 dropper 下拉選單的部分再自己上樣式
> 
- 放上 ul li 的時候要多注意
> 
> 樣式會不一樣
- 更改下拉按鈕的樣式
> 
> 要下在 ::after
> 
```
before & after
如果不要有樣式, 可以
content:"unset" 或是 "none"
```
> 
---
# icon 的部分用 img 塞入
---
# Carousel 的部分就直接塞
> 
# Carousel 的文字區塊
> 
> 文字區塊剛好有 relative 就可以直接對齊
> 
> 
```
輪播圖片的置中
#banner-1 .carousel-inner \> .carousel-item \> img {
margin: auto;
}
```
----
# 中間三張卡片的作法
- 
> 或者是不用 col 用 card
> 
> 
- 置中的方法
> 
> 把 border 拿掉, 看起來就有空格了
> 
- 上了圖片後
>
>記得看有沒有大小
> 
> 複寫他
> 記得下 display flex
> 
> 
> 
- 給他 padding
> 除了在 CSS 也可以在 HTML 直接下
> 
> 
- 給他 RWD 變版
> 
---
# card 欄位的作法
> 
> 
> 
> 
> 
- Bootstrap 甚麼都沒寫(lg, sm 沒寫的時候)
> 是用 min-height 來判斷
> 
---
# Footer 的作法
- 先做外面的框框 row
> col, 總寬度是 12的情況下就會變排
> md4 的情況下 2 2 排
> sm 12 的時候 會 1 個 1 個排
- 新增樣式
> 把 li 裝飾拿掉
> 
> 拿掉 padding
> 
> 通通拿掉
> 
> 用 col 大小會稍微無法控制
----
# Bootstrap 漢堡條
> 
> 漢堡條只是觸發
> 要把 nav -item 去調整
> 要小心展開(lg m )的位置!
---
# JS 懶人包未來性
> 
> 例如 vue 適合中小型專案
> Angular 適合大型
> NUXTKS 未來也不錯
- Vue 可以看怎麼去讀, 怎麼寫~
[Top JavaScript Frameworks and Tech Trends for 2021 | by Eric Elliott | JavaScript Scene | Medium](https://medium.com/javascript-scene/top-javascript-frameworks-and-tech-trends-for-2021-d8cb0f7bda69)
----
# 作業完成路線
- 找色塊 > 天氣 API >
- 再來就做這個 微軟再臨-使用boosrtap
- 最後是這個 ↓
> 
---
Sign in with Wallet
Connect another wallet