# T3切版重點
###### tags: `好想工作室`
2022.07.11（Mon.）

## ◼ RWD-navbar
:::danger
後來有合併了 ---> [T3：把header兩種模式合併](https://hackmd.io/0EXmHNSWSDCDK48ZEJgGQg?both)
:::
### 原先的做法
一開始想說直接把bootstrap的做漢堡式導覽的方式寫上，也的確能成功沒什麼問題。

但是要改css改成設計稿的樣子時，發現也會連同改動到變成漢堡式的導覽列格式。

也就是說，要嘛改到小螢幕時漢堡式導覽的排版、要嘛就是改到大螢幕時設計稿的排版。

### 過程
但實在沒什麼想法，就跑去找一些網站來看看，剛好看到[臺灣文學館](https://www.nmtl.gov.tw/)的，他也有用到bootstrap！於是就開始研究他們怎麼解決我遇到的問題。

結果發現，他只有在漢堡式導覽的部份，有運用到bootstrap。（可能還有其他地方，但這邊只專住在他的navbar部份）

至於我解決不了的問題，他們則是將大螢幕跟小螢幕的排版給分開寫，分成了`.header_wrap`以及`.phone_wrap`，再利用@media（媒體查詢）的方式做斷點，何時該出現或隱藏`.header_wrap`或是`.phone_wrap`。

後來又看了[高雄美術館](https://www.kmfa.gov.tw/Exhibition.aspx)的網站，雖然他沒有用到bootstrap，但是也是將大螢幕及小螢幕的排版給分開寫，分成了`.header_wrap`以及`.mobile_wrap`，最後一樣是利用到＠media。

### 想法
所以也打算分開來寫，分成`.header_wrap`以及`.phone_wrap`，而他們的斷點則是位於576px。

會這樣設置的原因，是因為我的漢堡式選單有條程式碼為「navba-expand-sm」，當使用者的螢幕縮到sm的尺寸時，漢堡式選單就會出現。

而sm在bootstrap對照的尺寸大小即為576px。

==＠media（媒體查詢）--- 做斷點用==
接著就是研究＠media（媒體查詢）的部份。
> 參考資料：
> [Media Queries Demystified: CSS Min-Width and Max-Width](https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/)
* #### max-width
代表當設備的width小於或等於600，則執行{...}裡面的內容。

@media screen and (max-width: 600px){...}

* #### min-width
代表當設備的width大於或等於600，則執行{...}裡面的內容。

@media screen and (min-width: 600px){...}

* #### combining
代表當設備的width介於400~600間，則執行{...}裡面的內容。

@media screen and (max-width: 600px) and (min-width: 400px){...}

==bootstrap --- 漢堡式選單==
除了媒體查詢之外，還是有運用到bootstrap，用在漢堡式選單裡面，這個漢堡式選單看起來有點複雜，但把他拆解後，就比較能理解他在幹嘛。

先來個完整的程式碼：

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="##">logo</a>
        <button 
        class="navbar-toggler" 
        type="button" 
        data-toggle="collapse" 
        data-target="#header__navbar" 
        aria-controls="header__navbar" 
        aria-expanded="false"
        aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="header__navbar">
            <div class="navbar-nav">
                <a href="##" class="nav-link">1</a>   
                <a href="##" class="nav-link">2</a>
                <a href="##" class="nav-link">3</a>
            </div>
        </div>
    </div>
</nav>

可以看成3區段：
* #### 第1區段
這段是用來放置logo的區域。

<a class="navbar-brand" href="##">logo</a>

* #### 第2區段
這段是用來做漢堡式選單的按鈕（button的部份）＋3挑橫槓（span的部份）。
第2區段與第3區段透過"id"作為溝通連結。

<button 
class="navbar-toggler" 
type="button" 
data-toggle="collapse" 
data-target="#header__navbar" 
aria-controls="header__navbar" 
aria-expanded="false"
aria-label="Toggle navigation"
>
    <span class="navbar-toggler-icon"></span>
</button>

* #### 第3區段
這段是用來處理navbar的，無論是大螢幕敞開的樣子，或者跑進漢堡選單的樣子，都透過第3區段來處理。

<div class="collapse navbar-collapse" id="header__navbar">
    <div class="navbar-nav">
        <a href="##" class="nav-link">1</a>   
        <a href="##" class="nav-link">2</a>
        <a href="##" class="nav-link">3</a>
    </div>
</div>

* #### 其他
* 完整程式碼的第一列：
「navbar-expand-sm」用來作為斷點依據，當螢幕縮小到sm的尺寸時，漢堡式選單才會跑出來。

    <nav class="navbar navbar-expand-sm navbar-light bg-light">

## ◼ ol與li的數字與文字縮排問題
### 問題
問題如下圖所示，換行後數字跟文字是對齊與左側的。
但設計稿要的樣子是下圖，數字獨立於左側，文字統一縮排到數字後方。

### 解決過程
用了些關鍵字，如'ol li the position of the numbers'、'ol li indent'，最後找到這篇：「[How to keep indent for second line in ordered lists via CSS?](https://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css)」

底下有提到一個作法是用「list-style-position」：
（可參考：[CSS list-style-position Property](https://www.w3schools.com/cssref/pr_list-style-position.asp)）

ul{
    list-style-position: outside;
}

但是不知道什麼原因，下在`<ol>`上面沒有作用，要下在`<li>`上才有作用，總之就會變成下圖那樣。

之後在左邊再去推個margin（或padding），差不多就成形了。
（後來是推padding，看起來比較整齊）

## ◼ 字太多讓多餘的字變成點點點
### 解決
參考資料：[CSS 限制字數/行數，讓過長的文字隱藏變"…"](https://www.webdesigns.com.tw/css_text-overflow.asp)

雖然說之前寫2021F2E的時候，也是要做出這樣的效果，當時就有在網路上找到答案（上面的參考資料），但是那時候並沒有真正的去理解它每一行的意思，就是照用而已。

* #### 原本

* #### 做「單行」省略
* 程式碼：

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

* 變成下圖所示：
* 程式碼說明：
1. overflow:hidden;
圖片或文字只要超出範圍就會自動隱藏起來。

2. white-space: nowrap;
強制不換行,在同一行內顯示所有內容，若不使用overflow: hidden處理，內容會超出框框。

3. text-overflow: ellipsis;
當文字超出去（overflow）時，利用text-overflow來處理超出去的文字會變成怎樣。
例如說：
* 超出去就直接剪掉（clip），後面都不出現

            text-overflow: clip;

* 超出去就變成刪節號（ellipsis）

            text-overflow: ellipsis;

* #### 想要顯示「多行」省略
* 程式碼：

    display: -webkit-box;
    -webkit-line-clamp: 2; //行數
    -webkit-box-orient: vertical;
    white-space: normal;

* 變成下圖所示：
* 程式碼說明：
1. display: -webkit-box;
參考資料：[css3中-moz、-ms、-webkit,-o分别代表的意思](https://www.cnblogs.com/EasonJim/p/6140097.html)
在[mdn](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)找到了這些英文的專有名詞名稱：「廠商前輟標記（vendor prefix tag）」，於是透過上面那串字，找到[前端新手村 CSS 的作用](https://ithelp.ithome.com.tw/articles/10191631)這篇。
| 廠商前輟標記 | 對應廠商 |
| ------------ | -------- |
| -ms | ie |
| -moz | firefox |
| -webkit | google、safari |
| -o | opera |

所以其實可以想像，display: -webkit-box;中，其實最重要的是要知道他使用的是display: box;，只是加上了-webkit可以以防無法使用的情況。
而display: box;與display: flex相像，差別在於flex是後來新出的語法。
2. -webkit-line-clamp: 2;
有了第一點的想法，先不要看前面的前綴詞「-webkit-」，去理解「line-clamp」是什麼。
參考資料：[line-clamp](https://css-tricks.com/almanac/properties/l/line-clamp/)
他可以將文字斷行斷成你想要的行數，像這裡就斷成了2行。
3. -webkit-box-orient: vertical;
在display: flex;中有flex-decoration可以控制方向，而在display: box;中則有box-orient來控制排列方向（看是要垂直排列或者水平排列，當然也有reverse用法）
可參考[CSS3 box-orient 屬性](http://www.w3big.com/zh-TW/cssref/css3-pr-box-orient.html#gsc.tab=0)這篇內容。
4. white-space: normal;
參考[鉄人28号FX　鉄人14号「空白彈」white-space, word-break, overflow-wrap](https://ithelp.ithome.com.tw/articles/10222469)這篇內容。
會發現在前面『做「單行」省略』時，是使用了white-space: nowrap;，而normal與nowrap模式是相同的，只差在說前面使用的nowrap，會強制不換行，也就是說一行到底，這適合放在單行省略時，但是若要顯示多行再省略，那就不應該用nowrap，而是使用normal了。
* 總結：
先放上完整程式碼與[codepen示範](https://codepen.io/fgfjgror/pen/bGvBVzv)

          overflow:hidden;
        /*   white-space: nowrap; */
          text-overflow: ellipsis;

          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;

這裡是多行顯示，所以把white-space: nowrap;給移除（雖然說white-space: normal放在後面，也會自動蓋住前面的nowrap，但還是刪掉才不會想說為什麼出現兩條white-space）

## ◼ 讓手機也能測試網頁
### 想法
1. 原先想法是丟到github pages就好，但這樣等於每修改一次就要推上去一次才會看到更新，有點太麻煩了，覺得不太適合。
2. 大三下學期（剛結束）有門課是前後端整合，要讓同學可以用外網連到自己的網站，因為有資料庫所以不能用github pages，所以當時是下載ngrok去執行，但這邊不一定要外網做測試，加上每次使用就得產生一個新連結，還要想辦法複製到手機，也是有點麻煩。

--->後來找到可以直接用vscode做一些設定，讓內網的裝置可以看到該網頁。

### 解決
參考資料1：[linux查看ip地址命令ifconfig不行了？](https://kknews.cc/zh-tw/code/ljqe6ke.html)
參考資料2：[前端简易服务器之vscode篇（可供项目预览手机访问电脑网页等）](https://blog.csdn.net/amswait/article/details/117464208?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-117464208-blog-107485115.pc_relevant_aa&spm=1001.2101.3001.4242.1&utm_relevant_index=2)

* #### Step 1
到vscode裡面，找到live server插件（沒有的話先下載）
* #### Step 2
插件右下角有個小齒輪，點開來 ---> 點「extension settings」後，會看到下面這樣的畫面
* #### Step 3
再來查看自己電腦的ip，在windows是利用"ipconfig"查看，Linux的不太一樣，要在terminal打上"ip address"，而且跑出來的內容也跟windows的不一樣（Linux跑出來的東西比較雜亂）

可以在從下方數來第5列看到ip"192.168.50.186"

* #### Step 4
有了ip位置後，再回到Step 2的頁面，會看到有一欄位的標題是「Live Server > Settings:Host」

把欄位改成Step 3時查詢到的ip"192.168.50.186"。

再按一次「Go Live」產生新網址
* 原先的網址：

* 新網址：

* #### Step 5
讓手機接到跟電腦一樣的網路，之後把新網址「`http://192.168.50.186:5500/index.html`」給手機，就可以用手機去查看了！

## ◼ css權重
> 參考資料：[Day20：小事之 CSS 權重 (css specificity)](https://ithelp.ithome.com.tw/articles/10196454)

### 問題
在h1的部份margin-top被bootstrap的預設`.row>*`蓋過，所以在element下margin沒辦法改動。

### 解決方法
在h1下一個新的class`mt-15`，然後在css中給mt-15下margin-top就可以解決了，猜是權重的問題

## ◼ navbar點擊的時候不會顯示摺疊起來的list

### 問題
Bootstrap collapse not showing content when clicked.

### 解決方法
> 參考資料：[Bootstrap Collapse Not Collapsing](https://stackoverflow.com/questions/22955916/bootstrap-collapse-not-collapsing/66464814#66464814)

看了上面的（如下圖）

才發現原來原本用的語法竟然是bs4的，所以才會一直失敗。

## ◼ 用Bootstrap的CDN去找答案
用Bootstrap的CDN去看.col-, .d-在什麼情況下會變化
他們都是放在＠media screen (min-width: ＊＊＊px)下
也就是說當尺寸大於等於＊＊＊px時才會執行該class

## ◼ accordion整個都藍色
### 問題
底部accordion顏色會是藍色的（一開始）
得按過一遍才能恢復原本白色的樣子

### 過程
後來找了一下，發現是因為有個預設的css樣式：

.accordion-button:not(.collapsed)

再去查一下[css :not()的MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)得到：

它是用來匹配一些不符合該組選擇器的元素，也就是說.accordion-button:not(.collapsed)代表的是，在accordion-button這個class中，去選擇沒有.collapsed的元素

一般來說，當accordion合起來時（看不到底下的items），就會擁有.collapsed這class，也就代表合起來時是不會獲得.accordion-button:not(.collapsed)的css樣式的

而一開始雖然都是合起來，卻還是得到.accordion-button:not(.collapsed)的css樣式，原因是因為一開始沒有加上collapsed這個class

### 解決
一開始就在HTML中，與".accordion-button"同一層加上".collapsed"這個class即可

## ◼ 手機顯示出問題
### 問題
用iphone不管是chrome還是safari都會出現底下的狀況，但是用電腦看不會

### 過程
用F12看看bootstrap是不是放了什麼預設在裡面，導致有這樣的結果，發現了這行：

前面加了webkit，想到在前面解決[讓多餘的字變點點點](https://hackmd.io/aGXLmBfVRjC0ak7WT4ZBfQ?view#%E2%97%BC-%E5%AD%97%E5%A4%AA%E5%A4%9A%E8%AE%93%E5%A4%9A%E9%A4%98%E7%9A%84%E5%AD%97%E8%AE%8A%E6%88%90%E9%BB%9E%E9%BB%9E%E9%BB%9E)時，曾經碰到過，正好webkit就是針對safari跟chrome瀏覽器的前綴詞

### 解決
把`-webkit-appearance: button;`改成`-webkit-appearance: none;`即可。