Thẻ Bootstrap
Thẻ Bootstrap là một trong những thành phần phổ biến nhất của nó và có lý do chính đáng. Chúng hoạt động như một vùng chứa phương tiện rất linh hoạt và có một số kiểu dáng và định dạng cài sẵn đẹp mắt.
Nội dung thẻ có thể là bất kỳ thứ gì từ văn bản, hình ảnh, liên kết, nút, danh sách và cũng có thể có đầu trang và chân trang.
Kiến thức cơ bản về thẻ Bootstrap
Thẻ Bootstrap được tạo bằng flexbox và mở rộng theo chiều rộng của phần tử chứa chúng theo mặc định. Nếu chúng ta muốn chỉ định một chiều rộng khác, chúng ta có thể sử dụng lớp tiện ích chiều rộng của Bootstrap trên chính phần tử thẻ hoặc chúng ta có thể bọc thẻ trong một phần tử có chứa và kích thước nó bằng các lớp cột của Bootstrap.
Hãy xem một vài ví dụ:
<div class="container-fluid bg-light">
<div class="card p-4 m-4">card 1</div>
<div class="card p-4 m-4">card 2</div>
<div class="card p-4 m-4">card 3</div>
<div class="card-group m-4">
<div class="card p-4">card 4</div>
<div class="card p-4">card 5</div>
<div class="card p-4">card 6</div>
</div>
<div class="card-deck m-4">
<div class="card p-4 m-4">card 7</div>
<div class="card p-4 m-4">card 8</div>
<div class="card p-4 m-4">card 9</div>
</div>
</div> Quy tắc chung của Bootstrap là bao bọc mọi thứ bên trong
trong một phần tử CONTAINER, điều này làm cho mọi thứ bên trong nó đều phản hồi.
Điều đó có nghĩa là nó sẽ thay đổi kích thước và bố cục theo kích thước màn hình hiện tại.
Trong ví dụ của chúng tôi, chúng tôi đã sử dụng CONTAINER-FLUID, chỉ làm cho phần tử có chiều rộng đầy đủ, thay vì chỉ CONTAINER, thêm lề ngang và căn giữa nó trên trang.
Tiếp theo, chúng ta có bộ ba thẻ đầu tiên. Chúng không có phần tử mẹ nào ngoài vùng chứa nên chúng có hành vi thẻ mặc định và được sắp xếp từ trên xuống dưới như chúng ta thấy trong ảnh chụp màn hình:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
P-4 và m-4 mà bạn thấy trong đoạn mã đại diện cho một khoảng đệm ở tất cả các cạnh của 1,5 rem và lề trên tất cả các cạnh tương ứng là 1,5 rem.
Các giá trị tiện ích định kích thước Bootstrap:
0 =0 còn lại;
1 =0,25 phần dư;
2 =0,5 phần dư;
3 =1 phần còn lại;
4 =1,5 phần dư;
5 =3 rem;
Sau đó, chúng ta có các thẻ 4, 5 và 6, được bọc trong một
Cuối cùng, các thẻ 7, 8 và 9 được bao bọc trong một
Định cỡ thẻ theo cách thủ công
Trước khi chúng tôi làm một số thẻ có kích thước thủ công, hãy tìm hiểu một chút về bố cục và hệ thống điểm ngắt của Bootstrap.
Cột Bootstrap
Bootstrap chia trang thành 12 cột để dễ dàng phát triển bố cục.
Dưới đây là một bản demo nhanh để hình dung nó:
<div class="row">
<div class="col border p-5">column 1</div>
<div class="col border p-5">column 2</div>
<div class="col border p-5">column 3</div>
<div class="col border p-5">column 4</div>
<div class="col border p-5">column 5</div>
<div class="col border p-5">column 6</div>
<div class="col border p-5">column 7</div>
<div class="col border p-5">column 8</div>
<div class="col border p-5">column 9</div>
<div class="col border p-5">column 10</div>
<div class="col border p-5">column 11</div>
<div class="col border p-5">column 12</div>
</div>
Đầu tiên, chúng ta có một trình bao bọc cho các cột được gọi là ROW, chỉ là một vùng chứa flexbox cho chúng. Chúng tôi khai báo kích thước của một phần tử bằng cách viết COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUPY.
Trong ví dụ trên, chúng tôi đã không cung cấp điểm ngắt vì chúng tôi muốn định kích thước này bất kể kích thước của màn hình và không có số cột vì bỏ qua nó sẽ mặc định là COL-1 để chúng tôi có 12 cột tự nhiên. Đây là những gì nó trông như thế nào:
Điểm ngắt của Bootstrap:
Bootstrap là một khuôn khổ ưu tiên thiết bị di động, có nghĩa là khi phát triển với Bootstrap, bạn ưu tiên bố cục di động và làm việc theo cách của bạn trở lên. Tất cả các lớp của nó ảnh hưởng đến phần tử từ điểm ngắt được cung cấp trở lên.
Cực nhỏ là mặc định, vì vậy việc bỏ qua hoàn toàn điểm ngắt, chẳng hạn như P-4, giống như cách viết P-XS-4 sẽ áp dụng nó trên kích thước màn hình XS và tất cả các điểm lớn hơn.
Nói cách khác, nếu bạn muốn quy tắc có hiệu lực trên tất cả các màn hình, chỉ cần bỏ qua điểm ngắt.
Nếu chúng tôi muốn giảm phần đệm từ ví dụ xuống 0,5 rem từ kích thước màn hình trung bình trở lên, chúng tôi sẽ thêm lớp P-MD-2 trên cùng một phần tử.
Giá trị pixel điểm ngắt:
- xs - kích thước màn hình dưới 576 pixel. Đây là mặc định.
- sm - kích thước màn hình từ 576 pixel trở lên.
- md - kích thước màn hình từ 768 pixel trở lên.
- lg - kích thước màn hình từ 992 pixel trở lên.
- xl - kích thước màn hình từ 1200 pixel trở lên.
Bây giờ, hãy sử dụng điều này để làm cho bố cục của chúng ta thay đổi tùy thuộc vào kích thước màn hình:
<div class="row">
<div class="col-5 col-md-7">
<div class="card p-4">left column card</div>
<div class="card p-4">left column card</div>
<div class="card p-4">left column card</div>
<div class="card p-4">left column card</div>
</div>
<div class="col-7 col-md-5">
<div class="card p-4">right column card</div>
<div class="card p-4">right column card</div>
<div class="card p-4">right column card</div>
<div class="card p-4">right column card</div>
</div>
</div> Một lần nữa, chúng tôi có trình bao bọc ROW của mình và sau đó đặt
Chiều rộng 767 pixel,
Chúng tôi tăng 1 pixel lên 768 và chúng thay đổi thành ngược lại:
Thành phần con của thẻ
Bây giờ, hãy tận dụng toàn bộ sức mạnh của thẻ bằng cách thử tất cả các thành phần phụ của chúng.
Thẻ có Đầu trang và Chân trang
<div class="card">
<div class="card-header text-center p-4">I'm a header</div>
<div class="card-body">
<p class="card-text">
first paragraph
</p>
<p class="card-text">
second paragraph
</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
<a href="#" class="card-link">Link 3</a>
</div>
<div class="card-footer">
Footer of a Bootstrap card
</div>
</div>
Chúng tôi đã tạo một thẻ có tiêu đề thẻ được căn giữa, có đường viền và nền màu xám nhạt, và phần thân thẻ bên dưới tạo cho thẻ một số khoảng đệm.
Trong phần nội dung, chúng ta có một số đoạn văn với CARD-TEXT để căn chỉnh và một số liên kết với CARD-LINK, vì vậy chúng có màu xanh lam và được đặt cạnh nhau.
Cuối cùng, chúng tôi đã tạo một chân trang thẻ có cùng kiểu dáng với đầu trang, nhưng chúng tôi không căn giữa văn bản lần này.
Thẻ có nắp hình ảnh
Lần này, chúng tôi sẽ thêm chú thích hình ảnh vào thẻ, tiêu đề và phụ đề vào nội dung thẻ và nhóm danh sách với các liên kết dưới dạng các mục danh sách:
<div class="card">
<img
src="https://via.placeholder.com/100"
alt=""
class="card-img-top"
/>
<div class="card-body">
<h3 class="card-title">card title in the card's body</h3>
<h4 class="card-subtitle mb-4">card subtitle</h4>
<p>list group with links inside:</p>
<ul class="list-group">
<li class="list-group-item">
<a href="#" class="card-link">List link 1</a>
</li>
<li class="list-group-item">
<a href="#" class="card-link">List link 2</a>
</li>
<li class="list-group-item">
<a href="#" class="card-link">List link 3</a>
</li>
</ul>
</div>
</div>
Tôi đang sử dụng một công cụ rất tiện dụng cho hình ảnh được gọi là trình giữ chỗ. Con số ở cuối là chiều rộng x chiều cao pixel của hình ảnh, nhưng điều đó bị bỏ qua ở đây vì CARD-IMG-TOP kéo dài (hoặc thu nhỏ) hình ảnh vào toàn bộ chiều rộng của thẻ. Tiêu đề và phụ đề có một số định dạng đẹp mắt và chúng tôi đã sử dụng một trong những tiện ích định hướng của Bootstrap cho phần đệm và lề. MB-4 mà bạn nhìn thấy trên phụ đề là viết tắt của margin bottom.
Phần đệm Bootstrap và hướng lề:
- pt / mt - padding / margin top
- pb / mb - padding / margin bottom
- pl / ml - padding / margin left
- pr / mr - padding / margin right
- py / my - trục đệm / lề y (trên và dưới)
- px / mx - padding / margin x axis (trái và phải)
Sau đó, chúng ta có một nhóm danh sách gói gọn lại danh sách và đó là các phần tử riêng lẻ với đường viền tròn, nhẹ. Đây là kết quả của chúng tôi:
Nắp ảnh dưới cùng
Không có CARD-IMG-BOTTOM trong bootstrap, nhưng chúng tôi có thể dễ dàng "giả mạo" điều này bằng cách tạo một div ở cuối thẻ và đặt một
<div class="card">
<div class="card-body">
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
unde corporis sed nam ad eius, pariatur, consectetur modi
asperiores dolorem id quaerat eos quod nesciunt repudiandae aut
temporibus rerum possimus.
</p>
</div>
<img
src="https://via.placeholder.com/100"
alt=""
class="card-img-top"
/>
</div>
Tôi cũng đã thêm ipsum lorem cũ tốt để có biện pháp tốt.
Nắp ảnh bên
Chúng tôi cũng có thể làm cho nó nằm ngang bằng cách thêm một trình bao bọc ROW bên trong thẻ của chúng tôi để đặt nó theo chiều ngang, sau đó sử dụng COL để xác định kích thước của hình ảnh và phần còn lại của thẻ:
<div class="card">
<div class="row">
<img
src="https://via.placeholder.com/100"
alt=""
class="card-img-top col-6"
/>
<div class="card-body col-6">
<h3 class="card-title">card title in the card's body</h3>
<h4 class="card-subtitle mb-4">card subtitle</h4>
<p>list group with links inside:</p>
<ul class="list-group">
<li class="list-group-item">
<a href="#" class="card-link">List link 1</a>
</li>
<li class="list-group-item">
<a href="#" class="card-link">List link 2</a>
</li>
<li class="list-group-item">
<a href="#" class="card-link">List link 3</a>
</li>
</ul>
</div>
</div>
</div> Chúng tôi chỉ gói tất cả nội dung của thẻ trong một
và thêm COL-6 vào cả hình ảnh và phần thân thẻ để làm cho thẻ trở thành 50-50.
Hình ảnh thẻ làm nền
Chúng tôi cũng có thể kéo dài một hình ảnh trên toàn bộ thẻ và có văn bản, danh sách, liên kết, v.v., nằm trên nó. Chúng tôi thực hiện điều đó bằng cách chỉ cần cấp cho một lớp CARD-IMG và sau đó đặt mọi thứ khác vào một
<div class="card">
<img
src="https://via.placeholder.com/100"
alt=""
class="card-img"
/>
<div class="card-img-overlay">
<h4 class="card-title">Overlay Title</h4>
<p class="card-text">
Image text overlay
</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
<div class="btn-group w-100">
<button class="btn btn-primary">blue</button>
<button class="btn btn-info">teal</button>
<button class="btn btn-danger">red</button>
<button class="btn btn-dark">black</button>
<button class="btn btn-success">green</button>
</div>
</div>
</div>
Ở đây chúng tôi đã sử dụng tiện ích chiều rộng lần đầu tiên. W-100 trên BTN-GROUP.
Tiện ích Chiều rộng và Chiều cao Bootstrap:
w / h-25/50/75/100 - chiều rộng / chiều cao 25% / 50% / 75% / 100%
Trong trường hợp của chúng tôi, tỷ lệ này là 100% trừ đi phần đệm giống như CARD-BODY áp dụng, điều này được áp dụng ở đây bởi CARD-IMG-OVERLAY.
Cột thẻ
Ngoài ra còn có tùy chọn này để bố trí các thẻ theo cột để chúng đi từ trên xuống dưới trước và chỉ khi cột được lấp đầy, chúng mới bắt đầu trên một cột mới.
<div class="card-columns">
<div class="card">
<h3 class="card-title text-center p-2">Title of card 1</h3>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
rerum excepturi voluptate...
</p>
</div>
</div>
<div class="card">
<h3 class="card-title text-center p-2">Title of card 2</h3>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
rerum excepturi voluptate...
</p>
</div>
</div>
<div class="card">
<h3 class="card-title text-center p-2">Title of card 3</h3>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
rerum excepturi voluptate...
</p>
</div>
</div>
<div class="card">
<h3 class="card-title text-center p-2">Title of card 4</h3>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
rerum excepturi voluptate...
</p>
</div>
</div>
</div> Chúng tôi chỉ cần bọc tất cả các thẻ của mình trong một
Tạo kiểu thẻ Bootstrap
Khi nói đến việc tạo kiểu cho thẻ bootstrap, chúng ta có thể thay đổi màu nền và màu văn bản của chúng, cũng như màu sắc và giao diện của các đường viền của chúng.
Các kiểu có thể được áp dụng cho toàn bộ thẻ, đó là các thành phần con riêng biệt hoặc cả hai. Dưới đây là một số thẻ được tạo kiểu để xem:
<div class="card bg-primary">
<div class="card-header"><h3>Header 1</h3></div>
<div class="card-body">
<p>Body 1</p>
</div>
<div class="card-footer"><p>Footer 1</p></div>
</div>
<div class="card bg-success text-white">
<div class="card-header"><h3>Header 2</h3></div>
<div class="card-body">
<p>Body 2</p>
</div>
<div class="card-footer text-danger"><p>Footer 2</p></div>
</div>
<div class="card bg-info text-dark border-danger">
<div class="card-header"><h3>Header 3</h3></div>
<div class="card-body">
<p>Body 3</p>
</div>
<div class="card-footer"><p>Footer 3</p></div>
</div>
<div class="card border-primary bg-dark text-white">
<div class="card-header border-success"><h3>Header 4</h3></div>
<div class="card-body text-danger">
<p>Body 4</p>
</div>
<div class="card-footer bg-warning text-info"><p>Footer 4</p></div>
</div>
Thẻ đầu tiên có nền màu xanh lam (BG-PRIMARY) trên chính thẻ, tạo kiểu cho toàn bộ thẻ.
Thẻ thứ hai có nền màu xanh lục (BG-SUCCESS) và văn bản màu trắng (TEXT-WHITE) trên toàn bộ thẻ, nhưng có văn bản màu đỏ (TEXT-DANGER) ở chân trang, ghi đè lên TEXT-WHITE của phần tử chính.
Lá bài thứ ba có nền xanh lam đậm (BG-INFO), chữ đen (TEXT-DARK) và viền đỏ (BIÊN GIỚI-NGUY HIỂM).
Cuối cùng, lá bài thứ tư có viền xanh lam (BỐI CẢNH-CHÍNH), nền đen (BG-DARK), và chữ trắng (TEXT-WHITE) trên toàn bộ lá bài.
Đường viền màu xanh lá cây (BIÊN GIỚI-THÀNH CÔNG) trên tiêu đề, văn bản màu đỏ (TEXT-DANGER) ở phần thân và nền màu vàng (BG-WARNING) và văn bản màu xanh lam đậm (TEXT-INFO) ở chân trang.
Đây là những thẻ cầu vồng của chúng tôi trông như thế nào:
Tóm tắt lại
Thẻ Bootstrap là một thành phần khá mạnh với rất nhiều tùy chọn. Chúng có thể được nhóm lại thành một bộ bài cho một tổng thể riêng biệt, gắn kết hoặc thành một nhóm bài để hợp nhất chúng thành một thực thể duy nhất. Chúng có thể được trải ra trong một hàng hoặc trong các cột thẻ để có giao diện khác.
Chúng có thể lưu trữ hình ảnh, danh sách và liên kết, tất cả đều có nhiều bố cục khác nhau.
Họ cũng có thể có đầu trang và chân trang của riêng mình, tất cả đều có kiểu và định dạng đặt trước, nhưng mở để chúng tôi tùy chỉnh.
Chúng cực kỳ linh hoạt và có lẽ là một trong những ví dụ điển hình về mức độ bạn có thể đạt được với Bootstrap, với rất ít thiết lập trước đó, trong rất ít thời gian.