jan股幣

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

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

第一章 : Bootstrap Overview

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

第三章 : Components & Tools

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

一樣是使用 Bootstrap 來做樣式調整

控制 element 的排版

調整寬、高，25% 50% 75% 100%，如下

還可以調整margin、padding，

方向 : 上 (t)、下 (b)、左 (l)、右 (r)、x軸、y軸

尺寸 : rem

例子，寬度尺寸為 50%，margin-button 為 4 rem，margin-left 為auto，意思就是左邊佔滿 (auto) 最大的空間，因此圖片會變在右邊

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

Flexbox

它是 CSS3 定義的一個 layout mode

怎麼使用 Bootstrap 裡的 Flexboxs

class="d-flex flex-row" 列 (row) 橫向的

class="d-flex flex-column" 欄 (column) 縱向的

很像是我們之前提過的 float

 沿著我的主軸去分配你的空間，像下面的例子是，class="d-flex flex-row" 列 (row) 橫向的，可以透過使用

justify-content-center、justify-content-between、justify-content-around，來去分配你的空間

Alignment 也可以去做調整

align-self-center 是自己做 center，忽略上面的 d-flex align-items-stretch

+

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

Media Queries

在 CSS3 的功能

螢幕的寬度 大於等於 480px 的時候，就執行下面的樣式

螢幕寬度大於 480px 時，背景呈現黃色

可參考以下的螢幕大小來調整

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

Containers & Grid System

containers 就是讓你加東西的地方，建議就是，你要用 Bootstrap 盡量都把東西放在 container

container 在不同螢幕大小它只會佔相對應不同程度的空間

改成 container-fluid 就可以佔滿整個視窗

這個 columns 我平均佔滿，所以每一個 div 佔了 4 的 columns

你也可以設定你這個 div 要佔幾個 columns

也可以跟著我們的 content 來動態自動調整大小，使用 col-auto

Alignment一樣，跟前面提到一樣，螢幕切成12格

部落格轉移，給讀者更好的閱讀體驗，本文網址 : 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