Trong bản cập nhật mới nhất của mình, Bootstrap 5 đã thêm API dựa trên Sass có thể tạo các lớp tiện ích chỉ từ một vài dòng mã
Trong chương này, bạn sẽ khám phá cách thức hoạt động của nó và cách triển khai nó trong các dự án tương lai của bạn.
Hãy xem tài liệu Bootstrap 5, trong phần “Tiện ích”, bên dưới “API. ” Bạn sẽ tìm thấy đoạn mã sau
$utilities: ( "opacity": ( property: opacity, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );Kết quả nào sau đây
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }Trong ví dụ trên, bạn có thể thấy cấu trúc Sass của API
Nhìn vào ví dụ này, bạn có thể tự hỏi điểm của nó. Có gần như nhiều ở một bên như bên kia
Mục đích của API này trở nên rõ ràng khi bạn thêm một số tùy chọn nhất định vào mã Sass (phần 1 của ví dụ trên)
Các tùy chọn của bạn nằm trong bảng bên dưới do tài liệu Bootstrap cung cấp
Quyền mua
Loại
Sự miêu tả
property
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 (e. g. , đệm ngang hoặc lề)
values
Yêu cầu
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 với giá trị. Nếu null được sử dụng làm khóa bản đồ, thì nó không được biên dịch
class
Không bắt buộc
Biến cho tên lớp nếu bạn không muốn nó trùng với thuộc tính. Trong trường hợp bạn không cung cấp khóa lớp và khóa thuộc tính là một mảng chuỗi thì tên lớp sẽ là phần tử đầu tiên của mảng thuộc tính
state
Không bắt buộc
Danh sách các biến thể lớp giả như .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }0 hoặc .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }1 để tạo cho tiện ích. Không có giá trị mặc định
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }2
Không bắt buộc
Boolean cho biết nếu các lớp phản hồi cần được tạo. Sai theo mặc định
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }3
Không bắt buộc
Boolean để cho phép thay đổi kích thước chất lỏng. Đọc trang RFS để tìm hiểu cách thức hoạt động của nó. Sai theo mặc định
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }4
Không bắt buộc
Boolean cho biết nếu các lớp in cần được tạo. Sai theo mặc định
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }5
Không bắt buộc
Boolean cho biết nếu tiện ích nên được giữ trong RTL. Đúng theo mặc định
Dưới đây là ví dụ về lớp tiện ích do API Bootstrap 5 tạo ra với tùy chọn .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }2 bằng .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }7
$utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );Kết quả nào sau đây
.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; } }Trong ví dụ này, bạn có thể thấy rõ mức độ mạnh mẽ của tiện ích API Bootstrap 5 và thời gian mà tiện ích này có thể tiết kiệm được khi phát triển
Nó cho phép bạn tự động tạo 30 lớp CSS được liên kết với “truy vấn phương tiện” của từng điểm ngắt trong Bootstrap 5. Tiện ích này là một công cụ tiết kiệm thời gian vô giá khi bạn tạo các lớp tiện ích
Triển khai API tiện ích trong dự án của bạn
Để sử dụng API trong dự án của chúng tôi, chúng tôi sẽ tạo một trang mới bên dưới .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }8 , mà chúng tôi sẽ nhập ngay sau .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }9 và trước $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );0 trong tệp $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );1 của chúng tôi
Ở đầu trang, hãy bắt đầu bằng cách khai báo biến $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );2empty theo mặc định
Để làm điều này, chỉ cần viết $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );3
Sau khi trang được tạo, bạn sẽ cần sử dụng hàm $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );4 của Sass để không ghi đè lên các lớp đã tồn tại trong Bootstrap 5. Đây là cách thực hiện
$utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, responsive: true, values: auto pointer grab, ) ) );Bạn có thể thấy rằng cấu trúc về cơ bản là giống nhau;
Bạn đang yêu cầu mã của mình hợp nhất nội dung của biến $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );2 có sẵn (đối số đầu tiên của hàm $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );4) với phần còn lại của mã mà bạn đang thêm (đối số thứ hai của hàm $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );4).
Và tất nhiên, để tạo CSS, đừng quên biên dịch Sass của bạn bằng lệnh này (nếu nó chưa chạy)
$ sass --watch scss:cssĐến với bạn
Nhiệm vụ của bạn cho chương này
Tạo các lớp tiện ích độ mờ và độ mờ văn bản từ 0 đến 1 và từ 0. 1 đến 0. 1. Lớp này phải đáp ứng và sử dụng cấu trúc của lớp sau. o-* và to-*
Tạo các lớp tiện ích chỉ mục z từ -10 đến 100 và từ 10 đến 10. Lớp này phải đáp ứng và sử dụng cấu trúc của lớp sau. z-*
Khi bạn đã thực hiện những thay đổi này, hãy xem bản ghi màn hình bên dưới để so sánh tác phẩm của bạn với tác phẩm của chúng tôi
https. //vimeo. com/691387908Nếu gặp khó khăn, bạn có thể tham khảo tệp $utilities: ( "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );9 trong thư mục docs/part5-chap2 trong kho lưu trữ GitHub
Hãy tóm tắt lại
Bạn có thể tạo các lớp tiện ích của riêng mình bằng API dựa trên Bootstrap Sass
API này giúp tiết kiệm rất nhiều thời gian, vì chỉ với một vài dòng mã, bạn có thể tự động tạo các lớp CSS
Tóm tắt Khóa học
Tốt lắm. Bạn đã học được tất cả các kỹ năng Bootstrap mà bạn cần để vượt qua khóa học này một cách xuất sắc
Bây giờ bạn biết làm thế nào để
Đánh giá những ưu và nhược điểm của việc sử dụng Bootstrap cho các dự án của bạn
Tạo lưới đáp ứng trong Bootstrap
Sử dụng các thành phần Bootstrap như thanh điều hướng, băng chuyền, thẻ, v.v.
Tạo biểu mẫu bằng cách sử dụng các lớp Bootstrap để nhập và quản lý
Sử dụng các lớp tiện ích để điều chỉnh bố cục và giao diện của trang web của bạn
Tạo các chủ đề và tính năng tùy chỉnh của riêng bạn trong Bootstrap.
Sử dụng API tiện ích Bootstrap 5 Sass để tạo các lớp tiện ích của riêng bạn
Ngay sau khi bạn hoàn thành bài kiểm tra cuối cùng, bạn sẽ sẵn sàng tham gia một dự án quy mô lớn hơn, chẳng hạn như xây dựng giao diện người dùng của một trang web phức tạp hơn dự án chúng tôi đã tạo trong khóa học này. Hoặc bạn có thể muốn giải quyết các khía cạnh mới của phát triển web, chẳng hạn như học cách bảo vệ ứng dụng của mình khỏi các mối đe dọa bảo mật, nâng cao kỹ năng JavaScript của bạn hoặc đưa các kỹ năng của bạn vào phần phụ trợ
1
2
Tạo ra một
tài khoản OpenClassrooms
Ồ
Chúng tôi rất vui khi thấy rằng bạn thích các khóa học của chúng tôi (đã xem 5 trang hôm nay). Bạn có thể tiếp tục xem các khóa học của chúng tôi bằng cách trở thành thành viên của cộng đồng OpenClassrooms. Nó miễn phí
Bạn cũng sẽ có thể theo dõi tiến độ khóa học của mình, thực hành các bài tập và trò chuyện với các thành viên khác
Đăng ký Đăng nhập
1
2
Tạo ra một
tài khoản OpenClassrooms
Chỉ thành viên Premium mới có thể tải xuống video từ các khóa học của chúng tôi. Tuy nhiên, bạn có thể xem chúng trực tuyến miễn phí
1
2
Tạo ra một
tài khoản OpenClassrooms
Chỉ thành viên Premium mới có thể tải xuống video từ các khóa học của chúng tôi. Tuy nhiên, bạn có thể xem chúng trực tuyến miễn phí
Tạo các tính năng và chủ đề của riêng bạn
- Tạo chủ đề thiết kế của riêng bạn
- Tạo các lớp tiện ích của riêng bạn với API Bootstrap 5
- Đố. Tạo các tính năng và chủ đề của riêng bạn
Giáo viên
Benoit Philibert
Nhà thiết kế UX/UI/0x
Max Mahmoud Wardeh
Nhà phát triển có kinh nghiệm dẫn đầu về kiến trúc, phát triển và phân phối các dự án web và di động trên toàn cầu và bằng nhiều ngôn ngữ