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

Making security fun one episode at a time

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

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

Companies Mentioned

Wes | The Full Stack Dev

About Author

chuyên mục

Languages

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

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

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

Companies Mentioned

Wes | The Full Stack Dev

About Author

chuyên mục

Languages

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

NHỮNG BÀI VIẾT LIÊN QUAN