Làm cách nào để thêm CSS tùy chỉnh vào Bootstrap?

Để có thể bảo trì, các tùy chỉnh CSS phải được đặt trong một tệp

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

2 riêng biệt để

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

3 không bị sửa đổi. Tham chiếu đến tập quán. css theo sau bootstrap. css để phần ghi đè hoạt động

Chỉ cần thêm bất kỳ thay đổi nào cần thiết trong CSS tùy chỉnh. 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 quy tắc CSS vào

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

2…

        /* 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…

Ghi chú. Không có nhu cầu 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 lớp khác

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 được đề xuất. 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àu khác (ví dụ:. màu đỏ). Bạn có thể tạo một ghi đè CSS đơn giản cho nút

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

5 như thế này

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

Điều này có tác dụng làm cho nút

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

5 có màu đỏ, nhưng nó không thay đổi các trạng thái btn-chính khác như ". di chuột" và ". tích cực". Nó cũng không thay đổi màu "chính" trong toàn bộ CSS cho

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

1,

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

2,

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

3,

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

4,

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

5, v.v.

2. Tùy chỉnh bằng SASS

Nếu bạn đã quen với SASS (và bạn nên sử dụng phương pháp này), bạn có thể tùy chỉnh Bootstrap với tùy chỉnh của riêng mình. scss. Có một phần trong tài liệu Bootstrap giải thích điều này, tuy nhiên tài liệu không giải thích cách sử dụng các biến hiện có trong tùy chỉnh của bạn. scss

Ghi đè và "tùy chỉnh" được xác định trong tùy chỉnh. scss (bạn có thể đặt tên cho nó là bất cứ thứ gì bạn muốn) tách biệt với các tệp nguồn Bootstrap SASS. Bằng cách này, bất kỳ thay đổi nào bạn thực hiện đều 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

1. Xem xét cấu trúc thư mục SASS của Bootstrap, bên cạnh tùy chỉnh của bạn. scss

________số 8

2. trong tùy chỉnh của bạn. scss, hãy nhập các tệp Bootstrap cần thiết để ghi đè. (Thông thường, đây chỉ là các biến. scss. Trong một số trường hợp, với các phần cắt phức tạp hơn, bạn cũng có thể cần các hàm, mixin và các tệp Bootstrap khác. ). Thực hiện các thay đổi, sau đó @import "bootstrap". Điều quan trọng là phải nhập Bootstrap sau khi thay đổi

Ví dụ: hãy thay đổi màu nền của cơ thể thành màu xám nhạt #eeeeee và thay đổi màu theo ngữ cảnh chính màu xanh lam thành biến $purple của Bootstrap

        /* custom.scss */    
        
        /* import the necessary Bootstrap files */
        @import "bootstrap/functions";
        @import "bootstrap/variables";
        
        /* -------begin customization-------- */   
        
        /* simply assign the value */ 
        $body-bg: #eeeeee;
        
        /* or, use an existing variable */
        $theme-colors: (
          primary: $purple
        );
        /* -------end customization-------- */  
        
        /* finally, import Bootstrap to set the changes! */
        @import "bootstrap";
                    

2a (tùy chọn). Ngoài ra, bạn có thể mở rộng các lớp Bootstrap hiện có sau

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

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

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

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

8, sau đó thêm màu nền và màu…

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

3

3. Xây dựng với SASS. Đầu ra CSS sẽ chứa các phần ghi đè tùy chỉnh. Đừng quên kiểm tra các đường dẫn bao gồm nếu @imports của bạn không thành công. Để biết danh sách đầy đủ các biến mà bạn có thể ghi đè, hãy xem tệp

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

9. Ngoài ra còn có các biến toàn cục này

Hãy nhớ rằng, với SASS, bạn phải @import “bootstrap” sau các tùy chỉnh trong

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

0 để chúng hoạt động. Sau khi SASS được biên dịch thành CSS (việc này được thực hiện bằng trình biên dịch/bộ xử lý SASS phía máy chủ), CSS kết quả là Bootstrap tùy chỉnh

Tóm lại, đây là cách hoạt động của các tùy chỉnh SASS

Đầu tiên, khi tệp

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

0 được xử lý bằng SASS, các giá trị

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

2 được xác định trong Bootstrap

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

9

Tiếp theo, các giá trị tùy chỉnh của chúng tôi được đặt, sẽ ghi đè bất kỳ biến nào có giá trị

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

2 được đặt trong Bootstrap

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

9

Cuối cùng, Bootstrap được nhập (_______26) cho phép bộ xử lý SASS (A. K. A. trình biên dịch) để tạo tất cả CSS thích hợp bằng cách sử dụng cả mặc định Bootstrap và ghi đè tùy chỉnh

Chúng tôi có thể thêm CSS tùy chỉnh trong Bootstrap không?

Làm cách nào để thêm kiểu tùy chỉnh vào Bootstrap?

Làm cách nào để thêm CSS bên ngoài vào Bootstrap?

Làm cách nào để ghi đè CSS tùy chỉnh lên Bootstrap?