search

Hướng dẫn what is bootstrap responsive utilities? - tiện ích đáp ứng bootstrap là gì?

Ngày đăng: 09/11/2022
Trả lời: 0
Lượt xem: 54

Để phát triển nhanh hơn trên thiết bị di động và đáp ứng, Bootstrap bao gồm hàng tá lớp tiện ích để hiển thị, ẩn, căn chỉnh và nội dung khoảng cách.

Show

Thay đổi .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } 9

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 

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
9. 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ể.

Tùy chọn Flexbox

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

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
2 vì điều này sẽ bổ sung 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 

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
2 vào một phần tử, hãy làm như vậy với 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
4 hoặc một trong các biến thể đáp ứng (ví dụ: 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
5). Bạn sẽ cần lớp này hoặc giá trị 
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
9 để 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à hơn thế nữa.

Lề và đệm

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

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
7 và 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
8 để 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 4 bao gồm thang đo năm cấp cho các tiện ích khoảng cách, dựa trên biến mặc định giá trị 
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
9 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
0. Chọn các giá trị cho tất cả các chế độ xem (ví dụ: 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
1 cho 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
2) 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ụ: 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
3 cho 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
2 bắt đầu tại điểm dừng 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
5).

Chuyển đổi .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 6

Khi chuyển đổi 

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
9 là cần thiết, bạn có thể chuyển đổi 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
6 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 đồ 

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
9 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 đồ 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
9 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ìnhSự mô tả
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
1		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ề).
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
2		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ề).
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
2		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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4
Không bắt buộcDanh 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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4
Không bắt buộcDanh 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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4
Không bắt buộcDanh 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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4
Không bắt buộcDanh 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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4
Không bắt buộcDanh 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 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3 được sử dụng làm khóa bản đồ, thì nó sẽ được biên dịch.
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4

Không bắt buộc

Biến cho tên lớp nếu bạn không muốn nó giống như thuộc tính. Trong trường hợp bạn không cung cấp khóa 

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4 và khóa 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
1 là một loạt các chuỗi, tên lớp sẽ là yếu tố đầu tiên của mảng 
$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
1.

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


$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    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; }

Danh sách các biến thể lớp giả như $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 9 hoặc .opacity-0-hover:hover { opacity: 0 !important; } .opacity-25-hover:hover { opacity: .25 !important; } .opacity-50-hover:hover { opacity: .5 !important; } .opacity-75-hover:hover { opacity: .75 !important; } .opacity-100-hover:hover { opacity: 1 !important; } 0 để tạo cho tiện ích. Không có giá trị mặc định.

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

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

Output:

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

Boolean chỉ ra nếu các lớp đáp ứng cần được tạo ra. .opacity-0-hover:hover { opacity: 0 !important; } .opacity-25-hover:hover { opacity: .25 !important; } .opacity-50-hover:hover { opacity: .5 !important; } .opacity-75-hover:hover { opacity: .75 !important; } .opacity-100-hover:hover { opacity: 1 !important; } 2 theo mặc định.

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

Boolean để cho phép tái cấu trúc chất lỏng. Hãy xem trang RFS để tìm hiểu cách thức hoạt động của nó. 

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
2 theo mặc định.

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

Output:

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

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

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

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
2 theo mặc định.

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

Output:

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

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

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

Boolean chỉ ra nếu tiện ích nên được giữ trong RTL. 

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
8 theo mặc định.

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

API giải thích

Tất cả các biến tiện ích được thêm vào biến 

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
9 trong bảng kiểu 
$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
0 của chúng tôi. Mỗi nhóm các tiện ích trông giống như thế này:also generate utility classes for print, which are only applied within the 
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}
1 media query.

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

Output:

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

Đầu ra nào sau:

Tiền tố lớp tùy chỉnh

Sử dụng tùy chọn $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 để thay đổi tiền tố lớp được sử dụng trong CSS đã biên dịch:

Những trạng thái

Sử dụng tùy chọn $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 8 để tạo các biến thể pseudo-class. Ví dụ, lớp giả là $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 9 và .opacity-0-hover:hover { opacity: 0 !important; } .opacity-25-hover:hover { opacity: .25 !important; } .opacity-50-hover:hover { opacity: .5 !important; } .opacity-75-hover:hover { opacity: .75 !important; } .opacity-100-hover:hover { opacity: 1 !important; } 0. 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 $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 5 và bạn sẽ nhận được $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 6 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 được phân tách không gian: 

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

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

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

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

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
9 mặc định với các hàm 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
1 và 
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}
6. Trong ví dụ dưới đây, chúng tôi đã thêm một giá trị bổ sung cho các tiện ích 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
3. Bắt đầu với 
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}
6 ban đầu và sau đó chỉ định tiện ích nào bạn muốn sửa đổi. Từ đó, lấy bản đồ 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
5 lồng nhau với 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
1 để truy cập và sửa đổi các tùy chọn và giá trị tiện ích.

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

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 

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
7 đáp ứng:

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

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

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
8 và 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
9 cho mỗi điểm dừng. CSS được tạo của bạn sẽ trông như thế này:

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

Đổ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ả 

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
4 của một tiện ích nhất định, ví dụ, để đổi tên các tiện ích 
$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
1 thành Oldish 
$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
2:

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

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 

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
3. Ví dụ: để xóa tất cả các tiện ích 
$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
3 của chúng tôi, tạo 
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
9 
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}
6 và thêm 
$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
7 bên trong.

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

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 

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
7 thành 
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
2:

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

Output:

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

Đ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; }
00.

Bootstrap đáp ứng là gì?

Bootstrap bao gồm một hệ thống lưới chất lỏng đầu tiên, đáp ứng, tỷ lệ phù hợp lên tới 12 cột khi kích thước thiết bị hoặc chế độ xem tăng.Nó bao gồm các lớp được xác định trước cho các tùy chọn bố trí dễ dàng, cũng như các bản phối mạnh mẽ để tạo ra nhiều bố cục ngữ nghĩa hơn.mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Tiện ích trong bootstrap là gì?

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.generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options.

Tiện ích SCSS là gì?

Các tiện ích là các lớp HTML đơn giản thường được sử dụng vào một thuộc tính CSS duy nhất, như kiểu đường viền hoặc màu nền.Các tiện ích có thể được sử dụng thêm để tạo kiểu cho một đối tượng từ đầu hoặc để ghi đè một kiểu được xác định trong CSS thành phần.simple HTML classes typically scoped to a single CSS property, like border-style or background-color . Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.

Bootstrap có đáp ứng theo mặc định không?

Ngoài ra, bạn tốt để đi: Bootstrap có phản hồi theo mặc định.Bootstrap is responsive by default.

programming bootstrap Bootstrap responsive breakpoints Bootstrap checker Responsive header Bootstrap Alert = Bootstrap Summary of Bootstrap

Bài Viết Liên Quan

Điều kiện kinh tế xã hội là gì năm 2024
Điều kiện kinh tế xã hội là gì năm 2024

là ai Hỏi Đáp Là gì
Bất lợi mô hình thuỷ canh lịai cây nào năm 2024
Bất lợi mô hình thuỷ canh lịai cây nào năm 2024

mẹo hay Thủy canh
Quy định quản lý và sử dụng nhà văn hóa năm 2024
Quy định quản lý và sử dụng nhà văn hóa năm 2024

mẹo hay Xây Đựng Nhà
Quá trình gpu google chrome là gì năm 2024
Quá trình gpu google chrome là gì năm 2024

là ai Hỏi Đáp Là gì Công Nghệ Google Gpu
Lớp trưởng à mau xin lỗi anh đi năm 2024
Lớp trưởng à mau xin lỗi anh đi năm 2024

mẹo hay
Bài tập trắc nghiệm toán 12 theo chuyen de năm 2024
Bài tập trắc nghiệm toán 12 theo chuyen de năm 2024

mẹo hay Khỏe Đẹp Bài tập
Vác tù và hàng tổng là gì năm 2024
Vác tù và hàng tổng là gì năm 2024

là ai Hỏi Đáp Là gì Tù và Thổi Tù và
Top game đua xe miễn phí cho pc năm 2024
Top game đua xe miễn phí cho pc năm 2024

mẹo hay Top List Top Game
Bố trí nhân sự tiếng anh là gì năm 2024
Bố trí nhân sự tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Công văn chỉ đạo công tác cải cách hành chính năm 2024
Công văn chỉ đạo công tác cải cách hành chính năm 2024

mẹo hay Mẹo Hay Cách
Dạng toán tìm m để hàm số đồng biến năm 2024
Dạng toán tìm m để hàm số đồng biến năm 2024

mẹo hay
Bài tập và giải kinh tế vĩ mô năm 2024
Bài tập và giải kinh tế vĩ mô năm 2024

mẹo hay Khỏe Đẹp Bài tập
How can i help you là gì năm 2024
How can i help you là gì năm 2024

là ai Hỏi Đáp Là gì
Hướng dẫn tối ưu hóa pubg mobile trên pc năm 2024
Hướng dẫn tối ưu hóa pubg mobile trên pc năm 2024

mẹo hay Mẹo Hay Hướng dẫn Setting Gameloop PUBG
Bài tập chứng minh phương trình vi phân năm 2024
Bài tập chứng minh phương trình vi phân năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Phương trình
Người bảo lãnh du học tiếng anh là gì năm 2024
Người bảo lãnh du học tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Tiếng anh
Hóa phân tích nguyễn tinh dung tập 3 năm 2024
Hóa phân tích nguyễn tinh dung tập 3 năm 2024

mẹo hay Cryto Phân tích
Quá trình công nghiệp hóa hiện đại hóa là gì năm 2024
Quá trình công nghiệp hóa hiện đại hóa là gì năm 2024

là ai Hỏi Đáp Là gì
Bài tập thì hiện tại tiếp diễn đơn giản năm 2024
Bài tập thì hiện tại tiếp diễn đơn giản năm 2024

mẹo hay Khỏe Đẹp Bài tập
Các phương pháp giải nhanh hóa vô cơ 12 năm 2024
Các phương pháp giải nhanh hóa vô cơ 12 năm 2024

mẹo hay Học Tốt Phương pháp

Quảng Cáo

Có thể bạn quan tâm

Lỗi 100 disk windows 10 home single language năm 2024
1 ngày trước . bởi CrazedStagnation
Nốt tăng âm gan phải là gì năm 2024
1 ngày trước . bởi ImmaculatePointer
Giải bài 23 trang 55 sgk toán 9 tập 1 năm 2024
1 ngày trước . bởi SurplusSister
The practice gọi là gì trong đạo đức nghề nghiệp năm 2024
1 ngày trước . bởi MonogamousJuncture
Thoái hóa cột sống thắt lưng là gì năm 2024
1 ngày trước . bởi Full-pagePhysique
Đường lỗi cách mạng của đảng cộng sản việt nam năm 2024
1 ngày trước . bởi PostwarPoster
Mã số thẻ lưu trú là gì năm 2024
1 ngày trước . bởi High-pressureIndecency
Đề thi môn toán cuối học kì 2 lớp 7 năm 2024
1 ngày trước . bởi High-ceilingedTyrant
Lỗi ko hiện cuộc gọi nhỡ ip 7 năm 2024
1 ngày trước . bởi ResistantBondage
Dồn dập tiếng anh là gì năm 2024
1 ngày trước . bởi HesitantGirlfriend

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Last seen recently nghĩa là gì năm 2024
1 tuần trước . bởi High-levelRelaxation
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
1 tuần trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 tuần trước . bởi ProlongedSeating
Eé máy bay từ pháp về vn bao nhiêu năm 2024
1 tuần trước . bởi EvolutionaryCloseness
Bài văn viết về sở thích bằng tiếng anh năm 2024
4 ngày trước . bởi SucceedingSubcommittee
Bê tông thương phẩm mác 250 là gì năm 2024
4 ngày trước . bởi AttentivePrivacy
Tuổi tân mùi hợp tuổi nào mở hàng khai trương năm 2024
2 ngày trước . bởi PatrioticBonding
Cách căn chỉnh dòng trong hóa đơn misa năm 2024
1 tuần trước . bởi DemeaningSetup
Sữa tươi nào tốt nhất cho bà bầu năm 2024
1 tuần trước . bởi Cold-bloodedEaster
Quạt treo tường điều khiển từ xa loại nào tốt năm 2024
3 ngày trước . bởi IncapableCracker

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 boxhoidap.com Inc.