### [Bootstrap 5](https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/)
```
container-fluid：寬度在所有的設備上均為 width: 100%
col-4：跨越四欄，每一行總共有 12 欄
card bg-primary text-white
card-header
card-body bg-secondary
card-footer
ms-auto：子元素置右
me-auto：子元素置左
mx-auto：子元素置中
```
```
btn-primary: 這個樣式類別可以應用在按鈕上，使按鈕呈現藍色背景色。這個樣式通常用來表示主要的操作，例如提交表單、下一步等等。
btn-secondary: 這個樣式類別可以應用在按鈕上，使按鈕呈現灰色背景色。這個樣式通常用來表示次要的操作，例如取消、返回等等。
btn-success: 這個樣式類別可以應用在按鈕上，使按鈕呈現綠色背景色。這個樣式通常用來表示成功的操作，例如完成、儲存等等。
btn-danger: 這個樣式類別可以應用在按鈕上，使按鈕呈現紅色背景色。這個樣式通常用來表示危險或錯誤的操作，例如刪除、取消等等。
btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger: 這些樣式類別可以應用在按鈕上，使按鈕呈現帶邊框的背景色。這些樣式通常用來表示次要的操作，或者用作按鈕的額外樣式。
btn-lg, btn-sm: 這些樣式類別可以應用在按鈕上，使按鈕變大或變小。這些樣式可以根據需要來調整按鈕的大小。
```
```js
$(document).ready( function () {
var container = $("<div></div>").addClass("container-fluid");
var row = $("<div></div>").addClass("row");
var col1 = $("<div></div>").addClass("col-4");
var col2 = $("<div></div>").addClass("col").text("Column");
var col3 = $("<div></div>").addClass("col").text("Column");
container.append(row);
row.append(col1, col2);
$("body").append(container);
var itemRoot = $("<div></div>").addClass("card bg-secondary text-white");
var itemHead = $("<div></div>").addClass("card-header bg-primary").text("裝置一");
var itemBody = $("<div></div>").addClass("card-body");
var itemTitle = $("<h5></h5>").addClass("card-title").text("目前裝置連線狀況");
var itemText = $("<p></p>").addClass("card-text").text("這裡是數據內容");
var itemList = $("<ul></ul>").addClass("list-group list-group-flush");
var itemItem1 = $("<li></li>").addClass("list-group-item").text("Item 1");
var itemItem2 = $("<li></li>").addClass("list-group-item").text("Item 2");
var itemItem3 = $("<li></li>").addClass("list-group-item").text("Item 3");
var itemLink = $("<a></a>").addClass("card-link").attr("href", "#").text("Card Link");
itemList.append(itemItem1, itemItem2, itemItem3);
itemBody.append(itemTitle, itemText, itemList, itemLink);
var itemFooter = $("<div></div>").addClass("card-footer");
var itemButton = $("<button></button>").addClass("btn btn-primary mx-auto")
.attr("onclick", "appendText()")
.text("獲取第1台數據");
itemFooter.append(itemButton);
itemRoot.append(itemHead, itemBody, itemFooter);
col1.append(itemRoot);
});
```
### Button
```html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
```