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

Cách tùy chỉnh màu Bootstrap

• Loại. hướng dẫn
• Được viết bởi. Jacob Lett
•  

Tải xuống Hướng dẫn tiếp thị MIỄN PHÍ

---

Chia sẻ cái này

Được viết bởi. Jake Lett
Tôi chia sẻ các mẹo tiếp thị kỹ thuật số và hướng dẫn HubSpot để giúp các nhà tiếp thị và chủ doanh nghiệp phát triển doanh nghiệp của họ

• Theo dõi danh sách email của tôi
• Đăng ký kênh YouTube
• Xem sách của tôi trên Amazon
• Email Jake Lett

Chủ đề

Tiếp thị kỹ thuật số B2B

Thẻ. CSS Bootstrap

Được xuất bản lần đầu vào ngày 11 tháng 11 năm 2016, cập nhật vào ngày 23 tháng 7 năm 2022

Bạn muốn nhận thông tin cập nhật qua email về các bài viết mới?

Tham gia Bản tin Email của tôi

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

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 */
.card, .btn, .form-control { border-radius: 0; }

7 riêng biệt để tệp

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

8 không bị sửa đổi. Tham chiếu đến

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

7 theo sau_______0_______8 làm cho phần ghi đè hoạt động

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 */
.card, .btn, .form-control { border-radius: 0; }

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ẫu

Tôi thêm một quy tắc CSS vào

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

7…

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

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ản

Tính đặc hiệu của CSS là quan trọng

Khi 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_______0_______7 cần sử dụng các bộ chọn cụ thể như

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

8. Ví dụ: đây là CSS cho Bootstrap 4

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

5 được hiển thị trên Thanh điều hướng có nền tối (

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

6)

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

Để ghi đè màu

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

5, điều này sẽ không hoạt động ❌

.navbar-dark .nav-link {
  color: silver;
}

Bộ chọn của tôi trong

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

7 phải khớp với bộ chọn Bootstrap ✅

.navbar-dark .navbar-nav .nav-link {
  color: silver;
}

Tấ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 màu của

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

5 thành một Thanh điều hướng với

.navbar-dark .nav-link {
  color: silver;
}

0…✅

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

Ghi chú. Không cần sử dụng `. quan trọng` trong CSS tùy chỉnh, trừ khi bạn đang ghi đè một trong các lớp Tiện ích Bootstrap. Tính đặc hiệu của CSS luôn hoạt động đối với một lớp CSS để ghi đè lên một lớp khác

Bằng cách đặt tất cả các ghi đè Bootstrap vào một ____0_______7 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 */
.card, .btn, .form-control { border-radius: 0; }

8 mặc định, việc duy trì và theo dõi các thay đổi sẽ trở nên rất khó khăn

Bấ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 */
.card, .btn, .form-control { border-radius: 0; }

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 */
.card, .btn, .form-control { border-radius: 0; }

7

Sử 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 thành 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

.navbar-dark .nav-link {
  color: silver;
}

5 như thế này

.btn-primary { background-color: red; }

Vâng, cách này có tác dụng làm cho nút

.navbar-dark .nav-link {
  color: silver;
}

5 có màu đỏ. Tuy nhiên, nó không thay đổi các trạng thái

.navbar-dark .nav-link {
  color: silver;
}

7 khác 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

.navbar-dark .nav-link {
  color: silver;
}

8,

.navbar-dark .nav-link {
  color: silver;
}

9,

.navbar-dark .navbar-nav .nav-link {
  color: silver;
}

0,

.navbar-dark .navbar-nav .nav-link {
  color: silver;
}

1,

.navbar-dark .navbar-nav .nav-link {
  color: silver;
}

2, 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

• SASS là ngôn ngữ biểu định kiểu và bộ xử lý trước CSS
• SASS phải được biên dịch thành CSS để trình duyệt Web “hiểu”
• Các tệp được viết bằng SASS thường có phần mở rộng

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  3
• Toàn bộ được viết bằng SASS

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…

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

Những điều bạn cần biết về tệp nguồn Bootstrap SASS

• Tệp

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  4 là tệp “chính” tham chiếu tất cả các tệp nguồn SCSS khác bằng cách sử dụng các câu lệnh SASS

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  5
• Tệp

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  6 chứa tất cả các biến SASS có sẵn để tùy chỉnh và ghi đè
• Tệp

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  6 chứa các biến phụ thuộc vào tệp

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  8 và tệp

  .navbar-dark .navbar-nav .nav-link {
    color: silver;
  }

  9
• Bootstrap CSS có thể được biên dịch có hoặc không có Lưới (

  #navbar1 .navbar-nav .nav-link {
    color: silver;
  }

  0) và Khởi động lại (

  #navbar1 .navbar-nav .nav-link {
    color: silver;
  }

  1)

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 đồ

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

2 SASS…

$theme-colors: (
  "primary":    ..,
  "secondary":  ..,
  "success":    ..,
  "info":       ..,
  "warning":    ..,
  "danger":     ..,
  "light":      ..,
  "dark":       ..
);

Cho phép-…

Các biến đúng/sai tự giải thích này có thể được chuyển đổi theo ý muốn…

$enable-rounded: true;
$enable-shadows: true;
$enable-gradients: false;
$enable-grid-classes: true;
$enable-print-styles: true;

Điểm dừng lưới

Điểm dừng phản hồi mặc định dựa trên độ rộng thiết bị điển hình và có thể thay đổi khi cần. Thay đổi bản đồ

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

3 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.

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

4)…

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

0

Khoả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ụ:.

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

5) sẽ thêm nhiều khoảng trắng hơn giữa một số phần tử

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

1

Vì , các tùy chỉnh của bạn phải được lưu giữ trong một tệp

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 riêng nằm bên ngoài các tệp nguồn Bootstrap SASS. Đảm bảo giữ

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

7 ở gần để tham khảo khi tạo

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 của bạn

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

2

Tươ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

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 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

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6

2. 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

.navbar-dark .nav-link {
  color: silver;
}

7. Thay vì chỉ thay đổi

.navbar-dark .nav-link {
  color: silver;
}

7, chúng tôi muốn thay đổi màu chủ đề của

.btn-primary { background-color: red; }

3 trên toàn bộ CSS. Đây là cách điều này sẽ được thực hiện trong

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

3

Lưu ý. Các đường dẫn Bootstrap

.btn-primary { background-color: red; }

5 có liên quan đến

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 và sẽ thay đổi tùy thuộc vào môi trường dự án của bạn

Như bạn có thể thấy trong

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6, chúng tôi @import các tệp Bootstrap cần thiết cho việc ghi đè. (Thông thường, đây chỉ là _

.btn-primary { background-color: red; }

8. 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

.btn-primary { background-color: red; }

9 và

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

0). Thực hiện các thay đổi, sau đó

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

1. Điều quan trọng là thực hiện các thay đổi trước ngày

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

2. Đây là một ví dụ khác

Thêm màu chủ đề mới (btn-purple, bg-purple, text-purple, v.v. )…

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

4

Thay đổi các điểm ngắt bố cục lưới…

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

5

Mở 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à một lớp

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

3 mới mở rộng (kế thừa từ) lớp Bootstrap

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

4, 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

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

5

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

6

Sau khi

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 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

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6, sẽ ghi đè bất kỳ biến nào có giá trị

|-- \bootstrap 
| |-- \scss
| | |-- \mixins 
| | |-- \utilities 
| | |-- _functions.scss
| | |-- _mixins.scss
| | |-- _variables.scss 
| | |-- (...more bootstrap scss source files)
| | |-- bootstrap-grid.scss
| | |-- bootstrap-reboot.scss
| | |-- bootstrap.scss

8 được đặt trong Bootstrap

.navbar-dark .navbar-nav .nav-link {
  color: silver;
}

6

2- Sau đó, Bootstrap được nhập (

$theme-colors: (
  "primary":    ..,
  "secondary":  ..,
  "success":    ..,
  "info":       ..,
  "warning":    ..,
  "danger":     ..,
  "light":      ..,
  "dark":       ..
);

0) 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ỉnh

3- Cuối cùng, Bất kỳ lớp tùy chỉnh bổ sung nào @extend Các lớp Bootstrap đều có thể được xác định sau

$theme-colors: (
  "primary":    ..,
  "secondary":  ..,
  "success":    ..,
  "info":       ..,
  "warning":    ..,
  "danger":     ..,
  "light":      ..,
  "dark":       ..
);

0. Chúng được thêm vào CSS được tạo sau các lớp Bootstrap tùy chỉnh từ bước 2

Nế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

#navbar1 .navbar-nav .nav-link {
  color: silver;
}

6 và

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

7 để tải xuống

Bâ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…

Một chủ đề Bootstrap tùy chỉnh từ Tophat

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

Có thể tùy chỉnh Bootstrap không?

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

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