0%

之前我有介紹過bootstrap的卡片元件,不過在使用這個元件時都會遇到一個問題,就是卡片會自適應內容而導致每張卡片高度不同,這篇會來介紹如何讓卡片元件等高以及在RWD的情況下該如何排版。

card with different height

方法一

  • 使用card-group與card-footer。

如果我卡片用card-group包裹起來,並為他們都加上card-footer,那麼卡片高度就會自動對齊。

card-group example

不過這種方法有個問題,他不支援小螢幕下換行,也就是說在RWD方面不是那麼的理想,所以一般來說會使用方法二。

方法二

  • 使用網格排版與h-100

為每個卡片元件下col,透過bs5的網格系統達成不同螢幕比例下會自動換行。再來是透過在card上使用h-100讓卡片稱滿,使得所有卡片高度相同。

不過這裡有個小地方要注意,換行後稱滿的卡片與下行的卡片之間會沒有間距,所以要透過在col上下margin-bottom來讓卡片之間有間距。

  • 如果是使用scss來開發可以在_variable.scss中找到card-height屬性,將它改為100%就不用手動一個一個加上h-100。

在CSS中有兩個單位可以做到稱滿整個版面,一個是vh(view height),一個是vw(view width)。

這兩個單位代表的是螢幕可視範圍高度與寬度的百分比,所以100vh與100vw分別代表100%
整個螢幕可視高度與100%螢幕可視寬度。

與%單位不同,%是以父層來計算,vw與vh是整個視窗,所以經常會用在banner上。

範例

這裡的example使用了vw與vh這兩個單位,所以會撐滿整個視窗。

transition可以為樣式在改變時添加動畫,比如hover時可能會改變字體顏色、多條border等等,加入transition可以讓這個改變更加流暢。

transition-property

要轉換的目標css屬性,比如color、border等等,也可以用all針對所有改變的屬性作出動畫。

1
2
3
a {
transition-property: all;
}

transition-duration

設定動畫要持續多久

1
2
3
a {
transition-duration: 0.5s
}

transition-timing-function

動畫呈現函式,可以自訂動畫呈現的效果,但這方面比較複雜,所以CSS也有提供幾個事先寫好的函式,更多可以參考官方文件

  • linear

  • ease

  • ease-in

  • ease-out

  • ease-in-out

  • step-start

  • step-end

關於動畫呈現效果我之後會補上文章

transition-delay

設定延遲幾秒才出現動畫

1
2
3
a {
transition-delay:250ms;
}

transition

上述的語法都可以簡寫成transition一個屬性

1
2
3
a {
transition: <property> <duration> <timing-function> <delay>;
}

範例

[註] transition要放在a上,不能放在hover上,否則滑鼠游標離開a時會沒有動畫。

text-transform可以改變文字的大小寫,基本上是針對英文字做使用。

屬性

none

可以避免文字被套用text-transform。

1
2
3
p {
text-transform: none;
}

uppercase

將文字全部轉換成大寫

1
2
3
p {
text-transform: uppercase;
}

lowercase

將文字全部轉換成小寫

1
2
3
p {
text-transform: lowercase;
}

capitalize

將文字字首轉成大寫

1
2
3
p {
text-transform: capitalize;
}

full-width

將文字強迫塞滿整個格子,通常會作用在象形符號或是拉丁文,讓他們的對齊方式像中文或日文那樣

1
2
3
p {
text-transform: full-width;
}

full-size-kana

通常用在<ruby> tag上,他會將所有小寫kana字元轉成大的kana

結語

會用到這個是因為在寫六角第五週作業時某夜的文字在PC版和Pad版的字母大小寫有轉換,所以我就用上了text-transform來改變字母大小寫,至於他最後兩個屬性我還不太了解,kana似乎是用在類似日文的平假名或羅馬上標,有機會會再做介紹。

我們平常寫網頁使用的單位是px,不過px是絕對單位,如果使用者改變預設字體大小,使用px單位的元素將不會跟著改變,這時候就會使用em或者rem這兩個相對單位。

em

em的計算方式是看父層元素的大小再乘上給予的係數,比如我將某個p段落的font-size設定成1.5em,如果父層元素的font-size是16px,那這個p段落的font-size就會是24px。

rem

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組成。

basic listed group

  • 最基本的群組列表

狀態

群組列表同樣可以新增disabledactive等狀態

  • disabled: 將disabled class新增至對應的list-group-item上可以讓它呈現禁用狀態(如圖)。

  • active: 將active class新增至對應的 list-group-item 上可呈現啟用狀態(如圖)。

列表內容

列表內容可以不是單純的文字,連結、按鈕、圖片等等也都是可以放入列表中的,其中比較特別的是通用標籤。

  • 通用標籤是藉由新增通用類別來增加標籤這個樣式

移除邊框與圓角

預設的列表樣式是有邊框與圓角的,加入.list-group-flush class 可以移除

其他樣式

  • 常用的前面帶有數字的ol在列表群組也有類似的樣式可以使用,在list-group後方新增 list-group-numbered class 即可

  • 想要將列表改成水平的也是可行的,只需要加入list-group-horizontalclass即可。

卡片是另一個很常用的元件,除了有寫好的排版,內容也能克制化。

語法

card最外層要用card class包住,內容用card-body包住,也可以視情況加入image、card-header。

card-body

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
2
3
$(document).ready(function(){
//your code here
});

document指的是整個網頁,透過$()可以監聽,而ready()是確認監聽的元素是否完全載入好。

關於jquery基本介紹可以看這篇