Bootstrap CSS vẫn là một điểm yếu nhưng chúng ta có thể làm cho nó tốt hơn

Bootstrap là một khung công tác CSS tuyệt vời cho những người gặp khó khăn với thiết kế, css hoặc cần xây dựng một cái gì đó nhanh chóng.

Nhưng các thành phần Bootstrap mà bạn sao chép và dán từ tài liệu có sai sót.

Những sai sót này đang kìm hãm thiết kế của bạn!

Dưới đây là 5 mẹo thiết kế để sửa những sai sót đó và cải thiện Bootstrap.

1) Thu hút sự chú ý đến các cảnh báo

Thêm các đường viền tối và các biểu tượng svg để thu hút sự chú ý của người dùng.

 <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center"> <!-- https://heroicons.com/ light-bul--> <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>

2) Các bảng không phải khớp với cơ sở dữ liệu của bạn

Các bảng HTML không nhất thiết phải là một bản sao của cấu trúc cơ sở dữ liệu của bạn. Xóa tên cột, id và kết hợp các trường khi thấy hợp lý.

 <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>

3) Các nút phụ không cần màu nền

Việc cung cấp cho các hành động chính màu nền và các hành động phụ không có màu nền sẽ thiết lập một thứ bậc quan trọng.

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>

4) Ngừng dán nhãn mọi thứ!

Các nhà phát triển thích gắn nhãn các giá trị. Dừng lại! Hiển thị thông tin như thể đó là một câu trong sách, không phải là một cặp giá trị khóa.

 <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>

5) Bóng> Đường viền

Các đường viền thẻ thường có cảm giác rườm rà. Bóng đổ nhấn mạnh các phần tử và tạo chiều sâu cho trang, làm cho phần tử đó cảm thấy gần gũi hơn với người dùng.

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>

Thêm mẹo thiết kế Bootstrap ??

Nếu bạn thích điều này, hãy cân nhắc xem dự án mới của tôi - Better Bootstrap

Ở đó, bạn sẽ tìm thấy một cuốn sách miễn phí chứa nhiều mẹo thiết kế Bootstrap giống như những cuốn sách trong bài viết này.

✌️ - Wes