Tùy chỉnh màu Bootstrap

Một số nhà phát triển và nhóm nhận thấy rằng mã được viết bằng Bootstrap dễ bảo trì hơn CSS thông thường, vì vậy họ thích Bootstrap hơn CSS gốc

Nhưng nếu mọi người đều sử dụng Bootstrap với các kiểu mặc định của nó, thì mọi trang web sẽ trông giống nhau – và nhanh chóng, internet sẽ trở nên khá nhạt nhẽo. May mắn thay, Bootstrap cũng có khả năng tùy biến cao

Cách tùy chỉnh Bootstrap

Nếu bạn là người mới bắt đầu, bạn có thể tùy chỉnh Bootstrap bằng biểu định kiểu CSS tùy chỉnh. Tính đặc hiệu của CSS rất quan trọng ở đây. Bạn viết CSS tùy chỉnh, với độ đặc hiệu tương tự hoặc cao hơn và liên kết tới nó trong phần đầu của chỉ mục của bạn. html sau dòng liên kết đến CSS Bootstrap gốc

Đối với các chỉnh sửa nhỏ, điều này là ổn. Nhưng đối với các dự án lớn hơn, điều này có thể tốn nhiều thời gian và có thể có nhiều khai báo kiểu dư thừa. Vì vậy, phải có một cách khác, sạch hơn,

Cách sử dụng Sass với Bootstrap

Giải pháp là sử dụng Sass – một CSS preprocessor. Sass được biên dịch thành CSS trước khi nó được sử dụng trên các trang web

Cho đến phiên bản Bootstrap 3. x, bạn có thể lựa chọn giữa các bộ tiền xử lý CSS. Ít hơn hoặc Sass. Nhưng kể từ phiên bản 4, Bootstrap chỉ sử dụng Sass. Mã nguồn của khung Bootstrap 4 và 5 được viết hoàn toàn bằng Sass, đây là minh chứng cho thấy Sass đã trưởng thành như thế nào

Bạn có thể đã nghe khẩu hiệu, "Sass là CSS có siêu năng lực". Nếu bạn muốn học Sass, trang web chính thức là một nguồn tuyệt vời. Bạn cũng có thể tham khảo các hướng dẫn khác trên freeCodeCamp, chẳng hạn như hướng dẫn này về cách sử dụng Sass với CSS hoặc khóa học video này về cách sử dụng Sass với Bootstrap 5

Sass đi kèm với hai cú pháp. Cái cũ hơn sử dụng thụt lề và cú pháp SCSS mới hơn (SCSS cho Sassy CSS) sử dụng dấu ngoặc nhọn giống như CSS

SCSS là siêu tập hợp của CSS. Vì vậy, mã CSS được lưu với một. phần mở rộng scss (hoặc SCSS xen kẽ với CSS) cũng là mã Sass hợp lệ

Trong hướng dẫn này, chúng ta sẽ sử dụng phiên bản SCSS. Dù phong cách là gì, Sass thụt lề hay SCSS giống như CSS, trình biên dịch Sass sẽ dịch mã nó thành vanilla CSS để sử dụng trên trình duyệt

Những gì chúng ta sẽ làm trong hướng dẫn này

1. Chúng tôi sẽ thay đổi màu chủ đề chính và phụ Bootstrap vận chuyển với
2. Chúng tôi cũng sẽ thay đổi các điểm ngắt phương tiện mặc định mà Bootstrap sử dụng

Khi chúng tôi có thể thực hiện những điều này, việc thực hiện các tùy chỉnh khác sẽ trở nên dễ dàng

điều kiện tiên quyết

1. Nút. js với npm hoặc sợi
2. Trình chỉnh sửa mã, tốt nhất là Mã VS
3. Hiểu biết cơ bản về Sass

Tải xuống Bootstrap từ trang web chính thức. https. //getbootstrap. com

Vì chúng tôi có Nút. js được cài đặt, tôi sẽ sử dụng phiên bản npm

npm i bootstrap

Chúng ta cũng cần cài đặt trình biên dịch Sass. Chúng tôi có thể lấy phiên bản phi tiêu chính thức từ trang web của họ. Cho dù bạn đang dùng Windows, Mac hay Linux, bạn chỉ cần tải xuống gói dart-sass, giải nén và thêm nó vào đường dẫn (biến môi trường)

Có một gói npm sass. Ngoài ra, còn có tiện ích mở rộng Live Sass Compiler VS Code với hơn 2 triệu lượt cài đặt. Vui lòng sử dụng bất kỳ trình biên dịch Sass nào mà bạn cảm thấy thoải mái

Ở đây, chúng ta sẽ sử dụng gói npm. ngổ ngáo

Sau khi tải xuống Bootstrap và trình biên dịch Sass, trong thư mục node-modules, có một thư mục tên là

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Ngoài ra còn có ba thư mục bên trong nó.

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Tất cả CSS đã biên dịch nằm trong

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Cách thay đổi màu chủ đề chính và phụ

Để tùy chỉnh, ý tưởng của chúng tôi là ghi đè lên. scss và biên dịch lại chúng

Tài liệu Bootstrap chính thức khuyên không nên thay đổi các tệp bootstrap cốt lõi bất cứ khi nào có thể. Vì vậy, chúng tôi sẽ tạo một tùy chỉnh. biểu định kiểu scss

Và chúng tôi sẽ nhập tất cả Bootstrap trong tùy chỉnh. tập tin scss

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Các biến có hậu tố là

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Vì vậy, chúng tôi đặt các biến trước chỉ thị @import để sau này, trình biên dịch sẽ đặt giá trị của chúng tôi thay vì giá trị mặc định

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Chúng tôi cũng cần một tệp HTML để xem trước kết quả

    
    
    
    
    

 

 

    



  

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum hic, quia maiores animi nobis eligendi est eos saepe architecto reiciendis! Aliquam inventore distinctio reprehenderit corporis amet assumenda officiis dolorem, animi delectus sunt dolor commodi. Adipisci nam nemo labore eligendi quas, rem ipsum iusto eveniet itaque vero necessitatibus! Quas, cupiditate tempora unde nam exercitationem libero aut labore deserunt nesciunt voluptate dignissimos quis porro reprehenderit maiores excepturi, esse, nisi dolores sit tenetur voluptatum corrupti alias provident pariatur? Quam illo unde autem, fugit numquam dolores, odio sed rem saepe exercitationem fuga, nisi soluta sunt officiis! Similique, vero repudiandae quae dignissimos fuga natus!
    

  

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, aliquid, cumque nisi tenetur similique labore repudiandae voluptas qui hic blanditiis beatae sapiente autem dolore! Quam, cupiditate nostrum laboriosam blanditiis vel ratione, repellat, incidunt modi tempore soluta ab nesciunt? Ab similique illum suscipit exercitationem et, aut quisquam neque atque recusandae rem delectus facilis. Magnam rerum fugit minus explicabo vel! Hic quibusdam laudantium dolorum, pariatur ipsam veritatis voluptate animi, nesciunt dolorem autem dicta. Debitis quae nam dicta autem ipsum mollitia! Ipsum ipsa, molestias fugiat officiis aut illum ullam architecto maxime labore vitae. Ipsum quos neque rerum, esse iste quo explicabo eos ipsa?
    
 




  Primary
  Secondary
  Success
  Danger
  Warning
  Info
  Light
  Dark
  Link


 

 
    

Chúng tôi chưa biên dịch Sass. Để xem các kiểu mặc định, hãy chạy Live Server

Nếu Live Server chưa được cài đặt, bạn có thể tải xuống tiện ích mở rộng miễn phí từ thị trường tiện ích mở rộng VS Code

Đây là những gì chúng ta thấy

Đã đến lúc biên dịch tệp Sass tùy chỉnh của chúng tôi

Cú pháp biên dịch đơn giản. Chỉ định các thư mục nguồn và đích được phân tách bằng dấu hai chấm

tôi có tùy chỉnh của tôi. scss trong một thư mục có tên là

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Sau khi biên dịch lại ta có bootstrap tùy biến trong file

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Thay vì tệp bootstrap mặc định, chúng tôi sẽ sử dụng biểu định kiểu bootstrap tùy chỉnh này

 `

Sau đó chạy lại Live Server

Chúng tôi nhận được trang web tùy chỉnh với phong cách mới của chúng tôi

Cách thay đổi điểm ngắt lưới

Bây giờ chúng ta sẽ tùy chỉnh các điểm ngắt phương tiện. Bên cạnh đó, chúng ta cũng phải xác định lại container-max-widths

Cách dễ nhất là chỉ cần ghi đè lên các biến

$primary: teal;
$secondary:green;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px,
  xxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px,
  xxl: 1520px
);

@import '../node_modules/bootstrap/scss/bootstrap'

Vì điều này sẽ vi phạm nguyên tắc DRY (Don't Repeat Yourself), sử dụng hàm

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Chúng tôi phải nhập chức năng đầu tiên trong tùy chỉnh. scss để cung cấp

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Chúng tôi cũng phải nhập các biến vì $grid-breakpoints (được sử dụng bên trong hàm) được xác định ở đó

//custom.scss

$primary: teal;
$secondary: green;

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

Đây là mã

//custom.scss

$primary: teal;
$secondary: green;

//We have to import the functions first to use map.merge()

@import '../node_modules/bootstrap/scss/functions';

// We have to import the variables beforehand to 
//use the variable $grid-breakpoints.
// Otherwise, compiler will show error - '$grid-breakpoints 
//undefined.'

@import '../node_modules/bootstrap/scss/variables';

$new-breakpoints: (
    xl: 1280px,
    xxl:1600px
);

$grid-breakpoints: map-merge($grid-breakpoints, $new-breakpoints);

$new-container-max-widths: (
  xl: 1220px,
  xxl:1520px
);

$container-max-widths: map-merge($container-max-widths, $new-container-max-widths);

@import "../node_modules/bootstrap/scss/bootstrap";

Chúng tôi biên dịch lại và sử dụng tệp mới nhất thay cho tệp cũ hơn

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

đây là kết quả cuối cùng

Nó không chỉ là màu sắc chủ đề và điểm ngắt phương tiện. Đường viền, khoảng cách, bóng hộp, phông chữ, biểu tượng. bạn có thể tùy chỉnh mọi thứ

Tôi đã đưa tất cả các mã trên vào repo GitHub này

Để khám phá thêm, tài liệu Bootstrap chính thức là một tài nguyên tuyệt vời về vấn đề này

Phần kết luận

Trong hướng dẫn này, tôi đã chỉ cho bạn cách chúng ta có thể sử dụng Sass để tùy chỉnh Bootstrap

Ngay cả khi chúng tôi đang ở trong một dự án sử dụng React với Bootstrap, thì ý tưởng vẫn giống nhau. Tạo tùy chỉnh. scss, thực hiện tùy chỉnh, nhập bootstrap, biên dịch lại, sau đó liên kết với tệp tùy chỉnh thay cho tệp bootstrap gốc

học tập vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Vinod Mathew Sebastian

Tôi là một lập trình viên máy tính tự học, người đóng góp cho nguồn mở

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Bạn có thể tùy chỉnh màu Bootstrap không?

Làm cách nào để đặt màu nền tùy chỉnh trong Bootstrap?

Làm cách nào để tùy chỉnh chủ đề Bootstrap?

Làm cách nào để thay đổi màu của các biểu tượng trong Bootstrap?