Bootstrap nắm giữ rất nhiều bàn tay của các nhà phát triển full-stack khi nói đến việc tạo các trang web. Rất nhiều người trong chúng ta không biết cách sử dụng Figma, không chắc về “thiết kế” tốt là gì và không thành thạo với các thuộc tính CSS.  Nhưng chết tiệt chúng ta có giỏi trong việc xây dựng lược đồ cơ sở dữ liệu, xây dựng bộ điều khiển và mô hình của chúng ta, tạo một chủ đề bootstrap mà chúng ta tìm thấy trên Google trong quan điểm của mình và gọi đó là một ngày.  Kết quả cuối cùng thường khiến một người hài lòng với hiệu quả mà họ đã tạo trang web của họ nhưng   . không hài lòng với kết quả    - nhà phát triển full-stack nói chung. “Có vẻ ổn nhưng không giống như trang web tuyệt vời đó của một nhà thiết kế tuyệt vời nào đó mà tôi đã thấy gần đây”  Bài viết này là một hướng dẫn về   hữu ích để đạt được sự hài lòng với giao diện của trang web theo chủ đề bootstrap của bạn. các mẹo thiết kế  Thành lập  Tôi sẽ bắt đầu với   bootstrap miễn phí này. Bây giờ chúng ta hãy cải thiện nó! chủ đề  Mở rộng màu sắc của bạn  Cập nhật bảng màu của bạn  Bootstrap đi kèm với một bảng màu toàn bộ mà bạn có thể chưa biết. Hãy tận dụng lợi thế của nó để trông khác biệt so với các trang web bootstrap cắt cookie khác.   Để có quyền truy cập vào các màu này, chúng ta chỉ cần thêm chúng vào tệp bootstrap   của mình. scss/_variables.scss   $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;  Hoặc nếu bạn đang sử dụng thiết lập npm cho Bootstrap, hãy cập nhật tệp sass tùy chỉnh của bạn đã được biên dịch.   @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";  Bây giờ chúng tôi có thể cập nhật màu xanh chính của bootstrap thô đó thành màu xanh mòng két mềm mại đẹp mắt cho nút bắt đầu của chúng tôi. Chúng tôi cũng sẽ muốn thay đổi văn bản từ màu trắng sang màu đen bằng cách loại bỏ lớp   trên nó. Điều này là để dễ đọc trên màu nền sáng hơn.  text-white  Thêm gợi ý màu sắc vào đầu phần anh hùng của bạn  Chúng tôi có thể thêm một đường viền nhỏ vào đầu điều hướng để mang lại sức sống thêm cho trang của chúng tôi với màu chính xanh mòng két mới thông qua   .  đường viền chính  Chữ  Thay đổi chiều cao dòng thành các phần tử chung  Một thay đổi nhỏ mà nhiều người không biết là giảm chiều cao dòng của bạn khi văn bản lớn hơn. Hãy ghi đè chiều cao dòng mặc định cho các phần tử HTML phổ biến trong tệp CSS của chúng tôi.     h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; }  Khoảng cách chữ được cập nhật  Các dòng tiêu đề lớn thường có quá nhiều khoảng cách giữa các chữ cái theo mặc định. Thu hẹp khoảng cách chữ cái của thẻ h1 và h2 của bạn bằng cách cập nhật tệp CSS của chúng tôi như chúng tôi đã làm đối với chiều cao dòng.     h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; }  Văn bản hỗ trợ dòng tiêu đề nặng hơn  Bây giờ chúng ta có thể củng cố văn bản hỗ trợ trong anh hùng. Sự tương phản giữa nó và thẻ H1 là cực kỳ lớn. Chúng tôi sẽ loại bỏ lớp   và cấp cho nó một lớp   . Điều này đi kèm với trọng lượng phông chữ dày hơn.  chính fs-5  Bản tóm tắt  Nơi chúng ta đang ở cho đến nay ...   Tôi muốn tái cấu trúc chủ đề này trong 1 bài đăng trên blog nhưng nó quá nhiều nội dung. Tôi đang chia nó thành nhiều bài báo.  Kiểm tra lại vào tuần sau cho bài viết 2 hoặc đăng ký Bản tin của tôi tại   . Tôi sẽ cập nhật phần tính năng của chủ đề và sẽ có một số mẹo 🔥 cho bạn. thefreelancedev.com  Tôi cũng khuyên bạn nên xem   . Nó đã thay đổi hoàn toàn quan điểm của tôi về thiết kế với tư cách là một nhà phát triển. Refactoring UI  ✌️  Cũng được xuất bản   . ở đây

Google

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

Cách hack Bootstrap CSS để có trang web đẹp hơn

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

145 Stories To Learn About Book

287 Stories To Learn About Blockchain Development

61 Stories To Learn About Polotical Philosophy

85 Stories To Learn About Productivity Hacks

145 Stories To Learn About Book

287 Stories To Learn About Blockchain Development

61 Stories To Learn About Polotical Philosophy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps