之前我有介紹過bootstrap的卡片元件，不過在使用這個元件時都會遇到一個問題，就是卡片會自適應內容而導致每張卡片高度不同，這篇會來介紹如何讓卡片元件等高以及在RWD的情況下該如何排版。
如果我卡片用card-group包裹起來，並為他們都加上card-footer，那麼卡片高度就會自動對齊。
不過這種方法有個問題，他不支援小螢幕下換行，也就是說在RWD方面不是那麼的理想，所以一般來說會使用方法二。
為每個卡片元件下col，透過bs5的網格系統達成不同螢幕比例下會自動換行。再來是透過在card上使用h-100讓卡片稱滿，使得所有卡片高度相同。
不過這裡有個小地方要注意，換行後稱滿的卡片與下行的卡片之間會沒有間距，所以要透過在col上下margin-bottom來讓卡片之間有間距。
transition可以為樣式在改變時添加動畫，比如hover時可能會改變字體顏色、多條border等等，加入transition可以讓這個改變更加流暢。
要轉換的目標css屬性，比如color、border等等，也可以用all針對所有改變的屬性作出動畫。
1 | a { |
設定動畫要持續多久
1 | a { |
動畫呈現函式，可以自訂動畫呈現的效果，但這方面比較複雜，所以CSS也有提供幾個事先寫好的函式，更多可以參考官方文件
linear
ease
ease-in
ease-out
ease-in-out
step-start
step-end
關於動畫呈現效果我之後會補上文章
設定延遲幾秒才出現動畫
1 | a { |
上述的語法都可以簡寫成transition一個屬性
1 | a { |
[註] transition要放在a上，不能放在hover上，否則滑鼠游標離開a時會沒有動畫。
text-transform可以改變文字的大小寫，基本上是針對英文字做使用。
可以避免文字被套用text-transform。
1 | p { |
將文字全部轉換成大寫
1 | p { |
將文字全部轉換成小寫
1 | p { |
將文字字首轉成大寫
1 | p { |
將文字強迫塞滿整個格子，通常會作用在象形符號或是拉丁文，讓他們的對齊方式像中文或日文那樣
1 | p { |
通常用在<ruby> tag上，他會將所有小寫kana字元轉成大的kana
會用到這個是因為在寫六角第五週作業時某夜的文字在PC版和Pad版的字母大小寫有轉換，所以我就用上了text-transform來改變字母大小寫，至於他最後兩個屬性我還不太了解，kana似乎是用在類似日文的平假名或羅馬上標，有機會會再做介紹。
我們平常寫網頁使用的單位是px，不過px是絕對單位，如果使用者改變預設字體大小，使用px單位的元素將不會跟著改變，這時候就會使用em或者rem這兩個相對單位。
em的計算方式是看父層元素的大小再乘上給予的係數，比如我將某個p段落的font-size設定成1.5em，如果父層元素的font-size是16px，那這個p段落的font-size就會是24px。
rem的r代表的是root，所以會根據root的大小改變，一般瀏覽器預設字體大小都是16px，所以我任何文字的font-size設定成1.5rem都會是24px。
em與rem不只會用於文字上，margin、padding等等有時也會使用em與rem，不過border、shadow、border-radius並不會使用em或rem，還是會使用px。
一般來說會使用的都是rem，因為rem是根據root來設定，em在計算上面較不方便。
群組列表是bs5中的一個元件，使用的是一般的ul結構，不過bs5有為它制定了樣式。
群組列表由外層的list-group和內層的list-group-item組成。
群組列表同樣可以新增disabled、active等狀態
disabled class新增至對應的list-group-item上可以讓它呈現禁用狀態(如圖)。
active class新增至對應的 list-group-item 上可呈現啟用狀態(如圖)。
列表內容可以不是單純的文字，連結、按鈕、圖片等等也都是可以放入列表中的，其中比較特別的是通用標籤。
預設的列表樣式是有邊框與圓角的，加入.list-group-flush class 可以移除
list-group後方新增 list-group-numbered class 即可
list-group-horizontalclass即可。
卡片是另一個很常用的元件，除了有寫好的排版，內容也能克制化。
card最外層要用card class包住，內容用card-body包住，也可以視情況加入image、card-header。
card-body內可以放入各種內容，文字、圖片、標題、列表等等都有相對應的class可以使用，更多可以參考官方文件。
header和footer分別會在卡片上方和下方加上邊界以及背景
button是bootstrap提供的一個元件，可以觀看官方文件，而這篇會簡單介紹如何使用button以及button這個元件是如何運作的。
button可以使用在button、a以及input三個tag上，一般來說我都會選擇a或是input，在tag上加入btn class就完成了button元件的引入。
1 | <a class="btn">button</a> |
button提供了不同種類的預設樣式，最常使用的就是這種實心按鈕，只需要寫上對應的class就能獲得對應的顏色以及hover effect。
btn-primary btn-secondary btn-success btn-danger btn-warning btn-info btn-light btn-dark btn-link
除了實心也有提供只有外框(outline)的按鈕樣式
btn-outline-primary btn-outline-secondary btn-outline-success btn-outline-danger btn-outline-warning btn-outline-info btn-outline-light btn-outline-dark btn-outline-link
也有提供大小不同的按鈕，使用方法一樣是加上對應的class即可。
btn-lg btn-sm
button還可以新增其他狀態，例如禁用、啟用等等
disable:
禁用屬性直接加上disabled即可
1 | <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button> |
不過在a標籤比較特別，因為a標籤本身沒有disabled屬性，所以要改加在class上，bs5同樣為a標籤撰寫了禁用的樣式
1 | <a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> |
active:
想讓按鈕為active狀態可以加上 data-bs-toggle="button" 或是加上 .active這個class
1 | <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button> |
按鈕不只是上述介紹的而已，還能夠加上其他的class來達到與其他元件互動的效果，不過這部分讓我留到介紹需要使用按鈕作互動的元件時再來談吧。
在bootstrap中最強大的功能就是他所提供的元件(component)，所謂的元件是由bs5所提供事先寫好的、可重複利用的元素，比如說按鈕、navbar、card等等，他們會有固定的樣式與功能，當我們要使用時就可以直接套用，不用自己從頭寫一個。
bs5提供許多元件，比較常用的有button、navbar、tab、card等等，下面這兩張圖列出了所有bs5有提供的元件。
想要使用元件可以到相對應的文件，以按鈕為例，先進入按鈕的文件
再來選擇範例的樣式，複製下方程式碼貼到自己的編輯器上，就可以獲得與範例相同的按鈕(記得先引入bs5)
想要客製化可以依照下方其他範例做修改，更詳細的客製化方法在本篇不會介紹，之後會獨立一篇出來介紹。
元件比較困難的地方大概是要理解他寫好的class在做什麼才能做到客製化，我自己一開始在使用也是有點不知道從何下手，不過多用幾次就會發現非常方便，因為都幫你寫好了。
在撰寫jquery時要特別注意，一般來說所有的程式都要寫在 $(document).ready()裡，這個函式代表網頁載入完成後該執行什麼，所以將一些動畫程式碼寫在這個外面會沒有作用。
1 | $(document).ready(function(){ |
document指的是整個網頁，透過$()可以監聽，而ready()是確認監聽的元素是否完全載入好。
關於jquery基本介紹可以看這篇