5 thành phần CSS Bootstrap cần thiết và cách cải thiện thiết kế của chúng

Một trong những điều tốt nhất về Bootstrap CSS là nó đi kèm với các ví dụ thành phần trong tài liệu của nó.

Nhưng những ví dụ này có sai sót. Sai sót trong thiết kế.

May mắn thay, chúng có thể dễ dàng được sửa chữa với một chút bí quyết thiết kế và các lớp Bootstrap độc đáo.

1) Làm lại viên thuốc để có cảm giác ấm hơn, mềm hơn

Màu sắc của viên thuốc Bootstrap rất khắc nghiệt. Bạn có thể sử dụng biến CSS --bs-bg-opacity đi kèm với Bootstrap. Điều này sẽ làm mềm màu nền để tạo độ tương phản tốt hơn.

 <span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span> <span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span> <span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span> <span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>

2) Đưa các nhóm danh sách ra ngoài cửa sổ

Họ xấu xí. Sử dụng danh sách HTML tiêu chuẩn. Bạn thậm chí có thể thêm SVG thay vì dấu đầu dòng danh sách tiêu chuẩn để thu hút nhiều sự chú ý hơn.

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h3 class="fs-5">Some items we sell</h3> <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;"> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> An item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A second item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A third item </li> </ul> </div> </div>

3) Cung cấp cho người thả xuống một cái bóng và một số không gian để thở.

Thêm bóng với lớp bóng vào danh sách thả xuống. Điều này tạo cho nó chiều sâu và vẻ ngoài gần gũi hơn với người dùng. Thêm một lề nhỏ với mt-2 để giữ cho danh sách không chồng lên nút.

 <div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div>

4) Sử dụng bóng và phần đệm bổ sung trên thẻ

Các đường viền thẻ thường có cảm giác rườm rà. Bóng nhấn mạnh các yếu tố và tạo độ sâu cho trang. Sử dụng lớp bóng để thêm bóng vào lớp của bạn và tăng phần đệm với lớp p-2 để tạo thêm khoảng cách bên trong cho lớp.

 <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>

5) Các bảng HTML không cần phải nhàm chán

Các bảng không nhất thiết phải là đại diện trực tiếp 1-1 cho cơ sở dữ liệu của bạn. Nếu thấy hợp lý, hãy kết hợp các cột và ẩn tiêu đề. Điều này làm cho nó giống như một cơ sở dữ liệu và giống như một thành phần giao diện người dùng hơn.

 <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>

Thêm thủ thuật 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 15 mẹo thiết kế Bootstrap. Cuốn sách đầy đủ sẽ ra mắt vào cuối năm nay.