Sau khi tải xuống một gói bootstrap 3 hoàn chỉnh từ http://getbootstrap.com , tôi nhận thấy rằng có một tệp css riêng cho chủ đề. Làm thế nào để sử dụng nó? Vui lòng giải thích?
Tôi đã đưa bootstrap-theme.cssvào dự án bootstrap hiện tại của mình, nhưng không có sự khác biệt nào về đầu ra.
Câu trả lời:
Khi tải xuống Bootstrap 3.x, bạn sẽ nhận được bootstrap.css và bootstrap-theme.css (chưa kể các phiên bản rút gọn của các tệp này cũng có mặt).
bootstrap.csslà hoàn toàn theo kiểu và sẵn sàng để sử dụng, nếu đó là mong muốn của bạn. Nó có thể là một chút đơn giản nhưng nó đã sẵn sàng và nó ở đó.
Bạn không cần sử dụng bootstrap-theme.css nếu bạn không muốn và mọi thứ sẽ ổn.
bootstrap-theme.csschỉ là tên của tệp đang cố gắng đề xuất: đó là một chủ đề cho bootstrap được coi là sáng tạo 'Chủ đề bootstrap'. Tên của tệp gây nhầm lẫn mọi thứ chỉ một chút vì cơ sở bootstrap.cssđã áp dụng kiểu dáng và tôi, đối với một người, sẽ coi những kiểu đó là mặc định. Nhưng kết luận đó rõ ràng là không chính xác trong những điều được nói trong phần ví dụ của tài liệu Bootstrap liên quan đến bootstrap-theme.csstệp này :
"Tải chủ đề Bootstrap tùy chọn để có trải nghiệm trực quan nâng cao."
Trích dẫn ở trên được tìm thấy ở đây http://getbootstrap.com/getting-started/#examples trên hình thu nhỏ liên kết đến trang ví dụ này http://getbootstrap.com/examples/theme/ . Ý tưởng là bootstrap-theme.csslà THE chủ đề bootstrap VÀ đó là tùy chọn.
Về các chủ đề tại BootSwatch.com: Những chủ đề này không được triển khai như thế nào bootstrap-theme.css. Các chủ đề BootSwatch là phiên bản sửa đổi của bản gốc bootstrap.css. Vì vậy, bạn chắc chắn KHÔNG nên sử dụng một chủ đề từ BootSwatch VÀ bootstrap-theme.csstệp cùng một lúc.
Về chủ đề tùy chỉnh của riêng bạn: Bạn có thể chọn sửa đổi bootstrap-theme.csskhi tạo chủ đề của riêng mình. Làm như vậy có thể giúp thực hiện thay đổi kiểu dáng dễ dàng hơn mà không vô tình phá vỡ bất kỳ ưu điểm Bootstrap tích hợp nào.
Để biết ví dụ về các kiểu css, hãy xem: http://getbootstrap.com/examples/theme/
Nếu bạn muốn xem ví dụ trông như thế nào mà không có tệp bootstrap-theme.css, hãy mở các công cụ phát triển trình duyệt của bạn và xóa liên kết khỏi <head> của ví dụ và sau đó bạn có thể so sánh nó.
Tôi biết đây là một câu hỏi cũ nhưng chỉ đăng nó trong trường hợp bất cứ ai đang tìm kiếm một ví dụ về việc tôi trông như thế nào.
Cập nhật
bootstrap.css = khung css chính (lưới, kiểu cơ bản, v.v.)
bootstrap-theme.css= kiểu dáng mở rộng (nút 3D, độ dốc, v.v.). Tập tin này là tùy chọn và hoàn toàn không ảnh hưởng đến chức năng của bootstrap, nó chỉ tăng cường sự xuất hiện.
Cập nhật 2
Với việc phát hành v3.2.0 Bootstrap đã thêm một tùy chọn để xem css chủ đề trên các trang tài liệu. Nếu bạn đi đến một trong các trang tài liệu ( css , thành phần , javascript ), bạn sẽ thấy liên kết "Xem trước chủ đề" ở dưới cùng của điều hướng bên mà bạn có thể sử dụng để bật và tắt chủ đề css.
bootstrap.cssbằng một chủ đề từ Bootswatch.com như trang web đã nói và tôi vẫn có thể sử dụng bootstrap-theme.cssngay cả với chủ đề Bottswatch?
bootstrap-themevới Bootswatch. Nó làm cho một trang web lộn xộn của tôi anyway.
Đầu tiên, bootstrap-theme.csskhông có gì khác ngoài tương đương với kiểu Bootstrap 2.x trong Bootstrap 3. Nếu bạn thực sự muốn sử dụng nó, chỉ cần thêm nó CONGNG với bootstrap.css(phiên bản rút gọn cũng sẽ hoạt động).
Như đã nói bởi những người khác, tên tệp bootstrap-theme.css rất khó hiểu. Tôi đã chọn một cái gì đó như bootstrap-3d.css hoặc bootstrap-Fancy.css sẽ mô tả nhiều hơn về những gì nó thực sự làm. Những gì thế giới coi là "Chủ đề Bootstrap" là thứ bạn có thể nhận được từ BootSwatch, một con thú hoàn toàn khác.
Như đã nói, các hiệu ứng khá đẹp - độ dốc và bóng và như vậy. Thật không may, tập tin này sẽ tàn phá các Chủ đề BootSwatch, vì vậy tôi đã quyết định tìm hiểu những gì nó cần để làm cho nó chơi tốt với chúng.
Bootstrap-theme.css được tạo từ tệp theme.less trong nguồn Bootstrap. Các yếu tố bị ảnh hưởng là (kể từ Bootstrap v3.2.0):
Tệp theme.less phụ thuộc vào:
@import "variables.less";
@import "mixins.less";Mã sử dụng các màu được xác định trong biến.less ở một số nơi, ví dụ:
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}Đây là lý do tại sao bootstrap-theme.cs hoàn toàn làm rối Chủ đề BootSwatch. Tin vui là Chủ đề BootSwatch cũng được tạo từ các tệp biến.less, vì vậy bạn chỉ cần xây dựng một bootstrap-theme.css cho Chủ đề BootSwatch của mình.
Cách đúng đắn để làm điều đó là cập nhật quy trình xây dựng Theme, nhưng ở đây là cách nhanh và bẩn. Thay thế tệp biến.less trong nguồn Bootstrap bằng nguồn từ Chủ đề Bootswatch của bạn và xây dựng nó và voila bạn có tệp bootstrap-theme.css cho Chủ đề Bootswatch của bạn.
Xây dựng Bootstrap nghe có vẻ nan giải, nhưng thực ra nó rất đơn giản:
Làm xong. Thấy không, thật dễ phải không?
Tôi biết bài này hơi cũ nhưng ...
Như 'witttness' đã chỉ ra.
Giới thiệu về chủ đề tùy chỉnh của riêng bạn Bạn có thể chọn sửa đổi bootstrap-theme.css khi tạo chủ đề của riêng bạn. Làm như vậy có thể giúp thực hiện thay đổi kiểu dáng dễ dàng hơn mà không vô tình phá vỡ bất kỳ ưu điểm Bootstrap tích hợp nào.
Tôi thấy nó như Bootstrap đã thấy trong nhiều năm qua rằng mọi người đều muốn một cái gì đó khác một chút so với các phong cách cốt lõi. Mặc dù bạn có thể sửa đổi bootstrap.css nhưng nó có thể phá vỡ mọi thứ và nó có thể khiến việc cập nhật lên phiên bản mới hơn là một nỗi đau thực sự và tốn thời gian. Tải về từ một 'chủ đề' có nghĩa là trang web của bạn phải chờ trên nếu mà chủ đề cập nhật người sáng tạo đó, lớn nếu đôi khi, phải không?
Một số người xây dựng tệp 'custom.css' của riêng họ và không sao, nhưng nếu bạn sử dụng 'bootstrap-theme.css' thì rất nhiều thứ đã được tạo và điều này cho phép bạn cuộn chủ đề của riêng mình nhanh hơn 'mà không làm gián đoạn cốt lõi của bootstrap .css. Tôi thường không thích các nút 3D và độ dốc, vì vậy hãy thay đổi chúng bằng bootstrap-theme.css. Thêm lề hoặc đệm, thay đổi bán kính để nút của bạn, và vân vân ...