search

Hướng dẫn what are bootstrap 5 utilities? - bootstrap 5 tiện ích là gì?

Ngày đăng: 12/10/2022
Trả lời: 0
Lượt xem: 64

Thay đổi $utilities: ( "text-decoration": ( property: text-decoration, values: none underline line-through ) ); 7

Sử dụng các tiện ích hiển thị của chúng tôi để có trách nhiệm chuyển đổi các giá trị chung của thuộc tính 

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
7. Trộn nó với hệ thống lưới, nội dung hoặc các thành phần của chúng tôi để hiển thị hoặc ẩn chúng trên các chế độ xem cụ thể.

Show

Tùy chọn Flexbox

Bootstrap được xây dựng với Flexbox, nhưng không phải mọi yếu tố mà ____ ____27 đã được thay đổi thành 

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
0 vì điều này sẽ thêm nhiều ghi đè không cần thiết và bất ngờ thay đổi hành vi trình duyệt chính. Hầu hết các thành phần của chúng tôi được xây dựng với Flexbox được bật.

Nếu bạn cần thêm 

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
0 vào một phần tử, hãy làm như vậy với 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
2 hoặc một trong các biến thể đáp ứng (ví dụ: 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
3). Bạn sẽ cần giá trị lớp này hoặc 
$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
7 để cho phép sử dụng các tiện ích Flexbox bổ sung của chúng tôi để định cỡ, căn chỉnh, khoảng cách và nhiều hơn nữa.

Lề và đệm

Sử dụng các tiện ích khoảng cách 

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
5 và 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
6 để kiểm soát cách các yếu tố và thành phần được đặt cách nhau và có kích thước. Bootstrap bao gồm thang đo sáu cấp cho các tiện ích khoảng cách, dựa trên biến mặc định giá trị 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
7 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
8. Chọn các giá trị cho tất cả các chế độ xem (ví dụ: 
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
9 cho 
values: none underline line-through
0 trong LTR) hoặc chọn các biến thể đáp ứng để nhắm mục tiêu các chế độ xem cụ thể (ví dụ: 
values: none underline line-through
1 cho 
values: none underline line-through
0.

Chuyển đổi values: none underline line-through 4

Khi chuyển đổi 

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
7 là cần thiết, bạn có thể chuyển đổi 
values: none underline line-through
4 của một yếu tố với các tiện ích hiển thị của chúng tôi. Các yếu tố vô hình vẫn sẽ ảnh hưởng đến bố cục của trang, nhưng được ẩn trực quan khỏi khách truy cập.

Các tiện ích Bootstrap được tạo bằng API tiện ích của chúng tôi và có thể được sử dụng để sửa đổi hoặc mở rộng tập hợp các lớp tiện ích mặc định của chúng tôi thông qua SASS. API tiện ích của chúng tôi dựa trên một loạt các bản đồ và chức năng SASS để tạo các gia đình của các lớp với các tùy chọn khác nhau. Nếu bạn không quen thuộc với Sass Maps, hãy đọc các tài liệu chính thức của Sass để bắt đầu.

Bản đồ 

values: none underline line-through
7 chứa tất cả các tiện ích của chúng tôi và sau đó được hợp nhất với bản đồ 
values: none underline line-through
7 tùy chỉnh của bạn, nếu có. Bản đồ tiện ích chứa một danh sách các nhóm tiện ích có khóa chấp nhận các tùy chọn sau:

Quyền muaLoại hìnhDefault valueSự mô tả
values: none underline line-through
9		Yêu cầu -Tên của thuộc tính, đây có thể là một chuỗi hoặc một mảng các chuỗi (ví dụ: đệm ngang hoặc lề).
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
0		Yêu cầu -Tên của thuộc tính, đây có thể là một chuỗi hoặc một mảng các chuỗi (ví dụ: đệm ngang hoặc lề).
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
0		Danh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc
vô giá trịDanh sách các giá trị hoặc bản đồ nếu bạn không muốn tên lớp giống như giá trị. Nếu 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2		Không bắt buộc

vô giá trị

Tên của lớp được tạo. Nếu không được cung cấp và 

values: none underline line-through
9 là một loạt các chuỗi, 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2 sẽ mặc định là phần tử đầu tiên của mảng 
values: none underline line-through
9.

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);


values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
6

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) 7

Boolean để tạo các biến CSS thay vì các quy tắc CSS.

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Output:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) 8

Bản đồ các biến CSS cục bộ để tạo ra ngoài các quy tắc CSS.

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
9

values: none underline line-through

Danh sách các biến thể lớp giả (ví dụ: 

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
0 hoặc 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
1) để tạo.

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)


$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
2

Boolean chỉ ra nếu các lớp đáp ứng nên được tạo ra.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Output:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

Boolean để cho phép tái cấu trúc chất lỏng với RFS.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
6

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Output:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

Boolean chỉ ra nếu các lớp in cần được tạo ra.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
8

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
0

Output:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
1

Những trạng thái

Sử dụng tùy chọn 

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
9 để tạo các biến thể pseudo-class. Ví dụ, các lớp giả là 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
0 và 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
1. Khi một danh sách các trạng thái được cung cấp, các tên lớp được tạo cho lớp giả đó. Ví dụ: để thay đổi độ mờ khi di chuột, thêm 
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
2 và bạn sẽ nhận được 
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
3 trong CSS đã biên dịch của mình.

Cần nhiều lớp giả? Sử dụng một danh sách các trạng thái phân tách không gian: 

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
4.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
2

Output:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
3

Phản ứng nhanh nhẹn

Thêm 

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
2 boolean để tạo các tiện ích đáp ứng (ví dụ: 
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
6) trên tất cả các điểm dừng.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
4

Output:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
5

In

Kích hoạt tùy chọn 

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
6 cũng sẽ tạo ra các lớp tiện ích để in, chỉ được áp dụng trong truy vấn truyền thông 
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
8.also generate utility classes for print, which are only applied within the 
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
8 media query.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
6

Output:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
7

Tầm quan trọng

Tất cả các tiện ích được tạo bởi API bao gồm 

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
9 để đảm bảo chúng ghi đè các thành phần và lớp sửa đổi như dự định. Bạn có thể chuyển đổi cài đặt này trên toàn cầu với biến 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
00 (mặc định là 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
9).

Sử dụng API

Bây giờ bạn đã quen thuộc với cách API Tiện ích hoạt động, hãy tìm hiểu cách thêm các lớp tùy chỉnh của riêng bạn và sửa đổi các tiện ích mặc định của chúng tôi.

Ghi đè các tiện ích

Ghi đè các tiện ích hiện có bằng cách sử dụng cùng một khóa. Ví dụ: nếu bạn muốn thêm các lớp Tiện ích tràn đáp ứng, bạn có thể làm điều này:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
8

Thêm các tiện ích

Các tiện ích mới có thể được thêm vào bản đồ 

values: none underline line-through
7 mặc định với 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
03. Đảm bảo các tệp SASS cần thiết của chúng tôi và 
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
1 được nhập trước, sau đó sử dụng 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
03 để thêm các tiện ích bổ sung của bạn. Ví dụ, ở đây, cách thức thêm tiện ích 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
06 đáp ứng với ba giá trị.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
9

Sửa đổi các tiện ích

Sửa đổi các tiện ích hiện có trong bản đồ 

values: none underline line-through
7 mặc định với các hàm 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
08 và 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
03. Trong ví dụ dưới đây, chúng tôi đã thêm một giá trị bổ sung cho các tiện ích 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
10. Bắt đầu với 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
03 ban đầu và sau đó chỉ định tiện ích nào bạn muốn sửa đổi. Từ đó, lấy bản đồ 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
12 lồng nhau với 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
08 để truy cập và sửa đổi các tùy chọn và giá trị tiện ích.

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
0

Cho phép đáp ứng

Bạn có thể kích hoạt các lớp đáp ứng cho một bộ tiện ích hiện có hiện không phản hồi theo mặc định. Ví dụ: để làm cho các lớp 

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
14 đáp ứng:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
1

Điều này bây giờ sẽ tạo ra các biến thể đáp ứng của 

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
15 và 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
16 cho mỗi điểm dừng. CSS được tạo của bạn sẽ trông như thế này:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
2

Đổi tên các tiện ích

Thiếu các tiện ích V4, hoặc quen với một quy ước đặt tên khác? API tiện ích có thể được sử dụng để ghi đè lên kết quả 

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
2 của một tiện ích nhất định, ví dụ, để đổi tên các tiện ích 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
18 thành Oldish 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
19:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
3

Loại bỏ các tiện ích

Xóa bất kỳ tiện ích mặc định nào bằng cách đặt khóa nhóm thành 

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
1. Ví dụ: để loại bỏ tất cả các tiện ích 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
10 của chúng tôi, tạo 
values: none underline line-through
7 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
03 và thêm 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
24 bên trong.

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
4

Xóa tiện ích trong RTL

Một số trường hợp cạnh làm cho kiểu dáng RTL trở nên khó khăn, chẳng hạn như phá vỡ dòng trong tiếng Ả Rập. Do đó, các tiện ích có thể được loại bỏ từ đầu ra RTL bằng cách đặt tùy chọn 

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
8 thành 
values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)
7:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
5

Output:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);
6

Điều này không xuất hiện bất cứ điều gì trong RTL, nhờ Chỉ thị điều khiển RTLCSS 

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
27.

Các lớp tiện ích đáp ứng trong Bootstrap 5 là gì?

Các lớp tiện ích đáp ứng giúp xây dựng các thiết kế web đáp ứng một cách dễ dàng. Bạn có thể ẩn hoặc hiển thị nội dung bạn chọn trên trang web. Bạn phải xác định kích thước của màn hình mà bạn đang ẩn hoặc hiển thị nội dung.help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content.

Các tiện ích đáp ứng bootstrap là gì?

Bootstrap cung cấp một số lớp học trợ giúp, để phát triển thân thiện với thiết bị di động nhanh hơn.Chúng có thể được sử dụng để hiển thị và ẩn nội dung bằng thiết bị thông qua truy vấn phương tiện, kết hợp với các thiết bị lớn, nhỏ và trung bình.Sử dụng những điều này một cách tiết kiệm và tránh tạo ra các phiên bản hoàn toàn khác nhau của cùng một trang web.. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices. Use these sparingly and avoid creating entirely different versions of the same site.

Bootstrap 5 được sử dụng để làm gì?

Bootstrap được phát triển di động trước tiên, một chiến lược trong đó chúng tôi tối ưu hóa mã cho các thiết bị di động trước và sau đó mở rộng các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS.Để đảm bảo kết xuất và chạm vào phù hợp cho tất cả các thiết bị, hãy thêm thẻ Meta Viewport đáp ứng vào của bạn.optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

Các tính năng mới trong Bootstrap 5 là gì?

Bootstrap 5 tính năng..
Hỗ trợ jQuery.Bootstrap sẽ không còn sử dụng thư viện jQuery, các cải tiến đã được thực hiện cho thư viện JavaScript để có thể thực hiện thay đổi này.....
CSS và các thuộc tính tùy chỉnh của nó.....
Cải thiện hệ thống mạng.....
Tài liệu được cải thiện ..

programming bootstrap Bootstrap 5 d-flex bootstrap 5 Table Bootstrap 5 Button Bootstrap 5 Margin-right Bootstrap 5 Form Bootstrap 5

Bài Viết Liên Quan

Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Bánh
Họ tiếng nhật của bạn là gì năm 2024
Họ tiếng nhật của bạn là gì năm 2024

là ai Hỏi Đáp Là gì
Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì
Các yếu tố cấu thành văn hóa tổ chức năm 2024
Các yếu tố cấu thành văn hóa tổ chức năm 2024

mẹo hay
Thế nào là số vô tỉ cho ví dụ năm 2024
Thế nào là số vô tỉ cho ví dụ năm 2024

mẹo hay Hỏi Đáp Thế nào Ví dụ
Quà trung thu tiếng anh là gì năm 2024
Quà trung thu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mid-Autumn gift
Đẻ mổ tối đa được bao nhiêu lần năm 2024
Đẻ mổ tối đa được bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
Thiết kế quán trà sữa bao nhiêu tiền năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Trà sữa
Top nước hoa hồng se khít lỗ chân lông năm 2024
Top nước hoa hồng se khít lỗ chân lông năm 2024

mẹo hay Top List Top
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024

mẹo hay
Daylight is coming like a rentless milkman upstairs là gì năm 2024
Daylight is coming like a rentless milkman upstairs là gì năm 2024

là ai Hỏi Đáp Là gì
Đặt cọc mua đất bao nhiêu phần trăm năm 2024
Đặt cọc mua đất bao nhiêu phần trăm năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Vở bài tập toán lớp 5 trang 51 52 năm 2024
Vở bài tập toán lớp 5 trang 51 52 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Ngôn ngữ chính của singapore là gì năm 2024
Ngôn ngữ chính của singapore là gì năm 2024

là ai Hỏi Đáp Là gì
Văn mẫu lớp 8 bài viết số 1 đề 2 năm 2024
Văn mẫu lớp 8 bài viết số 1 đề 2 năm 2024

mẹo hay Soạn văn 8
Nhẫn tỳ hưu bạc giá bao nhiêu năm 2024
Nhẫn tỳ hưu bạc giá bao nhiêu năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Cryto Giá

Quảng Cáo

Có thể bạn quan tâm

Mục tiêu bài học chi tiết đánh giá được năm 2024
1 tháng trước . bởi ThunderousFlask
Asias next top model 5 tap 6 năm 2024
1 tháng trước . bởi HorribleBattling
Cầu gỗ lim huế bao nhiêu tiền năm 2024
1 tháng trước . bởi YieldingSwimmer
Cân bằng sinh học là gì cho ví dụ năm 2024
1 tháng trước . bởi UmbilicalProceeding
Tổng hợp kiến thức toán ôn thi đại học năm 2024
1 tháng trước . bởi ImpossibleEquation
Đề kiểm tra toán lớp 3 tuần 3 năm 2024
1 tháng trước . bởi FundamentalistTemplate
Cây dù che nắng giá bao nhiêu năm 2024
1 tháng trước . bởi TraditionalPhrasing
Quy trình ứng dụng cntt trong kiểm tra đánh giá năm 2024
1 tháng trước . bởi AdrenalProjection
Bài 94 trang 46 sách giáo khoa toán lớp 6 năm 2024
1 tháng trước . bởi SurplusInactivity
Khắc phục lỗi thẻ nhớ không cho coppy dữ liệu năm 2024
1 tháng trước . bởi FlattenedSaturday

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
11 giờ trước
Thế nào là số vô tỉ cho ví dụ năm 2024
1 tuần trước
Đẻ mổ tối đa được bao nhiêu lần năm 2024
1 tuần trước
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
2 ngày trước
Tự học tiếng anh như thế nào hiệu quả năm 2024
3 ngày trước
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
1 tuần trước
Tuổi đinh mão xây nhà năm nào tốt năm 2024
5 ngày trước
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
6 ngày trước
Họ tiếng nhật của bạn là gì năm 2024
2 ngày trước
Các yếu tố cấu thành văn hóa tổ chức năm 2024
6 ngày trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.