Card
一 . 基本版型
(一) . 成果圖
1. 效果
2. 實作概論 : 內外元件的包裹
- 先看 : 概念篇的內外元件包裹。
- 這個是一個彈性十足的版,其實沒有固定的做法,因為每次對卡片的要求都不一樣,主要是掌握以下的設計重點。
- : 幾個卡片為一橫行。
- 卡片的使用多為多個一起使用。所以,卡片群外,應該要加上包裹器,設定卡片群的排版。
- 可以用外容器的flex和內元件的width實作。
- 或是直接grid設定。
- : card的圖片是否滿版。
- 若圖片需要滿版,就要將內元件(圖片和內容)的間格留給內元件的屬性決定。
- : card的內容是否滿版。
- 若圖片需要滿版下,內容也必須跟隨圖片滿版,且這時候內容通常需要一點間距,就要用內容的屬性設定。
3. 實作內容 :
- 卡片為3個一橫行的。
- 卡片需要一點邊框。
- 圖片需要滿版。
- 文字需要分成標題和內文
- 文字需要和卡片有一點間格。
- 標題和內文之間有一個bar隔開。
(二) . 實作方法
- : 完成『卡片為3個一橫行』的要求。
- 此時
wrap
為外容器,card
為內元件。
- 實作 : 用
flex
在外容器的方式,完成可以橫向排列,可以換行。
- 實作 : 用內元件的
width
屬性完成3個一列的要求。
- : 完成『卡片需要一點邊框』的要求。
- : 完成『圖片需要滿版』的要求。
- 此時
card
為外容器,card-img
為內元件。
- 實作 : 內元件需要滿版,此時的外元件不可以有
padding
,內元件的width
設為滿的。
- : 完成『文字需要分成標題和內文』的要求。
- 第一層 :
card
為外容器,card-img
和card-content
為內元件。
- 第二層 :
card-content
為外容器,card-header
和card-body
為內元件。
- 實作 : 對第一層,因為
card-img
已經滿版,所以card-content
跟隨滿版。
- 實作 : 再將
card-content
分成兩個class。
- : 完成『文字需要和卡片有一點間格』的要求。
- 此時
card-content
為外容器,card-header
和card-body
為內元件。
- 實作 : 要讓內外元件有間格,需要決定是用外容器的padding或內元件的maring或padding。
- 實作 : 這邊先用外容器的padding,原因是可以讓後面的bar不要滿版,下一步就知道了。
- 到這裡其實就可以使用了,有了基本的卡片形式。
- : 完成『標題和內文之間有一個bar隔開』的要求。
- 實作 : 在
card-header
設定border-bottom
即可。
- 注意 : 這裡是為什麼前面需要用
card-content
設定padding製造出card-header
的間隔。
- 注意 : 因為用
card-header
製造間隔,會讓這邊個border-bottom
填滿card-content
的寬度,不好看。
- 到這已經可以使用了。https://codepen.io/rfbadgnh/pen/mdrOZgr