Nếu bạn mới bắt đầu tìm hiểu Bootstrap, chúng tôi đã tạo một loạt hướng dẫn có tên 14 ngày về Bootstrap 4 có thể giúp bạn Show
Nếu bạn xem qua mã nguồn của một số trang web yêu thích của mình, chúng tôi sẽ không ngạc nhiên nếu bạn tìm thấy các yếu tố phổ biến của khung Bootstrap đang được sử dụng. Vì Bootstrap được cho là khung giao diện người dùng phổ biến nhất để phát triển web, nhiều nhà thiết kế và nhà phát triển sử dụng khung này để phát triển đáp ứng nhanh Nhưng tại sao một số trang web này trông không giống chủ đề Bootstrap mặc định? Trong hướng dẫn ngắn này, chúng tôi sẽ chỉ cho bạn cách thực hiện việc này theo cách sạch sẽ, dễ bảo trì và cho phép bạn cập nhật lên các phiên bản Bootstrap trong tương lai mà không phá vỡ các kiểu tùy chỉnh của bạn (với điều kiện là bản cập nhật là nhỏ) Hãy bắt đầu nào Thêm biểu định kiểu tùy chỉnhTạo một tệp mới trong thư mục CSS Bootstrap của bạn và gọi nó là tùy chỉnh. css  Now in the portion of your website, load your new custom CSS file after the default bootstrap stylesheet. It should look like this.<head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> Áp dụng kiểu tùy chỉnhĐể sửa đổi hoặc áp dụng kiểu dáng bổ sung cho trang web của bạn, chỉ cần thêm mã thích hợp vào tùy chỉnh của bạn. tập tin css. Không cần chỉnh sửa trực tiếp bất kỳ kiểu Bootstrap gốc nào Ví dụ: nếu bạn quyết định rằng bạn không thích các góc bo tròn trên các nút, bạn có thể áp dụng kiểu sau trong tùy chỉnh của mình. tập tin css .btn {
border-radius: 0px;
}Bây giờ nếu bạn thêm một nút vào trang web của mình với các kiểu Bootstrap mặc định (lớp ______3), các góc sẽ không được làm tròn. Điều này là do biểu định kiểu tùy chỉnh của bạn sẽ ghi đè biểu định kiểu Bootstrap mặc định Mặt trái của việc thêm biểu định kiểu tùy chỉnh của riêng bạn sau biểu định kiểu bootstrap mặc định là trong trường hợp Bootstrap được nâng cấp, bạn chỉ cần thay thế biểu định kiểu Bootstrap bằng biểu định kiểu mới và các kiểu tùy chỉnh của bạn sẽ không bị ảnh hưởng. Lưu ý rằng đối với các bản nâng cấp lớn, bạn có thể cần sửa đổi các kiểu tùy chỉnh của mình. Tuy nhiên, ngay cả những nâng cấp lớn vẫn sẽ dễ dàng hơn nhiều khi sử dụng phương pháp này Một lý do khác để tiếp tục theo cách này là việc theo dõi các thay đổi của bạn và hoàn nguyên về kiểu mặc định nếu cần sẽ dễ dàng hơn nhiều. Nếu bạn thực hiện các thay đổi trực tiếp đối với biểu định kiểu mặc định, việc duy trì và theo dõi các thay đổi sẽ trở nên rất khó khăn Phương pháp này là cách duy nhất để thực hiện nếu bạn đang tạo các chủ đề & mẫu Bootstrap Phần kết luậnNhư bạn có thể thấy, việc thêm một biểu định kiểu riêng là một cách rất hiệu quả để tùy chỉnh kiểu Bootstrap mặc định. Làm như vậy sẽ giúp cập nhật Bootstrap dễ dàng hơn nhiều và giữ cho mã rất sạch sẽ THƯỞNG. Hãy xem bài đăng của chúng tôi trên Bootstrap UI Kits, một cách tuyệt vời để tùy chỉnh giao diện Bootstrap mặc định Bạn sẽ có thứ tự các biểu định kiểu như thế này, đầu tiên bạn sẽ bao gồm css bootstrap, sau đó là tệp biểu định kiểu của bạn. Tại sao vậy? . quan trọng. Bạn có thể viết các lớp của riêng mình và đưa chúng vào bố cục của mình, bạn có thể sử dụng các lớp bootstrap và điều chỉnh chúng khi cần. Khi bạn trộn các lớp của mình và các lớp bootstrap, hãy kiểm tra những thuộc tính nào được thêm vào từ các lớp của chúng, bạn có cần chúng hay không, v.v. Ví dụ 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, 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à
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 các 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à một trang HTML mẫu. Từ đó, hãy tham khảo tài liệu về bố cục, thành phần và hành vi mà bạn muốn sử dụng Khi bạn tự 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, cách 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 CSP và SVG nhúngMột số thành phần Bootstrap bao gồm các SVG được nhúng trong CSS của chúng tôi để định kiểu 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 phiên bản SVG nhúng của mình (tất cả đều được áp dụng qua 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ế các 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ể có 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 Tôi có thể sử dụng CSS bên ngoài với Bootstrap không?Liên kết CSS bên ngoài
. Chỉ cần nhấp chuột phải vào nhóm Kiểu và chọn Liên kết CSS bên ngoài. Trong hộp thoại, bạn có thể dán URL vào biểu định kiểu được lưu trữ bên ngoài và URL đó sẽ được thêm vào thiết kế của bạn. You can link externally hosted stylesheets in Bootstrap Studio. Just right click the Styles group and choose Link External CSS . In the dialog you can paste a URL to an externally hosted stylesheet and it will be added to your design.
Tôi có nên sử dụng Bootstrap hoặc CSS tùy chỉnh không?Nếu bạn chỉ cần thêm một vài kiểu như phông chữ và màu sắc, thì CSS thuần túy sẽ nhanh hơn và dễ dàng hơn vì bạn không cần quan trọng hóa một khung như Bootstrap . Mặt khác, nếu bạn cần một thành phần cụ thể mà Bootstrap có, chẳng hạn như phương thức hoặc thẻ, thì khung là cách tốt nhất. |
