F2E合作社｜安裝與格線｜Bootstrap 5網頁框架開發入門

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #安裝 #格線系統

Posted by itiswonderfall on 2021-11-24

前言

想開始使用 Bootstrap 5 ，當然要先懂得如何安裝，而安裝完後就會順便講到網頁設計重要的格線系統，透過格線可將圖片、文字做有條理的編排，只要有了格線做支撐，就算是複雜的圖文都會有規矩的排列。

（ 圖片來源 ）

 

 

Bootstrap v5.0.0-alpha2 的官方網站

 

安裝方式

CDN

STEP 1. 把下面的 CSS 放在 </head> 前面。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

STEP 2. 把下面的 JS 放在 </body> 前面。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

DOWNLOAD

STEP 1. 進到官方網站的 Download 頁面，點擊 Compiled CSS and JS 的下載按鈕。

STEP 2. 引入 bootstrap 的 CSS 檔，可選擇後續好修改的 bootstrap.css 或壓縮過容量較小的 bootstrap.min.css 。

<link rel="stylesheet" type="text/css" href="bootstrap的css路徑">

STEP 3. 因為 bootstrap.bundle.js 是已經包含 Popper.js 和 bootstrap.js ，所以直接引用此檔案即可，一樣可選擇好修改的 bootstrap.bundle.js 或壓縮過容量較小的 bootstrap.bundle.min.js 。

<script type="text/javascript" src="bootstrap的bundle.js路徑"></script>

 

 

格線系統

web 格線系統可以分成三個部分來看：

<div class="container">
    <div class="row">
        <div class="col"></div>
    </div>
</div>

 

外部容器

container 為定寬容器，也可以使用滿版的 container-fluid 。

分割內部容器

row 主要負責的項目為下面三點：

  1. 讓內部的 column 能夠橫向排列（ display : flex ）。
  2. 讓裡面的格線可以換列（ flex-wrap ）。
  3. 用 margin 抵銷 container 的值，讓畫面能滿版。

格線

col

在 Bootstrap 4 版本出現後，就可以使用 col 讓系統自動幫你處理佈局，一欄五個也完全輕鬆解決。（ class 名稱 w-100 也是在 Bootstrap 4 新增的，透過此方式可以輕鬆調整元素的寬度，其他設定請參考 Sizing・Bootstrap ）

<div class="container">
    <div class="row">
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。我就算不在芬蘭，也請自動幫我分欄。</p>
        </div>
    </div>
</div>

col-*

一欄最多十二個，可以用 col-* 把佈局分割成若干等份。

<div class="container">
    <div class="row">
        <div class="col-2">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>用 col-2 把佈局分割成2/12等份</p>
        </div>
        <div class="col-4">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>用 col-4 把佈局分割成4/12等份</p>
        </div>
        <div class="col-6">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>用 col-6 把佈局分割成6/12等份</p>
        </div>
    </div>
</div>

col-斷點-*

搭配下方的斷點，在不同解析度下配置出不同佈局。

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>在 large 尺寸把佈局分割成3/12等份，在 medium 尺寸把佈局分割成4/12等份，</p>
        </div>
        <div class="col-lg-3 col-md-4">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>在 large 尺寸把佈局分割成3/12等份，在 medium 尺寸把佈局分割成4/12等份，</p>
        </div>
        <div class="col-lg-6 col-md-4">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>在 large 尺寸把佈局分割成6/12等份，在 medium 尺寸把佈局分割成4/12等份，</p>
        </div>
    </div>
</div>

row-cols-*

在 row 後面加上指定 class 名稱， row-cols-* 後面的數字是 我要佈局上有幾欄 而不是之前的 十二分之幾 。（ 以下面範例來說， row-cols-lg-3 就是我要 large 尺寸下有三欄，而實測後發現 row-cols-xs 沒有效果，所以前面再加上 row-cols-1 讓手機尺寸也不會跑版。 ）

<div class="container">
    <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 row-cols-sm-1">
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
    </div>
</div>

g-*

在 row 後面加上 g-* 來改變欄間距。

<div class="container">
    <div class="row g-5">
        <div class="col-md">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col-md">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col-md">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
        <div class="col-md">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <p>接下來是在講 row-cols 了。接下來是在講 row-cols 了。</p>
        </div>
    </div>
</div>

 

 

斷點

Bootstrap 5 多新增了一個 xxl 的斷點來符合現在市場越來越大的螢幕解析度。

Breakpoint Class infix Dimensions
X-Small - <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

 

 

格線的對齊與分佈

沒有滿版的佈局想設定對齊方式

水平置中

在 row 的後面加上 justify-content-center 即可使佈局置中對齊。

<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
</div>

水平置左

在 row 的後面加上 justify-content-start 即可使佈局置左對齊（ 但其實沒有設定的話預設就會置左 ）。

<div class="container">
    <div class="row justify-content-start">
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
</div>

水平置右

在 row 的後面加上 justify-content-end 即可使佈局置右對齊。

<div class="container">
    <div class="row justify-content-end">
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
</div>

頭尾對齊，中間均分

在 row 的後面加上 justify-content-between 即可使佈局前後兩個項目對齊左右，中間的依剩餘空間平均分配。

<div class="container">
    <div class="row justify-content-between">
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
</div>

水平均分

在 row 的後面加上 justify-content-around 即可使 div 依照該佈局有的空間平均分配。

<div class="container">
    <div class="row justify-content-around">
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="col-12 col-md-3">
            <img src="https://picsum.photos/300/200?random=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
    </div>
</div>

垂直置中

在 row 的後面加上 align-items-center 即可使佈局縱向置中對齊。

HTML

<div class="kv">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-8 col-md-6">
                <h1>title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

CSS

<style type="text/css">
    .kv {
        width: 100%;
        height: 100vh;
        background-image: url("https://picsum.photos/1400/900?random=10");
        background-size: cover;
    }
    .kv .text {
        text-align: center;
    }
</style>

垂直置頂

在 row 的後面加上 align-items-start 即可使佈局縱向置頂對齊（ 預設就會置頂 ）。

HTML

<div class="kv">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-start">
            <div class="col-8 col-md-6">
                <h1>title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

CSS

<style type="text/css">
    .kv {
        width: 100%;
        height: 100vh;
        background-image: url("https://picsum.photos/1400/900?random=10");
        background-size: cover;
    }
    .kv .text {
        text-align: center;
    }
</style>

垂直置底

在 row 的後面加上 align-items-end 即可使佈局縱向置底對齊。

HTML

<div class="kv">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-end">
            <div class="col-8 col-md-6">
                <h1>title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

CSS

<style type="text/css">
    .kv {
        width: 100%;
        height: 100vh;
        background-image: url("https://picsum.photos/1400/900?random=10");
        background-size: cover;
    }
    .kv .text {
        text-align: center;
    }
</style>

 

 

格線排序控制

可以從官網的 Docs / Utilities / Flex / Order 了解格線的排序控制。

 

HTML

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

CSS

<style type="text/css">
    .item p:first-letter {
        font-size: 50px;
        float: left;
        background-color: #ccc;
    }
</style>

出來會是這個樣子。

 

如果想把 1 的項目移到最後呢？

在該項目的 column 後面添加 class 名稱 order-last 。

<div class="container">
    <div class="row">
        <div class="col-3 order-last">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

 

相反的，要把項目移到最前面的話⋯⋯

在該項目的 column 後面添加 class 名稱 order-first 。

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-first">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

 

那如果我把 1 、 2 都加上 order-last 會怎樣？

如果有兩個相同的 class 名稱，則會依照原始碼的順序去做排列，所以會變成 3-4-1-2 。

<div class="container">
    <div class="row">
        <div class="col-3 order-last">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-last">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

 

我想要排序是 4-2-3-1 我要怎麼寫？

也可以使用 order+數字 的方式來做排序。

<div class="container">
    <div class="row">
        <div class="col-3 order-4">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-2">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-3">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-1">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

 

我想要排序是 1-3-2-4 但只想要在 桌機尺寸 才這樣排列，要怎麼寫？

可以使用 order+斷點+數字 來做排序。

<div class="container">
    <div class="row">
        <div class="col-3 order-lg-1">
            <div class="item">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-lg-3">
            <div class="item">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-lg-2">
            <div class="item">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-3 order-lg-4">
            <div class="item">
                <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

 

 

格線距離控制

可以從官網的 Docs / Layout / Columns / Offsetting columns 了解格線的距離控制。

 

offset 用 margin-left 的原理控制佈局距離，跟格線的數值加起來是 12 的話，一樣可以完成滿版需求。
col-md-2 x 3 + offset-md-3 x 2 = 12。

<div class="container">
    <div class="row">
        <div class="col-12 col-md-2">
            <img src="https://picsum.photos/300/200?ramdom=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
        <div class="col-12 col-md-2 offset-md-3">
            <img src="https://picsum.photos/300/200?ramdom=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
        <div class="col-12 col-md-2 offset-md-3">
            <img src="https://picsum.photos/300/200?ramdom=10" class="w-100">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
    </div>
</div>

offset 的實務應用

HTML

<div class="container">
    <div class="row">
        <div class="col-12 col-md-7">
            <div class="pic">
                <img src="https://picsum.photos/300/200?ramdom=10" class="w-100">
            </div>
        </div>
        <div class="col-12 col-md-7 offset-md-5 txt-block">
            <div class="txt">
                <h2>title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
</div>

CSS

<style type="text/css">
    .txt {
        background-color: #ccc;
        padding: 20px;
    }
    @media screen and (min-width: 768px) {
        .txt-block {
            margin-top: -100px; /* 平板以上重疊,手機要併排 */
        }
    }
</style>

 

平板以上 手機尺寸

 

 

參考資料

  1. Bootstrap5快速簡介-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  2. Bootstrap5 安裝與快速檢測方式-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  3. Bootstrap v5.0.0-alpha2 的官方網站
  4. Bootstrap5 格線系統入門-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  5. Bootstrap5格線的對齊與分佈-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  6. Bootstrap5 格線排序控制-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  7. Bootstrap5 格線距離控制-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  8. 鐵人賽：網頁設計常用格線系統(上)

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #安裝 #格線系統

itiswonderfall
前端工程師
瑪莉．羅賓遜說：「每個人都可以從今天開始，創造一個全新的結局。」




Related Posts

Python decorator

Python decorator

 madaramefarrell
什麼是 CLI? Gulp-cli? Vue-cli?

什麼是 CLI? Gulp-cli? Vue-cli?

 hoyi-23
Java 學習筆記 02 – 變數與資料型別

Java 學習筆記 02 – 變數與資料型別

 vickyh1315

Comments