รู้จัก Utility API ของใหม่ใน Bootstrap 5

1$utilities: (
2  'cursor': (
3    property: cursor,
4    values: auto default pointer wait text move not-allowed,
5  ),
6);

1.cursor-auto {
2  cursor: auto;
3}
4
5.cursor-default {
6  cursor: default;
7}
8
9.cursor-pointer {
10  cursor: pointer;
11}
12
13.cursor-wait {
14  cursor: wait;
15}
16
17.cursor-move {
18  cursor: move;
19}
20
21.cursor-not-allowed {
22  cursor: not-allowed;
23}

1$utilities: (
2  'font-weight': (
3    property: font-weight,
4    values: (
5      hairline: 100,
6      thin: 200,
7      light: 300,
8      normal: 400,
9      medium: 500,
10      semibold: 600,
11      bold: 700,
12      extrabold: 800,
13      black: 900,
14    ),
15  ),
16);

1.font-weight-hairline {
2  font-weight: 100;
3}
4
5.font-weight-thin {
6  font-weight: 200;
7}
8
9.font-weight-light {
10  font-weight: 300;
11}
12
13.font-weight-normal {
14  font-weight: 400;
15}
16
17.font-weight-medium {
18  font-weight: 500;
19}
20
21.font-weight-semibold {
22  font-weight: 600;
23}
24
25.font-weight-bold {
26  font-weight: 700;
27}
28
29.font-weight-extrabold {
30  font-weight: 800;
31}
32
33.font-weight-black {
34  font-weight: 900;
35}

1$utilities: (
2  'font-weight': (
3    property: font-weight,
4    class: 'font',
5    values: (
6      hairline: 100,
7      thin: 200,
8      light: 300,
9      normal: 400,
10      medium: 500,
11      semibold: 600,
12      bold: 700,
13      extrabold: 800,
14      black: 900,
15    ),
16  ),
17);

1.font-hairline {
2  font-weight: 100;
3}
4
5.font-thin {
6  font-weight: 200;
7}
8
9.font-light {
10  font-weight: 300;
11}
12
13.font-normal {
14  font-weight: 400;
15}
16
17.font-medium {
18  font-weight: 500;
19}
20
21.font-semibold {
22  font-weight: 600;
23}
24
25.font-bold {
26  font-weight: 700;
27}
28
29.font-extrabold {
30  font-weight: 800;
31}
32
33.font-black {
34  font-weight: 900;
35}

1$utilities: (
2  'font-weight': (
3    property: font-weight,
4    class: 'font',
5    responsive: true,
6    values: (
7      hairline: 100,
8      thin: 200,
9      light: 300,
10      normal: 400,
11      medium: 500,
12      semibold: 600,
13      bold: 700,
14      extrabold: 800,
15      black: 900,
16    ),
17  ),
18);

1.font-normal {
2  font-weight: 400;
3}
4
5.font-bold {
6  font-weight: 700;
7}
8
9@media (min-width: 576px) {
10  .font-sm-normal {
11    font-weight: 400;
12  }
13
14  .font-sm-bold {
15    font-weight: 700;
16  }
17}
18
19@media (min-width: 768px) {
20  .font-md-normal {
21    font-weight: 400;
22  }
23
24  .font-md-bold {
25    font-weight: 700;
26  }
27}
28
29@media (min-width: 992px) {
30  .font-lg-normal {
31    font-weight: 400;
32  }
33
34  .font-lg-bold {
35    font-weight: 700;
36  }
37}
38
39@media (min-width: 1200px) {
40  .font-xl-normal {
41    font-weight: 400;
42  }
43
44  .font-xl-bold {
45    font-weight: 700;
46  }
47}

1$utilities: (
2  'cursor': (
3    property: cursor,
4    values: auto default pointer wait text move not-allowed,
5  ),
6  'font-weight': (
7    property: font-weight,
8    class: 'font',
9    responsive: true,
10    values: (
11      hairline: 100,
12      thin: 200,
13      light: 300,
14      normal: 400,
15      medium: 500,
16      semibold: 600,
17      bold: 700,
18      extrabold: 800,
19      black: 900,
20    ),
21  ),
22);
23
24@import 'bootstrap/scss/bootstrap';