Dù lý do là gì, có 2 cách để tùy chỉnh Bootstrap. Tôi sẽ bắt đầu với phương pháp dễ dàng hơn, kém mạnh mẽ hơn bằng cách sử dụng CSS, sau đó giải thích phương pháp nâng cao hơn bằng cách sử dụng SASS Show 1. Ghi đè CSS đơn giản Phương pháp này hoạt động bằng cách xác định các quy tắc CSS khớp với các quy tắc CSS của Bootstrap, quy tắc này tạo ra kiểu “ghi đè”. Phương pháp này dễ bảo trì và cho phép bạn nâng cấp lên các phiên bản nhỏ của Bootstrap trong tương lai mà không phá vỡ các kiểu tùy chỉnh của bạn Trong CSS, thứ tự quan trọng. Định nghĩa cuối cùng của quy tắc CSS sẽ ghi đè mọi quy tắc đã xác định trước đó trong đó bộ chọn CSS và thuộc tính khớp với nhau. Đây là cách hoạt động của phương pháp tùy chỉnh ghi đè CSS Các tùy chỉnh CSS của chúng tôi được đặt trong một tệp /* remove rounding from cards, buttons and inputs */7 riêng biệt để tệp /* remove rounding from cards, buttons and inputs */8 không bị sửa đổi. Tham chiếu đến /* remove rounding from cards, buttons and inputs */7 theo sau ______08 làm cho phần ghi đè hoạt động<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css">Chúng tôi thêm bất kỳ thay đổi nào cần thiết vào tệp /* remove rounding from cards, buttons and inputs */7. Ví dụ: giả sử tôi muốn xóa các đường viền tròn khỏi Thẻ, Nút và Đầu vào biểu mẫuTôi thêm một quy tắc CSS vào /* remove rounding from cards, buttons and inputs */7…/* remove rounding from cards, buttons and inputs */Với thay đổi CSS đơn giản này, Thẻ, Nút và Đầu vào biểu mẫu hiện có các góc vuông… Đây là bản demo hoạt động trên Codeply Bản trình diễn ghi đè CSS đơn giảnTính đặc hiệu của CSS là quan trọngKhi thực hiện các tùy chỉnh, bạn cần hiểu Tính đặc hiệu của CSS Ghi đè trong ______07 cần sử dụng các bộ chọn cụ thể như /* remove rounding from cards, buttons and inputs */8. Ví dụ: đây là CSS cho Bootstrap 4 /* remove rounding from cards, buttons and inputs */05 được hiển thị trên Thanh điều hướng có nền tối (/* remove rounding from cards, buttons and inputs */06)/* remove rounding from cards, buttons and inputs */0Để ghi đè màu /* remove rounding from cards, buttons and inputs */05, điều này sẽ không hoạt động ❌/* remove rounding from cards, buttons and inputs */4Bộ chọn của tôi trong /* remove rounding from cards, buttons and inputs */7 phải khớp với bộ chọn Bootstrap ✅/* remove rounding from cards, buttons and inputs */6Tất nhiên, sử dụng bộ chọn cụ thể hơn (độ đặc hiệu cao hơn) cũng sẽ hoạt động. Ví dụ, bạn chỉ muốn thay đổi các màu của /* remove rounding from cards, buttons and inputs */05 thành một Thanh điều hướng với /* remove rounding from cards, buttons and inputs */40…✅/* remove rounding from cards, buttons and inputs */9
Bằng cách đặt tất cả các phần ghi đè Bootstrap vào một ____07 riêng biệt, việc theo dõi các thay đổi sẽ dễ dàng hơn nhiều và hoàn nguyên về các kiểu Bootstrap mặc định nếu cần. Nếu bạn thực hiện các thay đổi trực tiếp đối với biểu định kiểu /* remove rounding from cards, buttons and inputs */8 mặc định, việc duy trì và theo dõi các thay đổi sẽ trở nên rất khó khănBất kỳ nâng cấp nhỏ nào đối với các phiên bản Bootstrap đều có thể được thực hiện bằng cách hoán đổi /* remove rounding from cards, buttons and inputs */8 mà không phá vỡ các kiểu tùy chỉnh của bạn trong /* remove rounding from cards, buttons and inputs */7Sử dụng ghi đè CSS là khả thi đối với các tùy chỉnh Bootstrap đơn giản, nhưng đối với những thay đổi sâu rộng hơn, SASS là phương pháp tốt hơn. Ví dụ, giả sử bạn muốn thay đổi màu “chính” màu xanh lam mặc định trong Bootstrap sang một màu khác (ví dụ:. màu đỏ). Bạn có thể tạo một ghi đè CSS đơn giản cho nút /* remove rounding from cards, buttons and inputs */45 như thế này/* remove rounding from cards, buttons and inputs */5Vâng, cách này có tác dụng làm cho nút /* remove rounding from cards, buttons and inputs */45 có màu đỏ. Tuy nhiên, nó không thay đổi các trạng thái khác của /* remove rounding from cards, buttons and inputs */47 như ". bay lượn", ". đang hoạt động" và "đã tắt". Nó cũng không thay đổi màu "chính" trong toàn bộ CSS cho /* remove rounding from cards, buttons and inputs */48, /* remove rounding from cards, buttons and inputs */49, /* remove rounding from cards, buttons and inputs */60, /* remove rounding from cards, buttons and inputs */61, /* remove rounding from cards, buttons and inputs */62, v.v.Đối với các tùy chỉnh Bootstrap mở rộng hơn như thế này, bạn sẽ muốn sử dụng SASS 2. Tùy chỉnh Bootstrap bằng SASS Trước tiên hãy nói về SASS và nó liên quan như thế nào đến Bootstrap
Vì toàn bộ được viết bằng ngôn ngữ SASS, nên chúng được biên dịch bằng trình biên dịch SASS (A. K. một bộ xử lý trước). Do đó, điều hợp lý là SASS là cách được khuyến nghị để tùy chỉnh Bootstrap 1. Cấu trúc dự án Trước tiên, hãy xem xét cấu trúc thư mục và tệp Bootstrap 4 SASS… /* remove rounding from cards, buttons and inputs */4Những điều bạn cần biết về tệp nguồn Bootstrap SASS
Các biến và bản đồ Bootstrap SASS thường được sử dụngĐể biết Bootstrap, là biết rằng có rất nhiều biến SASS. Dưới đây là những điều phổ biến hơn hữu ích để biết về… Màu chủ đề Khi nói đến việc tùy chỉnh giao diện Bootstrap mặc định, thay đổi bảng màu 🎨 thường là điều đầu tiên bạn nghĩ đến. Để thay đổi những màu này, hãy sử dụng bản đồ /* remove rounding from cards, buttons and inputs */92 SASS…<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css">4Cho phép-… Các biến đúng/sai tự giải thích này có thể được chuyển đổi theo ý muốn… <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css">5Điểm dừng lưới Các điểm dừng phản hồi mặc định dựa trên độ rộng của thiết bị điển hình và có thể thay đổi khi cần. Thay đổi bản đồ /* remove rounding from cards, buttons and inputs */93 SASS sẽ thay đổi điểm ngắt cho lưới, cũng như bất kỳ lớp phản hồi nào khác (e. g. /* remove rounding from cards, buttons and inputs */94)…/* remove rounding from cards, buttons and inputs */0Khoảng cách dọc và ngang “Dấu cách” được sử dụng làm cơ sở cho phần đệm và lề trong nhiều khu vực của Bootstrap CSS. Tăng nó lên một chút (ví dụ:. /* remove rounding from cards, buttons and inputs */95) sẽ thêm nhiều khoảng trắng giữa một số phần tử/* remove rounding from cards, buttons and inputs */1Vì , các tùy chỉnh của bạn phải được lưu giữ trong một tệp /* remove rounding from cards, buttons and inputs */96 riêng nằm bên ngoài các tệp nguồn Bootstrap SASS. Đảm bảo giữ /* remove rounding from cards, buttons and inputs */97 ở gần để tham khảo khi tạo /* remove rounding from cards, buttons and inputs */96 của bạn/* remove rounding from cards, buttons and inputs */2Tương tự như phần ghi đè CSS của chúng tôi đã giải thích trước đó, việc sử dụng tệp /* remove rounding from cards, buttons and inputs */96 riêng biệt cho phép chúng tôi thực hiện các thay đổi không ảnh hưởng đến nguồn Bootstrap, điều này giúp cho các thay đổi và nâng cấp trong tương lai dễ dàng hơn nhiều mà không cần ghi đè các thay đổi trong tệp /* remove rounding from cards, buttons and inputs */962. tùy chỉnh Như đã nêu trước đó, có những khía cạnh khác nhau của Bootstrap mà bạn có thể muốn thay đổi hoặc ghi đè bằng phong cách của riêng mình. Tôi sẽ chỉ cho bạn một ví dụ về mỗi Thay đổi kiểu hiện có như màu sắc, phông chữ hoặc đường viền… Hãy xem lại thay đổi (tùy chỉnh) mà chúng ta đã thực hiện trước đó đối với /* remove rounding from cards, buttons and inputs */47. Thay vì chỉ thay đổi /* remove rounding from cards, buttons and inputs */47, chúng tôi muốn thay đổi màu chủ đề của /* remove rounding from cards, buttons and inputs */53 trên toàn bộ CSS. Đây là cách điều này sẽ được thực hiện trong /* remove rounding from cards, buttons and inputs */96/* remove rounding from cards, buttons and inputs */3
Như bạn có thể thấy trong /* remove rounding from cards, buttons and inputs */96, chúng tôi @import các tệp Bootstrap cần thiết cho quá trình ghi đè. (Thông thường, đây chỉ là _/* remove rounding from cards, buttons and inputs */58. Trong một số trường hợp, với các tùy chỉnh phức tạp hơn, bạn sẽ cần đến /* remove rounding from cards, buttons and inputs */59 và /* remove rounding from cards, buttons and inputs */40). Thực hiện các thay đổi, sau đó /* remove rounding from cards, buttons and inputs */41. Điều quan trọng là thực hiện các thay đổi trước /* remove rounding from cards, buttons and inputs */42. Đây là một ví dụ khácThêm màu chủ đề mới (btn-purple, bg-purple, text-purple, v.v. )… /* remove rounding from cards, buttons and inputs */4Thay đổi các điểm ngắt bố cục lưới… /* remove rounding from cards, buttons and inputs */5Mở rộng các lớp Bootstrap với các lớp tùy chỉnh mới (tức là. hàng-tối)… Bạn có thể mở rộng các lớp Bootstrap hiện có để tạo các lớp tùy chỉnh mới. Ví dụ: đây là lớp /* remove rounding from cards, buttons and inputs */43 mới mở rộng (kế thừa từ) lớp Bootstrap /* remove rounding from cards, buttons and inputs */44, sau đó thêm màu nền và màu. Lưu ý cách các tùy chỉnh này được đặt sau /* remove rounding from cards, buttons and inputs */45/* remove rounding from cards, buttons and inputs */6Sau khi /* remove rounding from cards, buttons and inputs */96 chứa các tùy chỉnh phù hợp, bạn sẽ cần biên dịch SASS để tạo CSS kết quả3. Biên dịch SASS Có một số công cụ có thể được sử dụng để biên dịch SASS thành CSS. Tất cả các công cụ đều chạy trên máy chủ Web bởi vì, như đã nói ở trên, trình duyệt Web không “hiểu” SASS. Dưới đây là các công cụ xây dựng SASS phổ biến nhất Nút SASS Gulp SASS gói web SASS IMO, sử dụng NPM và Node là cách dễ nhất để thiết lập trình biên dịch SASS Tóm tắt tùy chỉnh SASS…1- Đầu tiên, các giá trị tùy chỉnh của chúng tôi được đặt trong /* remove rounding from cards, buttons and inputs */96, sẽ ghi đè bất kỳ biến nào có giá trị /* remove rounding from cards, buttons and inputs */48 được đặt trong Bootstrap /* remove rounding from cards, buttons and inputs */662- Sau đó, Bootstrap được nhập ( <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css">40) cho phép trình biên dịch SASS tạo tất cả CSS thích hợp bằng cách sử dụng cả giá trị mặc định của Bootstrap và ghi đè tùy chỉnh3- Cuối cùng, Bất kỳ lớp tùy chỉnh bổ sung nào mà @extend Các lớp Bootstrap có thể được xác định sau <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css">40. Chúng được thêm vào CSS được tạo sau các lớp Bootstrap tùy chỉnh từ bước 2Nếu bạn không muốn làm việc trực tiếp với nguồn SASS và trình biên dịch, có sẵn các công cụ giúp quá trình tùy chỉnh SASS dễ dàng hơn. chủ đề. app là trình xây dựng chủ đề Bootstrap cung cấp giao diện người dùng dựa trên Web đơn giản để thực hiện các thay đổi và tạo /* remove rounding from cards, buttons and inputs */96 và /* remove rounding from cards, buttons and inputs */7 để tải xuốngBây giờ bạn đã sẵn sàng để đi. 🚀Tôi biết rằng việc tùy chỉnh rất quan trọng vì không phải ai cũng muốn giao diện Bootstrap quá dễ nhận biết đó. Sử dụng các phương pháp (CSS hoặc SASS) đã mô tả, khá dễ dàng để chuyển đổi các trang web Bootstrap 4 của bạn với giao diện độc đáo… Xem video. Cách tạo chủ đề Bootstrap 4 tùy chỉnh Chủ đề mã nguồn mở miễn phíCảm ơn bạn đã đọc hết câu chuyện. Tôi mời bạn khám phá những chủ đề này 😲 được tạo bằng phương pháp tùy chỉnh SASS được mô tả trước đó. Bạn có thể tải xuống các tệp CSS hoặc SASS đã sửa đổi cho từng chủ đề tại 🎩 Tophat hoặc tạo các chủ đề của riêng bạn và tùy chỉnh với Themestr. ứng dụng — trình tùy chỉnh và xây dựng chủ đề miễn phí cho Bootstrap 4 |
