跟著W3做~使用BS4與VUE

 這邊是改寫"K生命"遇到問題或是做個筆記

240429，看到scalingUP，安裝在  (W3\vite\vite_klife )，要RUN的話，要先切到那個目錄下執行，npm run dev。之前想說用XAMPP是否可以跑 VITE???不行。那有安裝VITE的目錄下是否可以VITE呢???也不行。必須要用 npm run dev才可以。

240516暫時先跑完W3的範本，說不定可以讓VITE跑XAMPP，全部看完後再看最下面的問題@@

1. 來搭配VUE。若是用固定的版型(container)，縮小到576px，圖片就會跑100%
   
   
2. images，可以使用<img class="img-fluid">，讓圖片寬100%，自動收縮，放大到本身寬。
   感謝鳥哥，固定板型可以搭配 @media (max-width: 580px) {.container{ width: 100%;}.img-fluid{ width: 100%;}}，就可以讓圖片自動縮放了。
   
   
3. 選單列(navbar)，感謝六角學院分享，直接在NAV上面使用顏色，就會自動調色?!但想要的顏色就要手動調，感謝stackOverflow，可以手動調色(prateek)
   3-1，表單要置中，(.navbar-nav {margin: 0 auto;}  )
   3-2，要均分寬度，在ul 那邊新增 nav-fill ( <ul class="navbar-nav nav-fill"> )
   3-3，選單突然打不開(手機版)，原因是後面多一個空格( id="collapsibleNavbar " )
   3-4，brand刪除的話，選單會靠左。
   3-5，原本選單是用圖片(有漸層)，感謝OXXO老師分享，用在navbar  li 。
   
   
4. 在index.html中有DIV(left，使用 collapse )，想要放在left.js的template。之前是將DIV(left)也一起移到template，難怪VUE跑不出來(抓不到DIV(left))
   4-1，menu也加到menu.js的template。
   4-2，新增showoff (這是collapse的功能，原本想要用在有連結就有顯示)，就可以調整是否要展開。
   4-3，所以left(right也要@@)才要有 iid，才可以展開內容與關閉內容。
   
   
5. footer有三塊。第一塊是上面的，原本用CSS引入背景圖片，但要指定高度，所以直接在html中加入img即可。
   5-1，但第二塊需要使用CSS，所以三塊都使用CSS引入背景圖片。感謝mdn分享CSS使用多重背景，這邊要調整順序，第一、第三、第二，原因是第二會一直重複Y，會把第三圖給蓋過去@
   5-2，感謝麻瓜學習歷險記分享背景圖的尺寸可以有自適式，background-size: contain;
   5-3，文字不用js，直接放在html中(因為CSS抓不到JS處理的span)。但CSS無法將文字置中(查出來是使用inline-block，改用block就好了)。
   
   
6. 將right區塊改成JS。
   若是在HTML中"可以直接顯示文字的地方(內容)" 就可以使用 {{ x.title }}。
   若是在屬性(a href="{{x.url}}")就不行使用{{x.url}}，就要用v-bind
   6-1，可以用v-show來決定是否要顯示(可以用在有無連結)。
   6-2，原本想要左右互換，換後才發現，左邊是button，所以到右邊時，標題無法撐開全部。

記錄之後要做的，

240503，想將left區塊，手機版時，變成側邊攔(感謝六角學院分享)。

240509，想要在同一個JS 下CSS，JS指令