使用 Bootstrap4.0

https://getbootstrap.com/docs/4.3/utilities/borders/

首先到官方網站複製入門板模到你的 index.html 中，將所有會用到的套件引入，或是使用 https://codepen.io/ 在 css 視窗新增 Bootstrap 的 lib。

 

佈局

使用 container

容器是 Bootstrap 中最基本的佈局元素，容器 container 會預設的當你自適應寬跟高（意味著 max-width 在每個螢幕大小的變化），只要使用 div 標籤 class 名稱為 container 就會載入框架了。

<div class="container">
    <h1>Hello, world!</h1>
</div>

你會發現標籤 <h1> 會自動給你寬跟高，這是因為外面包了一個 container 的容器，Bootstrap 在 css 的 @media 設定了幾個預設的螢幕大小，其中他會自適應你的螢幕給予不同的寬跟高。

至於在後面添加 -fluid 代表的容器佔整個螢幕 100%。

<div class="container-fluid">
    <h1>Hello, world!</h1>
</div>

Row 與 Column 樣式

在 Bootstrap 中還有欄跟列的佈局樣式一樣在 class 分別設定 col(欄) row(列) 他自己會變成表格樣式，其中是使用 flex