bootstrap 5 特色

官方文件的更新與改進

新的外觀
Customization新增更多解釋
增加v4版本 主題的頁數以及新增內容
新增npm project

擴充color palette

不需要再引入jQuery

  • JS的插件依舊支援
  • 減少檔案大小
  • 不支援IE瀏覽器

CSS custom properties

升級Forms

  • 更多自主化設定的空間
  • 文件的部分新增內容
  • 重新設計form controls

強化Grid system

  • 新的格式xxl tier
  • .gutter class被修改
  • form layout 被新的grid system取代
  • 新增vertical class
  • column不再預設position:relative

新增icon-library

取用位置

啟用bootstrap 5

使用方式

使用連結嵌入網址:
缺點客製化能力比較差

網址

使用npm:

客製化能力比較好

這邊會下載到最新版本

1
npm i bootstrap@next

下載icon library

1
npm i bootstrap-icons

裝好之後我們看到這邊

引入js的檔案

所有可用的icons

引入sass的關鍵檔案

推薦使用插件

live sass compiler

如果有使用live server(基本上一定有這個必裝)
一鍵開關watch功能

到vscode裡面做設定
點擊json設定檔

設定檔案存檔路徑以及不產生source map

1
2
3
4
5
6
7
8
"liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false

設立資料夾如下

在main.scss引入bootstap.scss

會把所有的scss元素轉換成css使用

點擊watch Sass後就可以開始專案摟!

專案內容

專案圖示

簡單的製作登入頁面(無功能)

客製化

針對顏色 客製化

1
2
$primary: #401f7c;
$secondary: #f4f4f4;

針對border 客製化

1
2
3
$border-radius:0;
$border-radius-sm:0;
$border-radius-lg:0;

針對utilities 客製化

1
2
3
4
5
6
7
8
9
10
11
12
13
// Utilities
$utilities:() !default;
$utilities:map-merge(('input-padding':(property:padding,
            class:ip,
            values:(0:0,
                1:0.3rem,
                2:0.5rem,
                3:0.7rem,
                4:0.9rem,
                5:1rem,
            ),
        )),
    $utilities);

html

body

1
<body class="d-flex text-center bg-secondary">

直接使用flexbox並且文字置中並設定背景顏色

1
2
3
d-flex = display : flex 
text-center
bg-secondary = backgroup-color : $secondary

則直接取用icon-library

src="/bs5-landingpage/scss/node_modules/bootstrap-icons/icons/bootstrap.svg"

並且使用mb-4增加下方一點空間

1
2
3
.mb-4 {
  margin-bottom: $spacer * 1.5 !important;
}

h1

1
<h1 class="h3 mb-3 font-weight-normal">Bootstrap 5 Login</h1>

重新設定為h3

字體設定font-weight-normal

也可以縮寫成 fw-normal

label

sr-only screen-reader(幫助聽障人士使用對畫面不影響)

input

form-control 不加大小的話則為預設

form-control的樣板

ip-3 在上方使用自訂的工具

1
2
3
4
5
6
7
8
9
10
11
12
13
// Utilities
$utilities:() !default;
$utilities:map-merge(('input-padding':(property:padding,
            class:ip,
            values:(0:0,
                1:0.3rem,
                2:0.5rem,
                3:0.7rem,
                4:0.9rem,
                5:1rem,
            ),
        )),
    $utilities);
1
2
<input type="email" id="inputEmail" class="form-control mb-2 ip-3" placeholder="Email Address" required
            autofocus>

btn

btn樣板們

1
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>

完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body class="d-flex text-center bg-secondary">
    <form class="form-login"><img src="/bs5-landingpage/scss/node_modules/bootstrap-icons/icons/bootstrap.svg"
            height="72" width="72" class="mb-4">
        <h1 class="h3 mb-3 font-weight-normal">Bootstrap 5 Login</h1>
        <label for="inpuEmail" class="sr-only">Email Address</label>

        <input type="email" id="inputEmail" class="form-control mb-2 ip-3" placeholder="Email Address" required
            autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control mb-2" placeholder="Password" required>

        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me">Remember Me</input>
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
    </form>

    <script src="scss/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="scss/node_modules/popper.js/dist/umd/popper.min.js"></script>
</body>