Các tiện ích trong bootstrap là gì?

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; }

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

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

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; }

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; }

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; }

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; }

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

$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; }

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

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

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

Ở đầ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,
 )
)
);

Để 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,
 )
)
);

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,
 )
)
);

$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,
 )
)
);

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

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

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

Nế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,
 )
)
);

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

1. Tạo chủ đề thiết kế của riêng bạn
2. 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ữ

Bootstrap có sử dụng các lớp tiện ích không?

Lớp tiện ích là gì?

Tiện ích CSS LÀ GÌ?

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