Làm thế nào để sử dụng bootstrap-theme.css với bootstrap 3?

Question

Sau khi tải xuống gói hoàn chỉnh của bootstrap 3 từ http://getbootstrap.com, tôi nhận thấy rằng có một tệp css riêng biệt cho chủ đề. Làm thế nào để sử dụng nó? Vui lòng giải thích?

Tôi đã bao gồm bootstrap-theme.css trong dự án khởi động hiện có của mình, nhưng không có sự khác biệt về đầu ra.

Answer 1

Sau khi tải 3.x Bootstrap, bạn sẽ nhận được bootstrap.css và bootstrap-theme.css (chưa kể đến các phiên bản minified của những tập tin này mà cũng có mặt).

bootstrap.css

bootstrap.css là hoàn toàn theo kiểu và sẵn sàng để sử dụng, nếu như vậy là mong muốn của bạn. Nó có lẽ 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.

chủ đề khởi động.css

bootstrap-theme.css chỉ là tên của tệp đang cố gắng đề xuất: đó là một chủ đề cho bootstrap được sáng tạo coi là 'Chủ đề khởi động'. Tên của tập tin gây nhầm lẫn mọi thứ chỉ một chút kể từ khi các cơ sở bootstrap.css đã có kiểu dáng được áp dụng và tôi, cho một, sẽ xem xét những phong cách được mặc định. Nhưng kết luận đó là rõ ràng không chính xác trong ánh sáng của những điều nói trong phần ví dụ các tài liệu của Bootstrap liên quan đến bootstrap-theme.css tập tin này: "Load theme tùy chọn Bootstrap cho một trải nghiệm trực quan nâng cao"

Các trích dẫn trên được tìm thấy ở đây http://getbootstrap.com/getting-started/#examples vào hình nhỏ liên kết với ví dụ trang này http://getbootstrap.com/examples/theme/. Ý tưởng là bootstrap-theme.css là THE chủ đề bootstrap VÀ nó là tùy chọn.

Themes tại BootSwatch.com

Về các chủ đề tại BootSwatch.com: Những chủ đề này không được thực hiện như bootstrap-theme.css. Chủ đề của BootSwatch là phiên bản sửa đổi của bootstrap.css gốc. Vì vậy, bạn chắc chắn KHÔNG nên sử dụng một chủ đề từ BootSwatch VÀ tập tin bootstrap-theme.css cùng một lúc.

Tuỳ chỉnh Theme

Về riêng của bạn Tuỳ chỉnh Theme: Bạn có thể chọn để thay đổi bootstrap-theme.css khi tạo chủ đề của riêng bạn. Làm như vậy có thể làm cho việc thay đổi kiểu dáng dễ dàng hơn mà không vô tình phá vỡ bất kỳ sự tích hợp sẵn nào của Bootstrap.

Answer 2

Đầu tiên, bootstrap-theme.css không có gì khác nhưng 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, chỉ cần thêm ALONG với bootstrap.css (phiên bản rút gọn cũng sẽ hoạt động).

Answer 3

Bootstrap-theme.css là tệp CSS bổ sung, là tùy chọn để bạn sử dụng. Nó cung cấp hiệu ứng 3D trên các nút và một số yếu tố khác.

Answer 4

Đối với một ví dụ về phong cách css có một cái nhìn tại địa chỉ: http://getbootstrap.com/examples/theme/

Nếu bạn muốn xem cách dụ trông mà không file bootstrap-theme.css mở ra công cụ phát triển trình duyệt của bạn và xóa các liên kết từ số < đầu số > 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 đăng nó chỉ trong trường hợp bất cứ ai đang tìm kiếm một ví dụ về nó trông như thế nào.

Cập nhật

bootstrap.css = khuôn khổ chính css (lưới, phong cách cơ bản, vv)

bootstrap-theme.css = mở rộng phong cách (nút 3D, gradient vv). Tệp này là tùy chọn và không ảnh hưởng đến chức năng của bootstrap, nó chỉ tăng cường diện mạo.

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 các css theme trên các trang doc. Nếu bạn truy cập một trong các trang tài liệu (css, components, javascript), bạn sẽ thấy liên kết "Xem trước chủ đề" ở cuối nav bên cạnh mà bạn có thể sử dụng để bật và tắt css chủ đề.

Answer 5

Như đã nêu khác, tên tệp bootstrap-theme.css rất khó hiểu. Tôi đã chọn một cái gì đó như là bootstrap-3d.css hoặc bootstrap-fancy.css sẽ mô tả hơn về những gì nó thực sự làm. Những gì thế giới nhìn thấy như là một "Theme Bootstrap" là một điều bạn có thể nhận được từ BootSwatch đó là một con thú hoàn toàn khác nhau.

Với điều đó đã nói, hiệu ứng khá đẹp - gradient và bóng tối. Thật không may tập tin này sẽ tàn phá trên Chủ đề BootSwatch, vì vậy tôi quyết định đào sâu vào những gì nó sẽ làm để làm cho nó chơi tốt đẹp với họ.

LESS

Bootstrap-theme.css được tạo ra từ theme.less tập tin trong nguồn Bootstrap. Các yếu tố bị ảnh hưởng là (như của Bootstrap v3.2.thanh

Danh sách

• mục
• Buttons
• Images
• Dropdowns
• NavBars
• Alerts
• Progress
• Danh sách nhóm
• Panels
: 0) 210
• Wells

File theme.less phụ thuộc vào:

@import "variables.less"; 
@import "mixins.less"; 

Mã này sử dụng màu sắc theo quy định tại variables.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) 
} 

này tại sao bootstrap -theme.css hoàn toàn gây rối cho Chủ đề BootSwatch. Tin tốt là BootSwatch Themes cũng được tạo từ các tập tin variables.less, vì vậy bạn có thể chỉ cần xây dựng một bootstrap-theme.css cho Theme BootSwatch của bạn.

Building bootstrap-theme.css

Cách đúng để làm điều đó là để cập nhật Theme quá trình xây dựng, nhưng ở đây đây là cách nhanh chóng và dơ bẩn. Thay thế các tập tin variables.less trong nguồn Bootstrap với một từ Bootswatch Theme của bạn và xây dựng nó và thì bạn có một file bootstrap-theme.css cho Bootswatch Theme của bạn.

Building Bootstrap tự

Building Bootstrap nghe có vẻ khó khăn, nhưng nó thực sự là rất đơn giản:

1. Tải về mã nguồn Bootstrap
2. Tải về và cài đặt NodeJS
3. Mở một dấu nhắc lệnh và điều hướng đến thư mục nguồn bootstrap. Nhập "npm install". Thao tác này sẽ thêm thư mục "node_modules" vào dự án và tải xuống tất cả nội dung của nút mà bạn cần.
4. Cài đặt grunt trên toàn cầu (tùy chọn -g) bằng cách nhập "npm install -g grunt-cli"
5. Đổi tên thư mục "dist" thành "dist-orig" rồi tạo lại bằng cách nhập "grunt dist". Bây giờ hãy kiểm tra xem có một thư mục "dist" mới chứa tất cả những gì bạn cần để sử dụng xây dựng Bootstrap tùy chỉnh của bạn hay không.

Xong. Thấy không, dễ phải không?

Answer 6

Tôi biết bài này là kinda 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ể làm cho việc thay đổi kiểu dáng dễ dàng hơn mà không vô tình phá vỡ bất kỳ sự tích hợp sẵn nào của Bootstrap.

Tôi thấy nó như Bootstrap đã thấy trong những năm mà mọi người đều muốn một chút khác biệt so với các kiểu lõi. Trong khi bạn có thể sửa đổi bootstrap.css nó có thể phá vỡ mọi thứ và nó có thể làm cho việc cập nhật lên một 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 xuống từ trang web 'chủ đề' có nghĩa là bạn phải đợi trên nếu người sáng tạo cập nhật chủ đề đó, 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à điều đó là ổn, nhưng nếu bạn sử dụng 'bootstrap-theme.css' 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 cần phá vỡ cốt lõi của bootstrap.css. Tôi cho một không thích các nút 3D và gradient hầu hết thời gian, do đó, thay đổi chúng bằng cách sử dụng bootstrap-theme.css. Thêm lề hoặc đệm, thay đổi bán kính cho các nút của bạn, và như vậy trên ...

Answer 7

Bài đăng khá cũ nhưng tôi nghĩ tôi sẽ thêm hai xu của mình về chủ đề. Có thể hiểu được rằng rất nhiều người (bao gồm cả tôi) yêu thích khung khởi động với bố cục lưới đáp ứng của nó, nhưng chúng tôi cũng muốn phân biệt bản thân với các trang web "khác trong số". Sự sẵn có của các chủ đề và mẫu khởi động độc đáo đã bùng nổ trong vài năm qua. Gần đây tôi đã tạo trang web của riêng mình để cung cấp một số chủ đề này tại: http://thetoolsmith.com (phích cắm không biết xấu hổ)

Điểm mấu chốt là bạn vẫn cần khung khởi động cơ bản nhưng bạn có thể sửa đổi hoặc thêm kiểu để khởi động chủ đề .css để nó hoạt động cùng với các tệp lõi nhưng cung cấp một giao diện khác và bạn có thể tự tạo.