Day 13 Bootstrap 5與排版

14th鐵人賽

田田

團隊直接在你主堡跳舞

2022-09-28 09:06:17

1136 瀏覽

分享至

在開始說明前，可以先參考關於Bootstrap 5的文件，可以參考這裡
另外可參考六角學院翻譯的中文版本
由於中文版本是翻譯的版本，可能會有些微的版本落差或尚未翻譯的文件。

Bootstrap 5簡介

前幾天簡單介紹了幾個CSS的功能，今天要來說說Bootstrap 5是什麼了。簡單的說，Bootstrap 5就是一個CSS和JavaScript的框架，在網頁設計時將其套件安裝或載入，就可以用簡單的語法製作特效或進行排版。

如何加掛、載入Bootstrap 5？

在排版的部分需要使用Bootstrap 5 CSS的部分，最簡單的方法就是將以下語法放入HTML<head>...</head>的部分，可參考以下範例

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

有其他方式可以載入框架，可以參考放在文章首段的文件。在放入之後，只有在HTML設定特定的class名稱，就可以讓網頁套入特定的樣式。讓整個編寫網頁的過程變得更加簡單。

如何用Bootstrap 5排版？

未設定欄寬該行元素全部均分排列

Bootstrap 5的排版邏輯是將頁面切成十二欄，在尚未指定每一欄要多寬時，會平均分配欄寬，可參考下列HTML語法與呈現結果：

<div class="container text-primary "> 
<!-- 每一個container 底下會有row，row底下會有col(欄) -->
  <div class="row"> 
<!-- 在每一個row裡面進行分配，底下有4個col，未指定每欄大小會呈現4格平均分布的狀態 -->
    <div class="col text-center bg-dark">1</div>
    <div class="col text-center bg-warning">2</div>
    <div class="col text-center bg-info">3</div>
    <div class="col text-center bg-danger">4</div>
  </div>
</div>

前述語法呈現結果如下圖所示：
範例1

預設12欄的排版結構

在每一個row有12欄的情況下，來進行切分，col-6就是指定第1格佔6欄，就會佔整個row的一半，其他未指定的col一樣會平均分配。可參考以下語法：

<div class="container text-primary ">
  <div class="row">
    <div class="col-6 text-center bg-dark">1</div>
    <div class="col text-center bg-warning">2</div>
    <div class="col text-center bg-info">3</div>
    <div class="col text-center bg-danger">4</div>
  </div>
</div>

前述語法呈現結果如下圖所示：
範例2

一行超過12欄的狀況

接著嘗試排滿一個row，將數字排超過12觀察會發生什麼事：

<div class="container text-primary bg-dark">
  <div class="row">
    <div class="col-6 text-center">1</div>
    <div class="col-5 text-center">2</div>
    <div class="col-4 text-center">3</div>
    <div class="col-3 text-center">4</div>
  </div>
</div>

前述語法呈現結果如下圖所示：
範例3
我們可以發現第1格和第2格加起來為11欄，但第3格佔4欄，則會直接擠到第二行，而第4格一樣會排在第3格後面。