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 đồ .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-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 đồ .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-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:
$utilities: ( "opacity": ( property: opacity, class: o, 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: o, 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: o, 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 |
Không bắt buộc | 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 |
Không bắt buộc | 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 |
Không bắt buộc | 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 |
Không bắt buộc | 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 |
Không bắt buộc | 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: o, 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 4 và khóa $utilities: ( "opacity": ( property: opacity, class: o, 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: o, 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: 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; }
Danh sách các biến thể lớp giả như $utilities: ( "opacity": ( property: opacity, class: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 9 hoặc .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 0 để tạo cho tiện ích. Không có giá trị mặc định.
.o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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. .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 2 theo mặc định.
.o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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ó. .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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; }
.o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 5
Boolean chỉ ra nếu các lớp in cần được tạo ra. .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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; } }
.o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 7
Boolean chỉ ra nếu tiện ích nên được giữ trong RTL. .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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 .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } 9 trong bảng kiểu $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, 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-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 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: o, 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: o, 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: o, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 9 và .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 5 và bạn sẽ nhận được $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, 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 phân tách không gian: $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, 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
Tiện ích đáp ứng
Thêm .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 1 boolean để tạo các tiện ích đáp ứng (ví dụ: $utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 9) 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; } 2
Thay đổi 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; } 3
Tiện ích in
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } 4
Kích hoạt tùy chọn .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 5 cũng sẽ tạo các lớp tiện ích để in, chỉ được áp dụng trong truy vấn truyền thông .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.
Tầm quan trọng
.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: o, 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: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ); 3 của chúng tôi, tạo .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } 9 .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; } 6 và thêm .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; } } 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 .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 7 thành .o-0 { opacity: 0; } .o-25 { opacity: .25; } .o-50 { opacity: .5; } .o-75 { opacity: .75; } .o-100 { opacity: 1; } 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 $utilities: ( "overflow": ( responsive: true, property: overflow, values: visible hidden scroll auto, ), ); 0.