Bootstrap - Placeholders: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của Bootstrap placeholders. Là người giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn từng bước, đảm bảo bạn hiểu rõ từng phần của chủ đề này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu hành trình thú vị này nhé!

Cách hoạt động

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Trước khi bạn đặt vào nội thất thực tế, bạn có thể sử dụng các hộp carton để đại diện cho vị trí của các vật dụng. Đó chính xác là những gì placeholders làm trong thiết kế web! Chúng là những đại diện tạm thời cho nội dung vẫn đang tải hoặc chưa có sẵn.

Bootstrap placeholders là một tính năng thông minh giúp tạo ra một trải nghiệm người dùng mượt mà và thú vị. Chúng cung cấp cho người dùng một tín hiệu thị giác rằng nội dung đang trên đường đến, thay vì để họ nhìn vào một trang trống.

Tạo Placeholders

Hãy bắt đầu với những điều cơ bản. Tạo một placeholder trong Bootstrap dễ dàng như trở bàn tay! Dưới đây là một ví dụ đơn giản:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>

Mã này tạo ra một placeholder toàn width kéo dài qua toàn bộ trang. Class placeholder-glow thêm một hiệu ứng animation nhẹ nhàng, làm rõ ràng rằng có điều gì đó đang xảy ra phía sau.

Chiều rộng của Placeholder

Tương tự như bạn không sử dụng giường king-size để đại diện cho một bàn cà phê nhỏ trong ví dụ xây dựng ngôi nhà của chúng ta, bạn có thể điều chỉnh chiều rộng của placeholders để phù hợp với nội dung mà chúng thay thế. Bootstrap sử dụng hệ thống lưới 12 cột, vì vậy bạn có thể dễ dàng đặt chiều rộng của placeholders.

Dưới đây là một ví dụ:

<p class="placeholder-glow">
<span class="placeholder col-6"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-4"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-8"></span>
</p>

Trong đoạn mã này, chúng ta đang tạo ba placeholders với các chiều rộng khác nhau. Placeholder đầu tiên chiếm một nửa width (6 cột), placeholder thứ hai chiếm một phần ba (4 cột), và placeholder thứ ba chiếm hai phần ba (8 cột).

Màu sắc của Placeholder

Bây giờ, hãy thêm một chút màu sắc vào placeholders của chúng ta! Tương tự như bạn có thể sử dụng các hộp có màu khác nhau để đại diện cho các loại nội thất khác nhau, chúng ta cũng có thể sử dụng các màu khác nhau cho placeholders của mình.

Dưới đây là cách bạn có thể làm điều đó:

<p class="placeholder-glow">
<span class="placeholder col-12 bg-primary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-secondary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-success"></span>
</p>

Trong ví dụ này, chúng ta đang tạo ba placeholders toàn width với các màu khác nhau. Các class bg-primary, bg-secondary, và bg-success cho chúng ta placeholders màu xanh lam, xám, và xanh lá cây tương ứng.

Kích thước của Placeholder

Tương tự như nội thất có nhiều kích thước khác nhau, placeholders của chúng ta cũng có thể thay đổi kích thước! Bootstrap cho phép chúng ta dễ dàng điều chỉnh kích thước của placeholders bằng cách sử dụng các class được xác định trước.

Hãy xem đoạn mã này:

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Ở đây, chúng ta đang tạo bốn placeholders với các kích thước khác nhau. Class placeholder-lg tạo một placeholder lớn, trong khi placeholder-sm và placeholder-xs tạo ra các placeholders nhỏ hơn. Placeholder không có class kích thước là kích thước mặc định.

Animation của Placeholder

Cuối cùng nhưng không kém phần quan trọng, hãy thêm một chút sống động vào placeholders của chúng ta với các animation! Điều này giống như thêm một biển báo "Sắp ra mắt" vào nội thất carton của chúng ta - nó cho người dùng biết rằng điều gì đó đang diễn ra.

Dưới đây là cách bạn có thể animate placeholders của mình:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>

Trong ví dụ này, chúng ta đang sử dụng hai phong cách animation khác nhau. Class placeholder-glow tạo ra một hiệu ứng nhấp nháy nhẹ nhàng, trong khi placeholder-wave tạo ra một animation sóng từ trái sang phải.

Kết hợp tất cả

Bây giờ,我们已经 học về tất cả các tính năng placeholder tuyệt vời, hãy kết hợp chúng vào một ví dụ超级:

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top placeholder-glow" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

Đoạn mã này tạo ra một thẻ card với placeholders cho hình ảnh, tiêu đề, văn bản, và một nút. Nó giống như chúng ta đang thiết lập một gian hàng trong cửa hàng nội thất carton của mình!

Kết luận

Và thế là bạn đã có nó, các bạn! Bạn vừa học cách sử dụng Bootstrap placeholders như một chuyên gia. Nhớ rằng, placeholders giống như phần mở đầu của một buổi hòa nhạc - chúng tạo ra sân khấu và xây dựng sự mong đợi cho phần chính (nội dung thực tế) của bạn.

Trong hành trình phát triển web của bạn, bạn sẽ tìm thấy rất nhiều cách sáng tạo để sử dụng placeholders. Chúng không chỉ hữu ích; chúng còn có thể là một cách thú vị để thêm tính cách vào màn hình tải của bạn.

Tiếp tục thực hành, tiếp tục thử nghiệm, và quan trọng nhất, hãy luôn vui vẻ với nó. Trước khi bạn nhận ra, bạn sẽ tạo ra các trang web trông tuyệt vời ngay cả khi chúng chưa hoàn thành tải!

Phương pháp	Mô tả
Tạo Placeholders	Sử dụng <span class="placeholder"></span> trong <p class="placeholder-glow"> hoặc <p class="placeholder-wave">
Đặt Chiều rộng	Sử dụng các class cột của Bootstrap, ví dụ: col-6 để đặt nửa width
Thay đổi Màu sắc	Áp dụng các class màu nền như bg-primary, bg-secondary, v.v.
Điều chỉnh Kích thước	Sử dụng placeholder-lg, placeholder-sm, hoặc placeholder-xs
Thêm Animation	Đặt placeholders trong <p class="placeholder-glow"> hoặc <p class="placeholder-wave">

Chúc mừng coding, và hy vọng placeholders của bạn luôn được đặt chính xác!

Credits: Image by storyset