# Grid and spacing

{% embed url="<https://www.loom.com/share/3e7247408a784153a8befe262bf19313>" %}

## BS04. 排版系統 Grid system

為了便利使用者設計版面，bootstrap通常以12等分作為切割等寬欄位的基準，並且讓使用者得以利用class來指定他要怎麼切割這12個等寬欄位。

* 首先要指定一個`<div class="row">`之後在其中再建立其他`<div>`
* `.col-sm-4`其中的`sm`所指的是這個版面要給平板電腦用的，其他的代號包含`xs` for phones、`md` for desktops、and `lg` for larger desktops。

![](https://lh4.googleusercontent.com/jAsyy4QKTYBA8wY5ukE7Y5IWo1eYLivRahN3psQ0M32nKnCkFEpSMip6z8-nzfyd7bU69nzsuJHCRg42uWh8-CXKtpaX8E0_QaEenqoZ5lIZv34VVtErxpwy8GoPvsxZTXRvULsF)

| ![](https://lh5.googleusercontent.com/8t2cqOW6tJ50h3hCEbgEVNZEpF8nGUC7ClWfRp-2LCxTtthtcoy3K_BWA0_TlPrzFgSdXETFnkRrhzgEE6kYQLUThqOAqN3UR4pRAaAtbg4cqUDM0-iaQ8B4sM-lM8nCqRsAMVvo) | ![](https://lh6.googleusercontent.com/N8LQLf8aTX_qIb_vZ7C9M__zb6-KctKL7CjRzEp1Ts5vndKG41p8gV7KrOalta5jHmjO-aYdqYURZN24lh9aXmy0tB3BO1Vokuj5x9ADkG2C07LUoszYWKpPRceslb8J1fKt-dyg) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 將一列的版面切割為4:4:4三塊。                                                                                                                                                               | 將一列的版面切割為4:8兩個不等的區塊。                                                                                                                                                            |

### 刻意在左方來作為留白。

![](https://lh4.googleusercontent.com/17G8oNmfbT3Z38DE82JsTbZD0gN-zg5yJ2Lt6dAfq109flME5cru8--jEJ1F4QBgEVsKa4KaHi4HHfVjuVZzjTgf6U_vQW5u-4UcTAfStSlCE1uK66bq-4fNxAVYKNo7ZMde4Ikd)

若希望在grid排版上能夠左邊空出4，然後只留下右邊8，一來可以用上面那種辦法，先做一個空的.col-sm-4的\<div>，再做一個.col-sm-8的\<div>。但事實上，如果你始終不會用到左邊那區塊的話，可以用 來製作間隔

```markup
<div id="about" class="container-fluid">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-9">
            <h2>About us</h2>
            <h4>hahaha</h4>
            <p>hehehe</p>
        </div>
    </div>
</div>
```

參考資料 <http://getbootstrap.com/css/>

#### 標準寫法：使用offset

```markup
<div id="intro" class="container-fluid">
    <div class="row">
        <div class="col-sm-9 offset-3">
            <h2>About us</h2></div>
    </div>
</div>
```

### BS04.1 Grid system for RWD

See <https://getbootstrap.com/docs/4.0/layout/grid/>

Bootstrap在3.0與4.5版分別提供四到五個等級的「斷點」，為預設的不同瀏覽器大小，讓程式設計師可以用指派class，就設定好因應不同螢幕大小的排版。一共分為以下五階層。

![https://getbootstrap.com/docs/4.0/layout/grid/](/files/-MK7jdS-zrqlv4JF_CrT)

```css
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
```

當程式碼如以下指定，代表我們希望這些元件在不同螢幕大小時有不一樣的表現

```markup
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
```

以上面的code而言，那螢幕夠大的時候看起來應該是如下圖，目前是照三個.col-md-4來排版。

![](https://lh4.googleusercontent.com/5foARbU-nLbKpcpLYEruLlZnH269k42dLh3PYlEqphPqtkcMmL6HDVi9-8Hv6KKrkjebMEavH8ZhQstoA8m-KJF8ZrVrfFmscXrZhr_mF1bor1hoM3NGe1t9ftGqCpikeuXDflTd)

若是螢幕太小的話，那就會變成按照`.col-6`來排版，那就是兩個`col-6`，所以中間那列的元件會排成兩欄如下。

![](https://lh5.googleusercontent.com/WxEOEYcm628WN08Zkl_XwoVDt-MtB4sRsJ80ykP9Pcooi0i4I2Y-uPR8wDKL3CWRGFIHqwdgWf-L7hF2fioF4v7MNHbsYDDs1SJOKUB8zYiIkVREjIs7IIQifmKqDQ5FZEVOpPxf)

### \<Practice> #1. 用grid system完成剩下的division

### \<Practice> #2 Footer

About glyphicon, take a look at <http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp>

{% tabs %}
{% tab title="HTML" %}

```markup
<body id="myPage">
...
<footer class="container-fluid text-center">
    <a href="#myPage" title="back to top">
        <span class="glyphicon glyphicon-triangle-top"></span>
    </a>
    <p>Made By ji-lung</p>
</footer>
```

{% endtab %}

{% tab title="CSS" %}

```css
footer {
    background-color: #2d2d30;
    color: #f5f5f5;
    padding: 32px;
}
```

{% endtab %}
{% endtabs %}

### BS04.1 Layout:clearfix

<https://getbootstrap.com/docs/4.0/utilities/clearfix/>

主要是提供`clear:both`功能的class。

```markup
<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
```

![](/files/-MK7eFMq16FXakayanzI)

## BS05. Spacing: Margin and Padding

See <https://getbootstrap.com/docs/4.0/utilities/spacing/>

### Examples

```css
.mt-0 {
  margin-top: 0 !important;
}
.ml-1 {
  margin-left: ($spacer * .25) !important;
}
.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}
.p-3 {
  padding: $spacer !important;
}
```

<https://getbootstrap.com/docs/4.0/utilities/spacing/>

Where *property* is one of:

* `m` - for classes that set `margin`
* `p` - for classes that set `padding`

Where *sides* is one of:

* `t` - for classes that set `margin-top` or `padding-top`
* `b` - for classes that set `margin-bottom` or `padding-bottom`
* `l` - for classes that set `margin-left` or `padding-left`
* `r` - for classes that set `margin-right` or `padding-right`
* `x` - for classes that set both `*-left` and `*-right`
* `y` - for classes that set both `*-top` and `*-bottom`
* blank - for classes that set a `margin` or `padding` on all 4 sides of the element

Where *size* is one of:

* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer`
* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
* `auto` - for classes that set the `margin` to auto


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jirlong.gitbook.io/html/htmlcss/bootstrap/grid-and-spacing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.