close

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/

我們今天講的主題是, Landing Page & Bootstrap & CSS3,大綱如下

 

第一章 : Bootstrap Overview

第二章 : Layout    (Flexbox、Media Queries、Containers & Grid System)

第三章 : Components & Tools

 


 

第一章 : Bootstrap Overview

簡單來說就是使用人家已經寫好的 CSS、JS 來加速你的網頁製作,不用重複做一些已經做過的事

使用方法就是把 CSS、JS 的 link 貼到 HTML 的 <head> 裡然後你自己的CSS要放在下面

然後要包含這個 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

圖片輸入 class="img-fluid" 它便可套用 Bootstrap 裡的 CSS 樣式

image

image

 

Button 的部分則是輸入 class="btn btn-primary" 它便可套用 Bootstrap 裡的 CSS 樣式,不同樣式有不同的 class,如下

image

image

 

使用 box-sizing : border-box 讓它包含整個 border 來去做調整,像上一篇所提到的我們希望它佔視窗的50%,我們就會使用這個

然後 Bootstrap 也跟隨這個規範,他們也通常使用 rem 來做樣式單位的調整,rem 就是上一篇也提到的,它是跟著 HTML 的 font size 的大小的倍數來調整的

image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


第一章 : Bootstrap Overview

第二章 : Layout    (Flexbox、Media Queries、Containers & Grid System)

第三章 : Components & Tools

 


痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com

arrow
arrow

    Warlimit 發表在 痞客邦 留言(0) 人氣()