Bootstrap chiều cao thân thẻ
|
Bootstrap Card là nơi chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Thẻ thay thế các thành phần panel, well và thumbnail trong phiên bản Bootstrap 3 cũ Show
Trong các phần sau, bạn sẽ thấy những gì bạn có thể làm với thành phần thẻ Tạo Bootstrap Card cơ bảnThẻ Bootstrap có mã khá đơn giản. Trình bao bọc bên ngoài yêu cầu lớp cơ sở Kết quả của ví dụ trên sẽ giống như sau Lưu ý. Thẻ Bootstrap không có chiều rộng cố định, chúng sẽ chiếm toàn bộ chiều rộng của phần tử cha của nó. Vì vậy, nếu bạn cần thẻ có chiều rộng cố định, bạn cần tự áp dụng thuộc tính chiều rộng trên thẻ. Ngoài ra, thẻ không có lề theo mặc định, hãy sử dụng các lớp tiện ích thư giãn nếu cần Các loại nội dung cho Bootstrap CardThẻ hỗ trợ nhiều loại nội dung, bao gồm hình ảnh, văn bản, danh sách nhóm, liên kết, điều hướng và nhiều hơn thế nữa. Dưới đây là các ví dụ về những gì được hỗ trợ bởi thẻ Bootstrap Card chỉ có nội dungBạn có thể đơn giản sử dụng lớp Kết quả của ví dụ trên sẽ giống như sau Bootstrap Card có tiêu đề, văn bản và liên kếtHơn nữa, bạn cũng có thể đặt tiêu đề và liên kết bên trong thẻ cùng với văn bản, như sau Kết quả của ví dụ trên sẽ giống như sau Bootstrap Card có đầu trang và chân trangBạn có thể thêm đầu trang và chân trang vào thẻ của mình bằng cách sử dụng lớp Kết quả của ví dụ trên sẽ giống như sau mẹo. Bạn có thể sử dụng các lớp tiện ích căn bản để chỉnh sửa văn bản không có giới hạn như3 và Set the list list in Bootstrap CardBạn cũng có thể đặt nhóm danh sách (nhóm danh sách) bên trong thẻ cùng với các loại nội dung khác, như được hiển thị ở đây Kết quả của ví dụ trên sẽ giống như sau Kết hợp nhiều loại nội dung trong Bootstrap CardHãy thoải mái kết hợp nhiều loại nội dung để tạo thẻ bạn cần. Ví dụ sau sẽ tạo một thẻ có chiều rộng cố định với hình ảnh, văn bản, nhóm danh sách và siêu liên kết Kết quả của ví dụ trên sẽ giống như sau Thêm điều hướng vào Bootstrap CardBạn cũng có thể thêm vào phần điều hướng của Bootstrap như tab và viên thuốc vào thẻ tiêu đề Để thêm tab điều hướng vào thẻ, chỉ cần đặt tab đánh dấu bên trong thẻ tiêu đề và tab nội dung bên trong thẻ thân. Bạn được yêu cầu sử dụng một lớp bổ sung Lớp Hãy thử ví dụ sau đây để tạo một tab theo thẻ đẹp mắt Kết quả của ví dụ trên sẽ giống như sau Tương tự, bạn có thể thêm thanh điều hướng vào thẻ bằng cách sử dụng một lớp bổ sung Kết quả của ví dụ trên sẽ giống như sau Customise type for Bootstrap CardCó một số tùy chọn có sẵn để tùy chỉnh hình nền, đường viền và màu sắc của thẻ Tùy chỉnh màu nền và màu chữ cho Bootstrap CardBạn chỉ có thể cần sử dụng các lớp tiện ích màu nền và màu chữ để thay đổi diện mạo của thẻ. Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào Kết quả của ví dụ trên sẽ giống như sau Tùy chỉnh đường viền và màu chữ cho Bootstrap CardTương tự, bạn có thể tùy chỉnh đường viền và màu văn bản của bất kỳ thẻ nào bằng cách sử dụng tiện ích lớp văn bản và đường viền. Chỉ cần áp dụng các lớp này trên Kết quả của ví dụ trên sẽ giống như sau Bố cục tùy chọn cho Bootstrap CardNgoài kiểu dáng của thẻ, Bootstrap còn bao gồm một số tùy chọn để sắp xếp danh sách thẻ. Tuy nhiên, các cục bộ này vẫn chưa đáp ứng được Tạo thẻ Bootstrap nhómBạn có thể sử dụng thẻ nhóm để hiển thị thẻ dưới dạng một phần tử đính kèm duy nhất với các cột chiều rộng và chiều cao bằng nhau. Tuy nhiên, các thẻ bên trong một thẻ nhóm sẽ được xếp chồng lên nhau theo chiều ngang trên các thiết bị cực nhỏ (tức là chiều rộng khung nhìn < 576px). Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào Kết quả của ví dụ trên sẽ giống như sau Tạo lưới Bootstrap CardBạn có thể sử dụng hệ thống lưới Bootstrap và các lớp Kết quả của ví dụ trên sẽ giống như sau Tạo Bootstrap Card nằm ngangBạn có thể tạo thẻ nằm ngang trong đó nội dung hình ảnh và văn bản được đặt cạnh nhau bằng cách sử dụng kết hợp các lớp tiện ích và lưới, như được minh họa trong ví dụ sau Kết quả của ví dụ trên sẽ giống như sau Tạo hình nền cho Bootstrap CardBạn thậm chí có thể biến hình ảnh thành thẻ nền và đặt văn bản của thẻ lên trên cùng bằng cách sử dụng Lớp Kết quả của ví dụ trên sẽ giống như sau Lưu ý. Thẻ nội dung không được lớn hơn chiều cao của ảnh. Nếu nội dung lớn hơn hình ảnh, nội dung sẽ được hiển thị bên ngoài hình ảnh Căn chỉnh văn bản bên trong Bootstrap CardBạn có thể dễ dàng thay đổi căn chỉnh văn bản của bất kỳ thẻ nào — toàn bộ hoặc từng phần cụ thể — với các lớp tiện ích căn chỉnh văn bản. Ví dụ. bạn có thể sử dụng lớp Kết quả của ví dụ trên sẽ giống như sau Bootstrap Card size onlyThẻ không có chiều rộng cụ thể, chúng có chiều rộng 100% theo mặc định. Tuy nhiên, bạn có thể thay đổi điều này nếu cần với tùy chỉnh CSS, lưới lớp hoặc lớp tiện ích định mức Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào Tạo liên kết cho toàn bộ Bootstrap CardBạn có thể thêm lớp |
