雖然上星期，我們已經基本完成了整個頁面，不過還是有少量問題，一：dropdown顏色並不美觀，二：很多地方彼此的相距實在太近，例如下方的cards，三：文字並不會跟隨螢幕大小，而改變文字風格亦欠變化。我們今天，就來吧這些小地方修改修改吧。

由Dropdownmenu看css優先權的問題

當我們更改後，你會發現一個情況，dropdown menu 並不會跟隨你的顏色設定而改變。為什麼會這樣？大家都知道吧，bootstrap這個框架，其實他的原檔案，也是css和javscript來的。而他，對於每一個我們設定的class，都會有預設的css編碼，所以我們輸入class時，就會直接把已經設定好的裝潢放到相應的html編碼上，而造成了我們看起來的改變。而在css世界裡面，有一項我們稱為優先權的規則。這裡，或者我們可以用台幣來做比喻。

台幣中，最高面額的為2000台幣，在css世界裡！important則有著相同的高價值在 ，只要有他在，任何一切都會被它凌駕，所以如非必要，一般都不太建議使用。

第二大面額為1000台幣，相信大家還記得在html裏，也可以用style= 這種形式來增加css吧，而他的價值，也同樣在html裡面，位居第二。

第三大面額為500台幣，id則是這位置了。

第四大面額為200台幣，而class則是這位置。

最後為100台幣，其他的html元素，例如p，h1等都在這位置，不過這裡有點特別的是，越在外層的影響力會越細，就好像古代的官員那樣，越接近首都，你的地位也就越高，相反被流放邊疆的，多數已被朝廷棄用，這裡道理也是相近。

而因為bootstrap本身對於dropdown-item和dropdown-menu這兩個class都有設定，所以無論我們在外圍怎樣設定，也不會有任何影響，因為外圍設定，在css世界裡地位根本就不夠高去影響。

所以我們需要在dropdown-item和dropdown-menu裏分別添加希望改變的顏色，以及文字顏色，這樣就能夠成功改變了。

<ul class="dropdown-menu bg-info  " >
     <li>
     <a class="dropdown-item text-white bg-info "  href="#">Action</a>
     </li>
</ul>

相距太近的問題

當然，最簡單的方法，我們可以直接透過<br>來改變兩件物件之間的距離。例如這樣：

不過問題是，這方法只能夠增加上下的距離，至於左右則無辦法了。這時候，我們需要使用到css的另一個機制，css box model。

Box model

在說html的時候，不是有提及過，網頁是由一個個的長方格組成嗎？這些長方格子，還是有一定的規格，讓你能夠很方便地調整大小。我們下面就用一張兔子綁架為大家解釋解釋吧。（可憐的兔子）

在最中心被綁架的兔子，就是在格內的主要內容：content，例如我們網頁中見到的文章，標題、圖片等等，他們就充當著兔子角色。

一間屋總是有內牆和門吧，這個牆就等於border，把content圍在裡面

雖然我們是把兔子綁著了，但若把牠放到門前，牠還是有機會逃脫，所以基於安全理由，我們還是把牠放到中心點會好點。而牠和門之間距離，在cssl裏，我們就會把這稱為padding。

不過這可憐的兔子，是被人綁架在鬧市附近的。為了不被其他人發現，所以牆是經過特別訂造的，綁架的人，在外牆和內牆之間，加入了厚厚的石棉，這樣牠發出多大的聲響，也沒有人聽到了。而這層厚厚的石棉，就是margin了。

雖然我明白了分別了，但是，在css的世界裡，可不需要什麼隔音呢，那該什麼時候用margin，什麼時候用padding呢？

我們可以用最簡單的方法去思考：

假若你會見到border，而你希望你裏面的東西，遠離border，那麼就用padding。

假如是希望兩件物件之間的距離能夠拉開或者重疊呢？那就用margin。

Bootstrap margin padding

我們回到bootstrap，在bootstrap如何能夠做到margin和padding這些設定？

基本class
bootstrap用m來代表margin，用p來代表padding。

方位
無論是在css還是bootstrap，不論是margin和padding，他們都能夠透過上下左右來指示，但bootstrap多了x和y來同時設置左右，以及上下。

t-代表著上
b-代表著下
l-代表著左
r-代表著右
x-同時設置左右
y-同時設置上下

大小設定

bootstrap以0,1，2，3，4，5來代表不同大小，數字越大距離越大，0則為不設定

另外亦有auto，auto讓系統自行判斷並自動調整自，例如在選單中，我們就加入了這個，因為bootstrap裏原先預設為justify-content-between，讓所以這樣search和選單兩者左右分開 。

你亦可以加入之前提及的bootstrap 螢幕大小breakpoint，來改變，在不同大小下，margin和padding的距離為多大。

sm：≥576px
md：≥768px
lg : ≥992px
xl : ≥1200px

實例：

例如我們希望網頁在平板螢幕或以上的螢幕大小時，下方margin 的大小為5，然後平板螢幕或以下的螢幕大小時，下方margin 的大小則為1，我們在class裡面，則可以這樣輸入。

<div class=" mb-md-5 mb-1">

明白了吧，是不是很簡單呢，現在你可以嘗試在你自己的網站，在你認為需要增加空間的地方，嘗試自己加入margin或padding喔。

Bootstrap border

Border方面呢？Bootstrap 主要只能夠設定到邊界是否顯示，想要什麼顏色，是否需要圓角，以及需要多圓。

邊界是否顯示

Bootstrap主要是用：top，right，bottom和left來選擇需要顯示那邊，假若加入0，則是不顯示，若只是border，則全部都顯示。

詳細編碼可以看下方：

<span class="border"></span>  全部邊界顯示

<span class="border-top"></span>只顯示上邊

<span class="border-right"></span>只顯示右邊

<span class="border-bottom"></span>只顯示下邊

<span class="border-left"></span> 只顯示左邊

<span class="border-0"></span>全部邊界消失

<span class="border-top-0"></span>消失上邊

<span class="border-right-0"></span>消失右邊

<span class="border-bottom-0"></span>消失下邊

<span class="border-left-0"></span>消失左邊

顏色改變：

原理和background和文字的顏色是一樣，不過由bg－顏色會轉變為border-顏色，例如primary的話，class就會是border－primary，而不再是bg－primary，至於有什麼顏色選擇看下方編碼和圖片吧。

圖片來源至bootstrap

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

圓角設定

跟上方一樣，都是透過top，right，bottom和left來控制，詳細編碼和編碼解釋在下方：

<img src="..." alt="..." class="rounded">  全部圓角
<img src="..." alt="..." class="rounded-top">  上方兩角為圓角
<img src="..." alt="..." class="rounded-right">  右方兩角為圓角
<img src="..." alt="..." class="rounded-bottom"> 下方兩角為圓角
<img src="..." alt="..." class="rounded-left">  左方兩角為圓角
<img src="..." alt="..." class="rounded-left"> 直角

圓角幅度設定

這裡很有趣，可以直接在round後加入－circle或-pill，把邊框設定為圓形或藥丸形。另外亦可以透過加入－lg和－sm，來設定邊框圓角的幅度，要大還是要小。

圖片內容來至bootstrap官網

左邊為小圓角，右邊為大圓角（圖片內容來至bootstrap官網）

<img src="..." alt="..." class="rounded-circle">  圓形
<img src="..." alt="..." class="rounded-pill">   藥丸形
<img src="..." alt="..." class="rounded-sm">  小幅度的圓角
<img src="..." alt="..." class="rounded-lg">   大幅度的圓角

小作業：
dropdown item 裏不是有個邊界嗎？大家可以試試用上方的編碼來讓邊界消失啊

文字

雖說bootstrap什麼都有響應式設計，但在文字方面，卻並沒有，用家需要另行下載官方提供的額外檔案，並加入scss，或自行加入css去進行修改，這裡我們將會重點介紹後面的方案。

css常見的大小單位

不過我們在開始前，先了解一些有關於css常見的大小單位：px，em，rem，%， vw，vh吧。

px

這個最簡單，一個px等於一個螢幕的小格，我們在pixabay下載圖片時，假若要下載最小大小圖片時，不是會見到大小為640x426嗎，這代表它闊度佔640個螢幕小格，高度佔426個螢幕小格。

em

1個em等於16px，為甚麼是16px呢，這是受到html所訂的文字大小所影響，假若沒特意去設定，那麼就會自動設定為16px。

我們可以透過css來修改，例子：
html {
font-size:20px
}

不過，他不是穩定是這樣的，假若他在越內層，那麼那個字看起來就會越大。為什麼這樣呢？因為em，是會受到外層的字體大小而影響的。

<div style="font-size:1.2em;">1.2em
    <div style="font-size:1.2em;">1.2em
        <div style="font-size:1.2em;">1.2em
            <div style="font-size:1.2em;">1.2em
                <div style="font-size:1.2em;">1.2em</div>
            </div>
        </div>
    </div>
</div>

例如上方的最內層的文字大小，就會是：16px *1.2px * 1.2px * 1.2px *1.2px *1.2px

最後上張圖，讓大家了解了解上面編碼最後會出現的結果。

rem

其實他和px頗為相似，但分別在於，他會受到html所影響，所以在正常情況下，一個rem也是等於16px，但他是固定的，他不像em那樣，會受外層設定的字體大小影響。

***% ***

其實也就只是em，大家性質一樣，只是看起來不同。大家都知道吧，100%其實也就是等於1，這裡的%，其實也只是用了這個概念例如剛才的1.2em， 這裡就會變成120%。

vw 和 vh：

這兩個，能夠讓你的圖片或文字，按著螢幕大小而改變，1vw／1vh就等於1%的螢幕闊度／高多，例如我們現在把文字設為了4vw，那麼文字就會等於4%的螢幕闊度

Bootstrap文字大小設定

再來我們了解一下，bootstrap設定了的文字大小：

Display 1 (6rem = 90px)
Display 2 (5.5rem = 82.5px)
Display 3 (4.5rem = 67.5px)
Display 4 (3.5rem = 52.5px)
h1 (2.5rem = 40px)
h2 (2rem = 32px)
h3 (1.75rem = 28px)
h4 (1.5rem = 24px)
h5 (1.25rem = 20px)
h6 (1rem = 16px)
p (1rem = 16px)

該知道的都已經知道了，不過該怎麼修改？

這裡有兩個方法：

假若你有把bootstrap css檔案下載下來， 我們可以直接透過官方提供的scss修改檔案，詳細可以看這裡，不過沒有呢？

我們可以直接加入這條公式在css裏：

@media (max-width: 1200px) {
 font-size: calc( 1rem +   1vw); }

這條公式能夠讓你的文字，根據螢幕大小，作出改變，當然數字是可以自行調整的。當中，@media能夠讓文字大小，不會無限變大或者可以設定，由那裡開始。而我們在這裡我們加入max-width: 1200px，原因是因為我們希望當到達bootstrap電腦螢幕的breakpoint時，就會停止增長，所以就這樣設定。

不過為何要rem和vw雙加？這是因為vw當螢幕越小，文字就會越小，當螢幕到一定程度小時，字會變得小得離譜，透過設定rem，就能夠設定一個最低限度的大小，這樣文字大小，也就能在你理想範圍了

這裡有些在各文字大小的情況下, 一些數值的參考，有需要用到的時候，只需要複製有用的那部分就可以了，當然你可以自行再作微細調節。

@media (max-width: 1200px) {

  h1{
    font-size: calc(1.375rem + 1.5vw);
  }
  h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3{
    font-size: calc(1.3rem + 0.6vw);
  }
  h4{
    font-size: calc(1.275rem + 0.3vw);
  }
  h5{
    font-size: calc(1.225rem + 0.3vw);
  }

 h6{
    font-size: calc(1.2rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }

  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
 
  .lead {
    font-size: calc(1rem + 0.3vw);
  }
   
  p{
    font-size: calc(0.75rem + 0.3vw);
  }

字體上的改變，則相對上而言，較為簡單，我首先到googlefont網站，選擇自己識合的字體，選擇後我們選擇合適的粗幼然後按+select this style，接著按show your select view family，然後按emebed，把link那段複製起來，放到<head>下。

接著，embed下不是有css嗎，把它複製下來然後放到css內例如如果您希望全部改掉：

body { font-family: 'Open Sans Condensed', sans-serif;}

假若只是h1，那麼body就會變成h1,假若是display2，body就會變成display2。

總結

Bootstrap 系列終於圓滿結束了，希望這數天的內容，能夠讓大家對bootstrap有一些基本認識，亦都能夠運用到bootstrap，更改html模樣。都是那句說話，上面這些的，也不過只是bootstrap一角，不過掌握了這些基本的，已經足夠你，做出各式各樣的變化出來，大家假若希望更深入了解，可以到bootstrap官網再作更詳細的了解喔。

至於最終成果？可以在下方的連結看到：
https://www.w3schools.com/code/tryit.asp?filename=GJ65HD431F0D

明天我們將會正式動手去製作簡單的wordpress主題，有興趣，記謹去看喔^^