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   đ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.  --bs-bg-opacity   <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   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   để giữ cho danh sách không chồng lên nút.  bóng mt-2   <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   để thêm bóng vào lớp của bạn và tăng phần đệm với lớp   để tạo thêm khoảng cách bên trong cho lớp.  bóng p-2   <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.

Twitter

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Website Development

I simplify complex topics - like development and design - and cure your imposter syndrome.

.NET remote job board

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Make resilience your competitive advantage

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

85 Stories To Learn About Productivity Hacks

178 Stories To Learn About Essay

145 Stories To Learn About Book

72 Stories To Learn About The Essays Of Adam Smith

85 Stories To Learn About Productivity Hacks

178 Stories To Learn About Essay

145 Stories To Learn About Book

72 Stories To Learn About The Essays Of Adam Smith

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps