bootstrap – Coding的開心漁場♋

[Bootstrap] (6)Spacing

Bootstrap也有快速增加padding、marging的class。

註：padding、marging是CSS的基本觀念，不懂請先看此篇。

說明

對於 xs，使用固定格式 {property}{sides}-{size} 命名這些 Class。

對於 sm、 md、lg 和 xl，使用格式 {property}{sides}-{breakpoint}-{size}。

{property}屬性 設定:

m – 這個 class 會設定 margin
p – 這個 class 會設定 padding

{sides}邊緣 設定:

t – 這個 class 會設定 margin-top 或 padding-top
b – 這個 class 會設定 margin-bottom 或 padding-bottom
l – 這個 class 會設定 margin-left 或 padding-left
r – 這個 class 會設定 margin-right 或 padding-right
x – 這個 class 會設定 *-left 和 *-right
y – 這個 class 會設定 *-top 和 *-bottom
空白 – 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣

{size}尺寸 設定:

0 – 這個 class 會設定 margin 或 padding 的樣式值為 0
1 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
2 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
3 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
4 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
5 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
auto – 這個 class 會設定 margin 為 auto

（你也可以對 $spacers Sass map 調整變數。）

範例

上述應該都蠻淺顯的，下面特別說明auto屬性。

假設一個容器有3個box，第1個需要排在最左，第2、3靠右，可以這樣做。

為方便說明，先定義內容style－


    .box {
      background-color: #7952b3;
      color: white;
      border: 1px solid white;
    }

    .h100px {
      height: 100px;
    }

程式碼

<div class="row justify-content-end">
  <div class="col-3">
    <div class="box h100px">A</div>
  </div>
  <div class="col-3 ml-auto">
    <div class="box h100px">B</div>
  </div>
  <div class="col-3">
    <div class="box h100px">C</div>
  </div>
</div>

結果

auto

.justify-content-end排版對齊於主軸（水平線），起點在右邊。

第2個.box的ml-auto在自身兩側增加margin，將臨邊的.box推到最底部。

參考資料

六角學院課程：https://www.udemy.com/getbootstrap-4/

官方網站：https://getbootstrap.com/

中文網（六角學院翻譯）：https://bootstrap.hexschool.com/

[Bootstrap] (5)Container

Bootstrap 的 container是用來定義最外層的容器，主要有兩種用法－

container-fluid 滿版寬度－

頁面寬度 = 螢幕寬度

通常用於有滿板需求，且對各螢幕尺寸沒有嚴格定義最大寬度時使用

container 階段固定寬度－

螢幕	網頁
< 575px	auto
576px ~ 768px	540px
768px ~ 992px	720px
992px ~ 1140px	960px
> 1200px	1140px

參考資料

六角學院課程：https://www.udemy.com/getbootstrap-4/

官方網站：https://getbootstrap.com/

中文網（六角學院翻譯）：https://bootstrap.hexschool.com/

[Bootstrap] (4)Flex

傳統CSS float僅能在水平排版，靠左或靠右，很不靈活。有鑑於此，Bootstrap全面棄用float，而使用高自由度的flex。

以下開始說明－

flex-direction主軸與交錯軸

首先要指定容器的排版向，分為主軸、交錯軸，兩者為垂直關係。主軸可能是水平或垂直，交錯軸亦然。

.flex-row：主軸為水平，由左而右，預設。
.flex-row-reverse : 主軸為水平，由右而左。
.flex-column：主軸為垂直，由上而下。
.flex-column-reverse：主軸為垂直，由下而上。
.flex-sm-row：主軸為水平，響應式。
.flex-md-column：主軸為垂直，響應式。

內容的對齊方式與間隔方法

justify-content對齊主軸

以.flex-row主軸（紅線）為水平為例－

對其主軸.png

align-items對齊交錯軸

以.flex-row主軸（紅線）為水平，交錯軸為垂直（綠線）為例－

對其交錯軸.png

物件的對齊方式與間隔方法

align-self內元件本身對齊交錯軸

以.flex-row主軸（紅線）為水平，交錯軸為垂直（綠線），綠框為指定的內元件為例－

參考資料

六角學院課程：https://www.udemy.com/getbootstrap-4/

官方網站：https://getbootstrap.com/

中文網（六角學院翻譯）：https://bootstrap.hexschool.com/

[Bootstrap] (3)Grid的網格中斷點

Grid將網頁分割成12等份的網格，讓開發者自行分配比例排版。

網格中斷點則根據不同的螢幕大小，分別定義網格該如何呈現。例如－

螢幕960px 顯示 3:3:3:3排版
螢幕720px 顯示 6:6排版
螢幕540px 顯示 12排版

註 : 若不清楚Grid是什麼，3:3:3:3、6:6、12是什麼，請參考Grid

Grid和中斷點是Bootstrap最重要的觀念之一，理解他們是使用Bootstrap開發響應式網站的先決條件。

說明

從Grid章節我們知道，.col-4就是4個網格、.col-8就是八個網格，以此類推。在Grid章節所講的都是Bootstrap預設的螢幕尺寸（<576px），也就是xs（但在寫class名稱時省略了）。以.col-4為例，若沒有特別定義，在1140px螢幕是4個網格，在720px螢幕也是4個網格，在<576px也是4個網格，在任何大小的螢幕上都是4個網格。

但今天我想做一個響應式的排版畫面

在>=1200px的螢幕　顯示　3:3:3:3排版
在>=992px 的螢幕　顯示　4:4:4排版
在>=768px 的螢幕　顯示　6:6排版
在 <576px 的螢幕　顯示　12排版

該怎麼做？

首先看看官網怎麼說

官網圖片

官網中斷點.png

官網圖片說明Bootstrap在不同尺寸的螢幕下的運作。

在>=1200px的螢幕　用　.col-xl
在>=992px 的螢幕　用　.col-lg
在>=768px 的螢幕　用　.col-md
在>=576px 的螢幕　用　.col-sm
在 <576px 的螢幕　用　.col-（預設）

程式碼範例－

為方便說明，先定義放置內容的style


    .box {
      height: 100px;
      background-color: #7952b3;
      border: 1px solid white;
    }

排版的程式碼

  <div class="container mt-3">
    <div class="row">
      <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="box"></div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="box"></div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="box"></div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="box"></div>
      </div>
    </div>
  </div>

在>=1200px的螢幕，因.col-xl-3，所以會呈現3:3:3:3排版
1200

在>=992px 的螢幕，因.col-lg-4，所以會呈現4:4:4排版
993

在>=768px 的螢幕，因.col-md-6，所以會呈現6:6排版
769

在 <576px 的螢幕，因.col-12，所以會呈現12排版
575

最後附上網頁式意圖

官網中斷點頁面示意.png

事實上，中斷點的概念不僅在Grid才有，他還被大量運用在bootstrap其他屬性裡。如.flex-sm-row、.flex-md-column、.justify-content-lg-end、.justify-content-xl-end等等。目的都是為了定義在不同尺存螢幕下的呈現。

參考資料

六角學院課程：https://www.udemy.com/getbootstrap-4/

官方網站：https://getbootstrap.com/

中文網（六角學院翻譯）：https://bootstrap.hexschool.com/

[Bootstrap] (2)Grid網格系統

介紹

Bootstrap將頁面分割成12欄，你可以依照自己的需求，達到如4:4:4（4+4+4=12）、8:4（8+4=12）……等等的排版。

要製作Grid有兩個步驟－

要做一個row，以確保內容都包含在row（列）內。
在row裡做col，自己定義每個col的寬度。
在col裡實作內容，如內文、顏色等等。

範例

先定義稍後要放置的內容style。

.box {
　　height: 100px;
　　background-color: cadetblue;
　　border: 1px solid white;
}

4 : 4 : 4 排版

<div class="row">
    <div class="col-3">
        <div class="box"></div>
    </div>
    <div class="col-3">
        <div class="box"></div>
    </div>
    <div class="col-3">
        <div class="box"></div>
    </div>
    <div class="col-3">
        <div class="box"></div>
    </div>
</div>

444

4 : 8 排版 + 內文

<div class="container">
    <div class="header box"></div>
    <div class="row">
        <div class="col-sm-4 side-bar">
            <div class="box"></div>
        </div>
        <div class="col-sm-8 content">
            <div>
                <h2>這是一段標題</h2>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi totam consequuntur dolore sunt culpa ab
                tenetur, enim nulla. Perferendis repellat natus maiores similique provident molestiae ratione
                necessitatibus hic iste saepe.
            </div>
        </div>
    </div>
    <div class="footer box"></div>
</div>