Hướng dẫn how do i override bootstrap css? - làm cách nào để ghi đè bootstrap css?

Với Bootstrap CSS, bạn có thể phát triển một trang web đáp ứng nhanh hơn và dễ dàng hơn so với việc xây dựng một trang web từ CSS đơn giản. Điều đó bởi vì bộ công cụ nguồn mở này cung cấp các mẫu và thành phần được thiết kế sẵn để bạn có thể tạo bố cục với các yếu tố thiết kế quan trọng như các nút, bảng và biểu mẫu bootstrap mà không phải xây dựng chúng từ đầu.

Tuy nhiên, quá trình này đơn giản như sao chép và dán các đoạn mã có thể tái sử dụng này. Bạn sẽ muốn tùy chỉnh các mẫu và thành phần Bootstrap để đảm bảo trang web của bạn phản ánh thương hiệu độc đáo của bạn.

Ví dụ: bạn có thể muốn thêm một màu tùy chỉnh thay vì sử dụng 10 lớp tiện ích màu mà Bootstrap cung cấp. Hoặc bạn có thể muốn thay đổi các điểm dừng của bố cục lưới bootstrap. Hoặc bạn có thể muốn thêm các lớp tùy chỉnh như lớp .btn-custom để tạo các nút hoàn toàn độc đáo.

Trong bài đăng này, chúng tôi sẽ đi qua cách tùy chỉnh CSS Bootstrap - và cách không. Cụ thể hơn, chúng tôi sẽ chỉ cho bạn cách tùy chỉnh các nút bootstrap, màu sắc, navbars và băng chuyền. Nhấp vào bất kỳ liên kết nhảy nào bên dưới để bỏ qua phần đó.

• Cách ghi đè Bootstrap bằng CSS
  • Cách tùy chỉnh các nút Bootstrap
• Cách ghi đè Bootstrap bằng Sasshow để tùy chỉnh màu Bootstrap bằng các biến SASS
  
  • How to Customize Bootstrap Colors using Sass variables
  • Cách tùy chỉnh màu bootstrap bằng bản đồ SASS
• Cách tùy chỉnh Bootstrap Navbar
• Cách tùy chỉnh băng chuyền bootstrap

Bạn có thể chỉnh sửa trực tiếp các tệp lõi Bootstrap, để thực hiện các thay đổi cho trang web của bạn - nhưng nó không được khuyến nghị.

Việc thực hiện các thay đổi trực tiếp đối với bảng kiểu bootstrap mặc định sẽ nhanh chóng trở nên khó khăn để duy trì. Không chỉ khó theo dõi những thay đổi bạn đã thực hiện, mà còn tạo nên nâng cấp lên phiên bản mới hơn của Bootstrap đau đớn hơn rất nhiều. Khi nâng cấp, bạn sẽ phải thay thế các tệp cốt lõi, vì vậy tất cả các tùy chỉnh của bạn sẽ bị mất.

Tin tốt là có một cách để thực hiện các thay đổi mà không cần chỉnh sửa mã nguồn bootstrap. Hãy cùng xem xét kỹ hơn về quá trình này dưới đây.

Bạn có thể ghi đè Bootstrap CSS không?

Nếu bạn muốn tùy chỉnh trang web bootstrap của mình, hãy để lại mã nguồn và chỉ cần thêm mã tùy chỉnh theo bảng kiểu bên ngoài. Mã trong biểu định kiểu bên ngoài này sẽ ghi đè các kiểu hiện có, miễn là nó được thiết lập đúng. Quá trình thiết lập này khác nhau một chút tùy thuộc vào cách bạn tải Bootstrap trên trang web của mình.

Có một vài cách khác nhau để bắt đầu với Bootstrap. Bạn có thể sử dụng bootstrapcdn để cung cấp phiên bản CSS và JS được lưu trữ trong bộ nhớ cachtrap cho dự án của mình hoặc bạn có thể tải xuống phiên bản mã nguồn hoặc nguồn được biên dịch trước của Bootstrap.

Dưới đây, chúng tôi sẽ đi qua quy trình để tùy chỉnh từng phiên bản bootstrap này.

Cách ghi đè Bootstrap CSS

Bạn có thể ghi đè các kiểu mặc định của các thành phần bootstrap bằng hai phương thức có thể. Theo cách đầu tiên-sử dụng CSS ghi đè lên áp dụng cho các trang web sử dụng bootstrapcdn hoặc các phiên bản được biên dịch sẵn của Bootstrap. Thứ hai - sử dụng các biến SASS - áp dụng cho các trang web bằng phiên bản mã nguồn của Bootstrap.

Mỗi phương pháp là lý tưởng cho các trường hợp sử dụng khác nhau. Mặc dù sử dụng ghi đè CSS đơn giản hơn, nhưng nó cũng tốn nhiều thời gian hơn và khó khăn để mở rộng quy mô. Mặt khác, sử dụng các biến SASS là lý tưởng để thực hiện các thay đổi rộng rãi hơn trên trang web của bạn - nhưng nó được thiết kế cho người dùng nâng cao hơn. Hãy cùng xem xét kỹ hơn cả hai cách tiếp cận bên dưới

Cách ghi đè Bootstrap bằng CSS ghi đè

Cho dù bạn sử dụng bootstrapcdn hoặc phiên bản được biên dịch sẵn, bạn sẽ bắt đầu với một HTML5 DocType cơ bản trông giống như thế này:

 

    
        
        
        
    
    
        
Hello, world!

    

Đây sẽ là tệp index.html của bạn. Bước tiếp theo là tải Bootstrap lên trang web của bạn.

Nếu bạn đang đi với bootstrapcdn, thì không cần phải tải xuống bất kỳ tệp nào. Chỉ cần thêm dòng mã sau vào phần của tệp index.html của bạn:

Điều này sẽ tải Bootstrap CSS trên trang web của bạn. Lưu ý rằng nếu bạn muốn tải JavaScript Bootstrap, thì bạn sẽ phải thêm một số mã vào phần. Vì điều đó không cần thiết cho phương thức ghi đè này, chúng tôi sẽ bỏ qua bước này.

Nếu bạn đang đi với phiên bản biên dịch của Bootstrap, thì bạn sẽ phải tải xuống các tệp CSS đã biên dịch và lưu chúng trong cùng thư mục với tệp index.html của bạn. Sau đó thêm dòng mã sau vào phần của tệp index.html của bạn:

Khi bạn đã hoàn thành bước này, bạn sẽ liên kết thành công với bảng kiểu mặc định của Bootstrap. Bây giờ, thời gian để tạo bảng kiểu của riêng bạn.

Để làm như vậy, chỉ cần tạo một tệp khác trong cùng một thư mục với tệp index.html của bạn. Bạn có thể gọi tệp này là Custom Custom.css "vì đây là nơi bạn sẽ đặt CSS tùy chỉnh của mình.

Nhưng trước khi bạn bắt đầu thêm vào tệp này, hãy quay lại tệp index.html của bạn và thêm dòng mã sau trong liên kết đến bảng kiểu mặc định.

Tham chiếu đến Custom.css phải đến sau khi bootstrap.css cho phương thức tùy chỉnh ghi đè CSS này hoạt động. Tại sao? Bởi vì quy tắc của tính đặc hiệu CSS. Nếu các phần tử HTML được nhắm mục tiêu bởi nhiều bộ chọn CSS có cùng độ đặc hiệu, thì phần cuối cùng sẽ ghi đè lên các bộ khác và chỉ các thuộc tính kiểu của nó sẽ được áp dụng. Bằng cách liên kết với bảng kiểu tùy chỉnh của bạn sau bảng kiểu mặc định, bạn cung cấp cho nó một mức độ đặc biệt cao hơn.

Với việc bổ sung này, đây là những gì mà tệp index.html của bạn sẽ trông giống như nếu bạn sử dụng bootstrapcdn.

 





    
        
        
        
        
        
    
    
        
Hello, world!

    

Và đây là những gì mà tệp index.html của bạn sẽ trông giống như nếu bạn sử dụng bootstrap được biên dịch sẵn.

 


    
        
        
        
        
        
    
    
        
Hello, world!

    

Bây giờ bạn có thể thêm bất kỳ thay đổi cần thiết nào vào tệp Custom.css của bạn.

Cách tùy chỉnh các nút Bootstrap bằng cách sử dụng ghi đè CSS

Hãy nói rằng bạn muốn làm cho kích thước phông chữ của văn bản nút lớn hơn trên trang web của bạn. Trong Bootstrap, kích thước phông chữ mặc định cho lớp .btn là 16px, như được hiển thị bên dưới.

Bạn có thể thay đổi nó thành, giả sử, 20px bằng cách sử dụng thuộc tính kích thước phông chữ CSS trong bảng kiểu của bạn. Sử dụng bộ chọn lớp, bạn có thể thay đổi kích thước phông chữ của tất cả các phần tử trong lớp .BTN thành 20px bằng mã sau.

 
.btn { font-size: 20px }

Đây là kết quả:

Theo quy trình tương tự, bạn có thể thực hiện càng nhiều thay đổi cần thiết để chuyển đổi trang web Bootstrap của bạn. Chỉ cần đảm bảo sử dụng các bộ chọn CSS cụ thể như - hoặc cụ thể hơn - các bộ chọn trong tệp bootstrap.css.

Khi bạn đã thực hiện thực hiện các thay đổi, hãy lưu tệp Custom.css. Bất cứ lúc nào, bạn có thể chỉnh sửa hoặc xóa bất kỳ CSS tùy chỉnh nào của mình để hoàn nguyên với các kiểu mặc định của Bootstrap, hoặc thiết kế lại trang web của bạn. Bạn cũng có thể dễ dàng chuyển sang phiên bản khác của Bootstrap (miễn là nó là một bản phát hành nhỏ, như 4.4) bằng cách thay thế tham chiếu đến bảng kiểu trước đó trong tệp index.html của bạn.

Bây giờ chúng tôi đã hiểu tùy chọn tùy chỉnh này và các lợi ích của nó, hãy để xem xét tùy chọn tùy chỉnh khác áp dụng cho chủ sở hữu trang web bằng phiên bản mã nguồn của Bootstrap.

Cách ghi đè Bootstrap bằng SASS

Tải xuống phiên bản mã nguồn của Bootstrap là phương pháp khó nhất để tải Bootstrap trên trang web của bạn vì nó yêu cầu các công cụ bổ sung để thiết lập các tệp nguồn, như các phiên bản chính thức của Bootstrap. Đó là vì bản phát hành chính mới nhất của Bootstrap - Bootstrap 5 - được viết bằng SASS, ngôn ngữ mở rộng CSS phải được biên dịch cho các trình duyệt để hiểu và hiển thị chính xác.

Bạn sẽ cần một trình biên dịch SASS và Autoprefixer để làm điều này. Nhưng, một khi bạn đầu tư thời gian vào việc thiết lập phiên bản Bootstrap này, bạn sẽ có quyền kiểm soát hoàn toàn mã và mã Bootstrap. Đó là lý do tại sao phương pháp này hấp dẫn người dùng nâng cao hơn.

Hãy nói rằng bạn chọn tải xuống mã nguồn bootstrap bằng cách sử dụng trình quản lý gói như NPM, sau đó bạn sẽ giải nén thư mục và xem cấu trúc sau.

your-project/

└ok ─ SCSS

& Nbsp; & nbsp; & nbsp; & nbsp; └─ ─ Custom.scss

└── node_modules/

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Bootstrap

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; └ok ─ js

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; └ok ─ SCSS

Lưu ý rằng thư mục được dán nhãn là Custom Custom.SCSS - sẽ đóng vai trò là biểu định kiểu của riêng bạn - tách biệt với thư mục Bootstrap/SCSS - là biểu định kiểu mặc định. Điều quan trọng cần lưu ý là nếu bạn không sử dụng trình quản lý gói, bạn sẽ chỉ muốn thiết lập thủ công một cấu trúc tệp tương tự để giữ các tệp nguồn Bootstrap tựa tách biệt với chính bạn.

Cũng như phương thức tùy chỉnh khác, bạn vẫn tránh sửa đổi các tệp lõi Bootstrap. Điều khác biệt đối với SASS là trong bảng kiểu của riêng bạn, bạn sẽ nhập các tệp SASS Bootstrap để bạn có thể sửa đổi chúng.

Chuyển đến tệp Custom.SCSS của bạn. Bạn có thể nhập tất cả SAS nguồn Bootstrap từ bao gồm dòng mã sau.

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

Hoặc, bạn chỉ có thể chọn và chọn các tệp bạn cần. Mã sau nhập các tệp cần thiết để tùy chỉnh.

 
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

Mã dưới đây là để nhập các tập tin tùy chọn. Bạn luôn có thể thêm mã này hoặc mã khác sau khi bạn bắt đầu tùy chỉnh.

 
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Khi điều này được thiết lập, bạn có thể bắt đầu thay đổi. Ở đó, không cần phải thêm một tham chiếu đến bảng kiểu trong tệp index.html của bạn, vì vậy bạn sẽ ở trong tệp Custom.scss của mình.

Thay vì thêm CSS tùy chỉnh như trong phương thức khác, bạn sẽ sửa đổi bất kỳ trong số 500 biến SASS và bản đồ trong bootstrap. Danh sách đầy đủ có thể được tìm thấy trong tệp SCSS/_variables.scss của bạn, nhưng hãy để tập trung vào hai ví dụ cụ thể được sử dụng trong tài liệu Bootstrap. Mỗi ví dụ trình bày cách tùy chỉnh màu bootstrap bằng cách sử dụng các biến SAS hoặc bản đồ.

Cách tùy chỉnh màu bootstrap bằng các biến SASS

Theo mặc định, các biến SASS cho phần tử trong Bootstrap là:

0

Điều này có nghĩa là màu nền có màu trắng và màu xám. Hãy nói rằng bạn muốn thay đổi những màu này.

Xem làm thế nào cả hai biến có một cờ mặc định? Điều đó cho phép bạn ghi đè giá trị mặc định của biến trong SAS của riêng bạn mà không cần sửa đổi mã nguồn Bootstrap. Bạn chỉ cần sao chép và dán các biến trong tệp Custom.SCSS của bạn, thay đổi giá trị của chúng và xóa cờ mặc định!

Vì vậy, nếu tôi muốn thay đổi màu nền và màu của phần tử thành màu đen và màu xám đậm, tôi sẽ thêm phần sau vào tệp Custom.SCSS của mình.

1

Để thực hiện thành công việc ghi đè này trên các tệp SASS, tôi phải hoàn tất việc nhập các tệp SASS Bootstrap, bằng cách thêm mã sau sau các biến:

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

Điều này tương tự như cách bạn phải bao gồm cả hai tài liệu tham khảo đến các bảng kiểu của bạn trong tệp index.html của bạn trong phương thức trước.

Đặt tất cả các điều này lại với nhau, ở đây, những gì mà tệp Custom.scss của bạn sẽ trông giống như nếu bạn nhập tất cả các tệp bootstrap:

3

Cách tùy chỉnh màu bootstrap bằng bản đồ SASS

Bootstrap cũng bao gồm các bản đồ SASS, là các nhóm biến SASS liên quan đến cơ bản. Ví dụ, có các bản đồ SASS cho màu sắc và điểm dừng lưới trong bootstrap. Giống như các biến SASS, các bản đồ SASS bao gồm cờ mặc định để chúng có thể bị ghi đè mà không cần sửa đổi mã nguồn Bootstrap.

Ví dụ: bản đồ SASS cho màu sắc trong bootstrap là:

4

Với bản đồ SASS, bạn có hai tùy chọn - bạn có thể sửa đổi bản đồ hoặc bạn có thể thêm vào nó.

Hãy nói rằng bạn muốn thay đổi một màu hiện có trong bản đồ màu chủ đề $. Bạn chỉ cần sao chép và dán khóa bản đồ và chỉ bao gồm các biến bạn muốn thay đổi trong tệp Custom.scss của bạn. Sau đó, thay đổi giá trị của chúng và xóa cờ mặc định.

Vì vậy, nếu bạn muốn thay đổi màu chính thành Cyan-Blue, bạn sẽ thêm phần sau vào tệp SASS tùy chỉnh của mình:

5

Điều này sẽ thay đổi màu chủ đề chính trên các CSS, vì vậy.

Và nếu bạn muốn thêm một màu mới vào bản đồ màu chủ đề $, thì bạn sẽ thêm một khóa mới, sử dụng biến tùy chỉnh màu, và gán cho nó một giá trị. Sau đây sẽ thêm màu đỏ đỏ thẫm vào bản đồ.

6

Bây giờ chúng tôi đã hiểu hai tùy chọn tùy chỉnh khác nhau mà người dùng Bootstrap có, hãy xem cách tùy chỉnh một chiếc Bootstrap Navbar và băng chuyền bằng CSS hoặc SASS. Bằng cách đó, bạn có thể tùy chỉnh các yếu tố này cho dù bạn đang sử dụng phiên bản Bootstrap nào.

Cách tùy chỉnh Bootstrap Navbar

Hãy nói rằng tôi tạo ra một thanh Navstrap tiêu chuẩn với các liên kết đến trang chủ, trang tính năng và trang giá làm sụp đổ nội dung của nó đằng sau nút hamburger ở điểm dừng nhỏ (576px). Ở đây, nó trông như thế nào khi mở rộng.

Bây giờ, hãy để Lôi nhìn vào cách tùy chỉnh nó bằng cách sử dụng các biến CSS hoặc các biến SASS.

Sử dụng CSS

Hãy nói rằng tôi muốn thay đổi thương hiệu Navbar, thường chỉ định một công ty, sản phẩm hoặc tên dự án. Theo mặc định, thương hiệu Navbar có màu phông chữ màu đen và kích thước phông chữ 20px.

Bạn có thể thay đổi nó thành một màu tím và 24px bằng cách sử dụng các thuộc tính màu CSS và kích thước phông chữ trong bảng kiểu của bạn tương ứng. Bạn sẽ sử dụng hai bộ chọn lớp: Tên lớp của phần tử NAV và phần tử neo là thương hiệu Navbar. Dưới đây là mã.

7

Đây là kết quả:

Lưu ý: Trong HTML, tôi cũng đã thay thế các thẻ điều hướng ở giữa các thẻ bằng tên của My MyPany.

Thách thức của việc sử dụng ghi đè CSS là bạn phải hiểu tính đặc hiệu của CSS và biết các bộ chọn nào được sử dụng trong bảng kiểu bootstrap mặc định (bootstrap.css) để bạn có thể sử dụng các bộ cụ thể hơn.

Và, ngay cả khi bạn có thể làm điều đó, bạn vẫn giới hạn trong các tùy chọn tùy chỉnh của mình. Sử dụng CSS Ghi đè tạo ra các thay đổi một lần đối với các yếu tố hoặc nhóm phần tử riêng lẻ. Và nó không thay đổi sự xuất hiện của các yếu tố trong các trạng thái giả như ": Hover", ": Active" và Muff khuyết tật.

Nếu bạn muốn thực hiện các thay đổi rộng rãi hơn đối với bảng kiểu của mình, thì bạn sẽ cần sử dụng SASS. & nbsp;

Sử dụng Sass

Hãy nói rằng tôi muốn thay đổi màu phông chữ của các vật phẩm Navbar và sử dụng một màu khác khi chúng hoạt động và khi người dùng di chuyển trên chúng. Dưới đây là các biến SASS mặc định cho phần tử Navbar-light trong Bootstrap:

8

Điều đó có nghĩa là theo mặc định, màu phông chữ của các mục trong một chiếc Navbar ánh sáng là & nbsp; màu đen. Hãy để thay đổi những màu sắc này.

Hãy nhớ rằng cờ mặc định có nghĩa là bạn có thể ghi đè giá trị mặc định của biến trong SAS của riêng bạn mà không cần sửa đổi mã nguồn Bootstrap. Chỉ cần sao chép và dán các biến trong tệp Custom.SCSS của bạn, thay đổi giá trị của chúng và xóa cờ mặc định.

Vì vậy, nếu tôi muốn thay đổi màu sắc của các mục Navbar thành tương đương với biến SASS $ GRAY-900, tôi sẽ sử dụng mã HEX #212529. Và nếu tôi muốn thay đổi màu của các mục Navbar khi hoạt động hoặc khi người dùng di chuột qua biến SASS $ Indigo, thì tôi đã sử dụng mã HEX #6610F2. Tại đây, tổng số mã tôi đã thêm vào tệp Custom.SCSS của tôi.

9

Đây là kết quả:

Cách tùy chỉnh băng chuyền bootstrap

Hãy nói rằng tôi tạo ra một băng chuyền bootstrap tiêu chuẩn với hình ảnh của chó con. Ở đây, nó trông như thế nào.

Bây giờ, hãy để Lôi nhìn vào cách tùy chỉnh nó bằng cách sử dụng các biến CSS hoặc biến SASS hoặc bản đồ.

Sử dụng CSS

Hãy nói rằng tôi muốn thay đổi chiều cao của hình ảnh trong thanh trượt băng chuyền. Tôi có thể làm như vậy bằng cách sử dụng bộ chọn loại IMG. Dưới đây là mã.

0

Đây là kết quả:

Cách tùy chỉnh băng chuyền bootstrap

Hãy nói rằng tôi tạo ra một băng chuyền bootstrap tiêu chuẩn với hình ảnh của chó con. Ở đây, nó trông như thế nào.

1

Bây giờ, hãy để Lôi nhìn vào cách tùy chỉnh nó bằng cách sử dụng các biến CSS hoặc biến SASS hoặc bản đồ.

Sử dụng CSS

2

Đây là kết quả:

Hãy nói rằng tôi muốn thay đổi chiều cao của hình ảnh trong thanh trượt băng chuyền. Tôi có thể làm như vậy bằng cách sử dụng bộ chọn loại IMG. Dưới đây là mã.

Sử dụng Sass

Hãy nói rằng tôi muốn thay đổi phong cách của ba chỉ số ở phía dưới. Dưới đây là các biến SAS mặc định cho chiều rộng và chiều cao của các chỉ báo băng chuyền:

Chúng ta có thể ghi đè Bootstrap CSS không?

Tại sao CSS của tôi không hoạt động trong bootstrap?

Quy tắc CSS là gì?