研究了一段時間才弄出來，筆記一下。
簡述
這邊拿 utilities 來舉例。比如說預設的 width 是沒有支援 breakpoint 修飾詞的：
但如果我希望有這個功能呢？留到下面說明！
作法
首先去下載 Bootstrap 的源碼：Source files。
接著到 scss 資料夾裡面找出要改的地方，這邊是 _utilities：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| D:.
├───scss
│ │ bootstrap-grid.scss
│ │ bootstrap-reboot.scss
│ │ bootstrap-utilities.scss
│ │ bootstrap.scss
│ │ _accordion.scss
│ │ _alert.scss
│ │ _badge.scss
│ │ _breadcrumb.scss
│ │ _button-group.scss
│ │ _buttons.scss
│ │
│ │ .... 略
│ │
│ │ _transitions.scss
│ │ _type.scss
│ │ _utilities.scss <- 就是它啦
│ │ _variables.scss
|
接著參考官方提供的 API 說明：
property 對應到的 CSS 屬性values 屬性的 key 跟 valueclass 自訂前墜字state 針對 hover 之類的狀態responsive 分界點開關
其他用不太到所以就不解釋了。
總之呢，我希望 width 也可以有分界點，所以就去 _utilities 找到這段：
1
2
3
4
5
6
7
8
9
10
11
| "width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
|
可以看到預設沒設定 responsive，所以這裡它加上去：
1
2
3
4
5
6
7
8
9
10
11
12
| "width": (
property: width,
responsive: true,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
|
改完之後，請務必記得：
- 重新編譯一次
bootstrap.scss
- 重新編譯一次
bootstrap.scss
- 重新編譯一次
bootstrap.scss
備註：如果要做成 min.css 的話請記得再拿去壓縮。
接著編譯出來的那隻檔案就是改好的版本了，把它引入 HTML 就能用了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div class="w-sm-100 w-md-75 w-lg-50">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Iusto cum quisquam incidunt sint, dolor a eos perferendis ratione.
Dicta repellat a in corrupti cupiditate non libero quibusdam sunt labore molestiae?
</div>
</body>
</html>
|
以上，只要把這個搞懂，相信其他部分也不會有太大問題。