Một lần nữa, Dino Esposito giải thích về cải tiến Bootstrap 4. Lần này, anh ấy giải thích cách thành phần thẻ thay thế các lớp giếng và bảng điều khiển
Các phiên bản trước của Bootstrap có một số thành phần thực hiện gần như cùng một công việc—các bộ chứa linh hoạt để đánh dấu cung cấp một số thành phần được xác định trước như đầu trang và chân trang. Một trong những thành phần đó đã được thực hiện thông qua lớp tốt; . Trong Bootstrap 4, cả hai đều biến mất và được thay thế bằng một thành phần duy nhất cung cấp các khả năng giống nhau và có thể hơn thế nữa. Thành phần mới này là thẻ. Tuy nhiên, thành phần thẻ cung cấp một số lớp sửa đổi để cung cấp hành vi gần giống như bạn có thể đạt được trong các phiên bản trước với giếng và bảng
Ví dụ HelloCard
Tuyên bố quan trọng cần ghi nhớ là thẻ là một vùng chứa đánh dấu—một loại thành phần web tĩnh mà bạn sử dụng để soạn chế độ xem tổng thể. Đây là đánh dấu cơ bản bạn cần sắp xếp
1
2
3
4
5
6
7
8
9
I am the body of a very basic card
Và đây là một thẻ phức tạp hơn một chút, trong đó nội dung trên cùng là hình ảnh và phần nội dung chứa tiêu đề, phụ đề và văn bản thuần túy. Đầu ra của cả hai thẻ được hiển thị trong Hình 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Tôi sáng the body of a not-so-simple card
Tôi sáng the subtitle
Tôi sáng plain text
HÌNH 1. Hai thẻ Bootstrap 4 mẫu đang hoạt động
Như bạn có thể thấy, thẻ chiếm tất cả không gian theo chiều ngang cần thiết và tự động mở rộng để bao phủ toàn bộ chiều rộng của phần tử vùng chứa của nó. Bất kỳ hình ảnh nào được nhúng trong thẻ, nếu được tạo kiểu phù hợp làm hình ảnh thẻ, sẽ được thay đổi kích thước để vừa với vùng chứa và duy trì tỷ lệ khung hình phù hợp khi chế độ xem thay đổi kích thước. Việc gán phong cách quan trọng được liên kết với lớp card-img-top là
1
kiểu dáng="chiều rộng. 100%;"
Điều này đảm bảo rằng hình ảnh sẽ luôn vừa với thẻ chứa với tỷ lệ khung hình gốc. Thêm vào đó, lớp card-img-top đặt bán kính đường viền và căn chỉnh đường và dọc. Hình ảnh không phải là thành phần đánh dấu duy nhất được xử lý đặc biệt trong Bootstrap 4 khi được tạo thành một phần của thẻ. Ví dụ: tiêu đề và phụ đề được căn chỉnh tự động nếu cả hai được chứa trong phần thân thẻ. Trong phần thân, các phần tử neo (phần tử A) sẽ tự động được căn chỉnh theo chiều ngang nếu được trang trí bằng lớp liên kết thẻ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Tôi sáng the body of a not-so-simple card
I am the subtitle
Tôi sáng plain text
First link
Second link
Third link
HÌNH 2. Một thẻ phong phú hơn với hình ảnh dưới cùng
Như bạn có thể thấy trong hình, hình ảnh hiện được đặt ở dưới cùng của thẻ. Tuy nhiên, lý do thực sự khiến nó xuất hiện là nó được đặt sau phần thân chứ không phải lớp có tên card-img-bottom. Trên thực tế, kiểu thẻ không ảnh hưởng đến vị trí trong DOM mà chỉ ảnh hưởng đến các góc của hình ảnh sẽ bị ảnh hưởng bởi giá trị tùy chỉnh của thuộc tính bán kính đường viền
Lớp phủ hình ảnh trên thẻ
Hình ảnh trong thẻ xuất hiện chính xác ở vị trí chúng được đặt trong phần đánh dấu và đi cùng dòng với văn bản. Một ngoại lệ là khi hình ảnh được sử dụng làm lớp phủ. Trong trường hợp này, hình ảnh kết thúc hiển thị dưới dạng nền của thẻ (hoặc một phần của thẻ) và một số văn bản được hiển thị trên đó. Đây là một ví dụ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Tôi sáng the body of a not-so-simple card
Tôi sáng the subtitle
Tôi sáng plain text
Trong phần đánh dấu mẫu, thẻ chứa phần tử IMG được tạo kiểu bằng lớp thẻ-img. Lưu ý rằng phần tử hình ảnh được đặt bên ngoài cơ thể. Kết xuất thẻ tuân theo thứ tự các phần tử và bao phủ nửa trên của thẻ, tiếp theo là phần tử H3 trong mã ở trên. Thật thú vị khi kiểu phần tử DIV được tạo thành lớp phủ với lớp thẻ-img-lớp phủ. Nói chính xác, lớp không có tham chiếu trực tiếp đến bất kỳ tệp hình ảnh nào. Đây là phong cách thực tế trong lớp
1
2
3
4
5
6
7
8
9
.thẻ-img-lớp phủ
{
vị trí. tuyệt đối;
top. 0 ;
đúng. 0 ;
phía dưới. 0 ;
trái. 0 ;
phần đệm. 1 . 25rem ;
}
Như bạn có thể thấy, lớp card-img-overlay chỉ đơn giản là di chuyển nội dung của phần tử đến vị trí tuyệt đối bắt nguồn từ góc trên cùng bên trái của vùng chứa. Khi hình ảnh chiếm nửa trên của vùng chứa, thì hiệu quả là nội dung của phần tử được đặt ở trên cùng của hình ảnh, như trong hình
HÌNH 3. Văn bản thẻ chồng lên một hình ảnh
Thật thú vị, nếu bạn di chuyển tham chiếu hình ảnh qua phần tử DIV được tạo kiểu là lớp phủ thẻ-img, thì hình ảnh sẽ xuất hiện ở nửa dưới của thẻ đúng nơi bạn mong đợi, nhưng nội dung lớp phủ vẫn được đặt ở 0, . Vì vậy, có thể xảy ra trường hợp nội dung lớp phủ hiển thị trên văn bản khác
Đầu trang và cuối trang
Thẻ là các biến thể đồ họa của bộ chứa DIV và được thiết kế để thay thế các thành phần đặc biệt có sẵn trong các phiên bản Bootstrap trước đó, chẳng hạn như thành phần bảng điều khiển. Do đó, thẻ không chỉ có phần thân mà còn có thể có các phần tử đầu trang và chân trang
1
2
3
4
5
6
7
Header
. . .
Footer
HINH 4. Thẻ có đầu trang và chân trang
Đầu trang và chân trang được tạo kiểu khác với phần còn lại của thẻ. Không cần phải nói, đầu trang và chân trang là tùy chọn. Lưu ý rằng đầu trang thẻ và chân trang chỉ đơn giản là các kiểu trang trí nghĩa là chúng chỉ xác định hình thức của các thành phần được tạo kiểu theo cách đó chứ không phải vai trò hoặc vị trí. Nói cách khác, bạn có thể có một thẻ có nhiều đầu trang và/hoặc chân trang và thậm chí có thể có một phần tử được đặt ở dưới cùng (nơi chân trang phù hợp một cách hợp lý) được tạo kiểu làm đầu trang
Ngoài ra, thẻ có thể được cung cấp đường viền, màu văn bản, căn chỉnh và hình nền. Bạn có thể sử dụng bất kỳ kiểu tiện ích được xác định trước nào như border-success, bg-primary và text-white. Cũng lưu ý rằng một tấm thiệp có thể được tạo kiểu hoàn toàn tự do nhờ vào bất kỳ kiểu kết hợp phong cách trang trí nào. Ngay cả chiều rộng của thẻ cũng có thể được kiểm soát. Cho đến nay, tôi cho rằng thẻ sẽ chiếm toàn bộ chiều rộng của thùng chứa hoặc chỉ khoảng trống mà nó cần. Bạn có thể kiểm soát chiều rộng của thẻ theo bất kỳ cách nào khác được phép, cho dù thông qua thước đo rõ ràng hoặc qua lưới
1
Nội dung của thẻ phong phú như HTML có thể cho phép. Hãy xem cách nhúng thanh tab vào thẻ
Nhúng tab vào thẻ
Trong Bootstrap 4, một tabstrip giống như trong các phiên bản trước và có thể được lấy thông qua cùng một mã đánh dấu. Để có một dải tab tiêu chuẩn trong phần nội dung của thẻ, tất cả những gì bạn làm là thêm phần đánh dấu dải tab thông thường vào phần nội dung của thẻ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20