第九天--Bootstrap通用類別

2023 iThome 鐵人賽

DAY 9

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 9 篇

15th鐵人賽

aliecele

2023-09-23 15:36:56

332 瀏覽

分享至

今天介紹Bootstrap通用類別。

上次從Bootstrap 複製的程式中，有個叫mb-3的東西在div的class，這就是今天要介紹到的通用類別。

Bootstrap通用類別透過上一天的文章操作，可以直接使用，可以簡單達成css的一些操作，而不用撰寫過多的css檔，直接在html檔的class使用。

固定格式 {property}{sides}-{size}
property 設定:
m : margin 的類別
p : padding 的類別

sides 設定:
t : margin-top 或是 padding-top 的類別
b : margin-bottom 或是 padding-bottom 的類別
s : margin-left 或是 padding-left，s是簡寫start
e : margin-right or padding-right ，e是簡寫end
x : 同時設定 *-left 和 *-right
y : 同時設定 *-top 和 *-bottom
blank : 同時設定 margin 或 padding 在元素的四個邊緣

size 設定:
0 : 設定 margin 或是 padding 為 0
1 : (預設) 設定 margin 或是 padding 為 $spacer * .25
2 : (預設) 設定 margin 或是 padding 為 $spacer * .5
3 : (預設) 設定 margin 或是 padding 為 $spacer
4 : (預設) 設定 margin 或是 padding 為 $spacer * 1.5
5 : (預設) 設定 margin 或是 padding 為 $spacer * 3
auto : 設定 margin 為 auto
$spacer是 Sass map 變數的東西，bootstrap設定是$spacer= 1rem;

所以mb-3是margin-bottom: 1rem。
能搭配出像是mt-1、mb-1、me-1、mx-1。

能把昨天的改成這樣。
example2.html程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
        crossorigin="anonymous"></script>
    <title>bootstrap範例</title>
</head>

<body>

    <div class="mb-5">
        <label for="exampleFormControlInput1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="mb-1">
        <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    
</body>

</html>