Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

Tùy chỉnh

Tìm hiểu cách tạo chủ đề, tùy chỉnh và mở rộng Bootstrap với Sass, một lượng lớn các tùy chọn toàn cầu, một hệ thống màu mở rộng và hơn thế nữa.

Sass Sử dụng các tệp Sass nguồn của chúng tôi để tận dụng các biến, bản đồ, mixin và các hàm.
Tùy chọn Tùy chỉnh Bootstrap với các biến tích hợp để dễ dàng chuyển đổi các tùy chọn CSS toàn cầu.
Màu sắc Tìm hiểu về và tùy chỉnh các hệ thống màu hỗ trợ toàn bộ bộ công cụ.
Các thành phần Tìm hiểu cách chúng tôi xây dựng gần như tất cả các thành phần của mình một cách đáp ứng và với các lớp cơ sở và bổ trợ.
Các biến CSS Sử dụng các thuộc tính tùy chỉnh CSS của Bootstrap để thiết kế và phát triển nhanh chóng và tương lai.
Tối ưu hóa Giữ cho các dự án của bạn gọn gàng, nhanh nhạy và có thể bảo trì để bạn có thể mang lại trải nghiệm tốt nhất.

Tổng quan

Có nhiều cách để tùy chỉnh Bootstrap. Con đường tốt nhất của bạn có thể phụ thuộc vào dự án của bạn, mức độ phức tạp của các công cụ xây dựng của bạn, phiên bản Bootstrap bạn đang sử dụng, hỗ trợ trình duyệt, v.v.

Hai phương pháp ưa thích của chúng tôi là:

  1. Sử dụng Bootstrap thông qua trình quản lý gói để bạn có thể sử dụng và mở rộng các tệp nguồn của chúng tôi.
  2. Sử dụng tệp phân phối đã biên dịch của Bootstrap hoặc jsDelivr để bạn có thể thêm vào hoặc ghi đè các kiểu của Bootstrap.

Mặc dù chúng tôi không thể đi vào chi tiết ở đây về cách sử dụng mọi trình quản lý gói, nhưng chúng tôi có thể đưa ra một số hướng dẫn về cách sử dụng Bootstrap với trình biên dịch Sass của riêng bạn .

Đối với những người muốn sử dụng tệp phân phối, hãy xem lại trang bắt đầu để biết cách bao gồm các tệp đó và trang HTML mẫu. Từ đó, hãy tham khảo các tài liệu để biết bố cục, thành phần và hành vi bạn muốn sử dụng.

Khi bạn đã làm quen với Bootstrap, hãy tiếp tục khám phá phần này để biết thêm chi tiết về cách sử dụng các tùy chọn chung của chúng tôi, sử dụng và thay đổi hệ thống màu của chúng tôi, cách chúng tôi xây dựng các thành phần của mình, cách sử dụng danh sách các thuộc tính tùy chỉnh CSS ngày càng tăng của chúng tôi và cách để tối ưu hóa mã của bạn khi xây dựng bằng Bootstrap.

CSP và SVG được nhúng

Một số thành phần Bootstrap bao gồm các SVG được nhúng trong CSS của chúng tôi để tạo kiểu cho các thành phần một cách nhất quán và dễ dàng trên các trình duyệt và thiết bị. Đối với các tổ chức có cấu hình CSP nghiêm ngặt hơn , chúng tôi đã ghi lại tất cả các trường hợp SVG được nhúng của chúng tôi (tất cả đều được áp dụng thông qua background-image) để bạn có thể xem xét kỹ lưỡng hơn các tùy chọn của mình.

Dựa trên cuộc trò chuyện của cộng đồng , một số tùy chọn để giải quyết vấn đề này trong cơ sở mã của riêng bạn bao gồm thay thế URL bằng nội dung được lưu trữ cục bộ, xóa hình ảnh và sử dụng hình ảnh nội tuyến (không thể thực hiện trong tất cả các thành phần) và sửa đổi CSP của bạn. Khuyến nghị của chúng tôi là xem xét cẩn thận các chính sách bảo mật của riêng bạn và quyết định con đường tốt nhất về phía trước, nếu cần.