1. Trang chủ
  2. Câu hỏi và trả lời
  3. Tùy chỉnh mẫu CSS Bootstrap

Tùy chỉnh mẫu CSS Bootstrap

2011-12-21 39 views
87

Tôi chỉ mới bắt đầu với Bootstrap từ Twitter và tôi tự hỏi 'thực tiễn tốt nhất' là gì để tùy chỉnh. Tôi muốn phát triển một hệ thống sẽ tận dụng tất cả sức mạnh của template css (Bootstrap hay khác), hoàn toàn (và dễ dàng) có thể sửa đổi, bền vững (tức là - khi phiên bản tiếp theo của Bootstrap được phát hành từ Twitter I don ' t phải bắt đầu lạiTùy chỉnh mẫu CSS Bootstrap

Ví dụ, tôi muốn thêm hình ảnh nền cho điều hướng trên Dường như có 3 cách để đi về điều này:..

  1. Sửa đổi các lớp .topbar trong bootstrap. Tôi không đặc biệt thích điều này bởi vì tôi sẽ có rất nhiều mục .topbar và tôi không nhất thiết muốn sửa đổi tất cả chúng theo cùng một cách.
  2. Tạo các lớp mới với hình nền của tôi nd áp dụng cả hai phong cách (mới và bootstrap cho phần tử của tôi). Điều này có thể tạo ra các xung đột về phong cách, có thể tránh được bằng cách loại bỏ lớp .topbar thành các lớp riêng biệt và sau đó chỉ sử dụng các phần không được lớp tùy chỉnh của tôi bước vào. Một lần nữa điều này đòi hỏi nhiều công việc hơn tôi nghĩ là cần thiết và trong khi nó linh hoạt, nó sẽ không cho phép tôi dễ dàng cập nhật bootstrap.css khi Twitter phát hành phần tiếp theo.
  3. Sử dụng các biến trong .LESS để đạt được tùy chỉnh. Offhand này có vẻ như một cách tiếp cận tốt nhưng không được sử dụng. Tôi có những lo ngại về việc biên dịch css trên máy khách và về tính bền vững của mã.

Mặc dù tôi đang sử dụng Bootstrap, câu hỏi này có thể được khái quát hóa thành bất kỳ mẫu css nào.

Cảm ơn trước về đầu vào.

Nguồn

2011-12-21 Anne

+0

Xin chào @Pabluez, có bạn đã trả lời, xem bên dưới. Xin lỗi vì sự chậm trễ trong phản ứng - Tôi đã được kỳ nghỉ bận rộn. – Anne

+0

Tôi tin rằng bài viết này sẽ giúp bạn http://prideparrot.com/blog/archive/2014/6/blog_template_using_bootstrap3_part2 – VJAI

+1

Chủ đề này là thông tin http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best- thực hành – ZimSystem

Trả lời

118

Điều tốt nhất cần làm là.

1. fork twitter-bootstrap từ github và sao chép cục bộ.

chúng đang thay đổi rất nhanh chóng thư viện/khung công tác (chúng phân tách nội bộ. Một số thích thư viện hơn, vì tôi thay đổi bố cục từ khi bạn tải nó lên trang của bạn). Vâng ... forking/nhân bản sẽ cho phép bạn lấy các phiên bản mới sắp tới một cách dễ dàng.

2. Không sửa đổi các tập tin bootstrap.css

Nó sẽ làm phức tạp cuộc sống của bạn khi bạn cần phải nâng cấp bootstrap (và bạn sẽ cần phải làm điều đó).

3. Tạo file css của riêng bạn và ghi đè lên bất cứ khi nào bạn muốn ban đầu bootstrap thứ

nếu họ thiết lập một topbar với, giả sử, color: black; nhưng bạn wan nó màu trắng, tạo ra một selector rất cụ mới cho việc này topbar và sử dụng quy tắc này trên topbar cụ thể. Đối với một bảng ví dụ, nó sẽ là <table class="zebra-striped mycustomclass">. Nếu bạn khai báo tệp css của mình sau bootstrap.css, điều này sẽ ghi đè bất cứ điều gì bạn muốn.

Nguồn

2011-12-29 19:48:17 Pabluez

+13

+1 Câu trả lời hay. Chỉ cần thêm vào điểm thứ 3 của mình: bạn có thể tạo một lớp mới để áp dụng ngoài lớp cũ hoặc chỉ ghi đè/thêm thuộc tính bạn muốn thay đổi. – Wex

+0

đó là những gì tôi có ý nghĩa với mycustomcss ...Tôi sẽ chỉnh sửa nó để mycustomclass, bên cạnh zebra-sọc (bootstrap-class) – Pabluez

+1

là có aything bạn có thể thêm vào này như thế nào để làm điều này "mới" ít/sass cách? tức là: làm thế nào bạn có thể phân lớp một phong cách "bootstrap"? kế thừa tất cả + tăng thêm. Tôi chưa nhận được đầu của tôi xung quanh cho dù đây là một kết hợp, và mở rộng, hoặc một ?? xin lỗi vì câm. –

6

Bạn có thể sử dụng mẫu bootstrap từ

http://www.initializr.com/

trong đó bao gồm tất cả các file bootstrap .less. Sau đó, bạn có thể thay đổi các biến/cập nhật các tệp ít hơn nếu muốn và nó sẽ tự động biên dịch css. Khi triển khai biên dịch các tập tin ít hơn để css.

Nguồn

2012-02-20 16:11:21 Tom

9

Kể từ khi câu trả lời của Pabluez trở lại vào tháng 12, bây giờ có một cách tốt hơn để tùy chỉnh Bootstrap.

Sử dụng: Bootswatch để tạo bootstrap.css bạn

Bootswatch xây dựng bình thường Twitter Bootstrap từ phiên bản mới nhất (bất cứ điều gì bạn cài đặt trong thư mục bootstrap), nhưng cũng nhập khẩu các tùy chỉnh của bạn. Điều này làm cho nó dễ dàng sử dụng phiên bản mới nhất của Bootstrap, trong khi vẫn duy trì CSS tùy chỉnh, mà không cần phải thay đổi bất cứ điều gì về HTML của bạn. Bạn chỉ đơn giản là có thể ảnh hưởng đến các tập tin boostrap.css.

Nguồn

2012-04-16 00:36:03 mdashx

+0

bạn có thể xây dựng cách tốt nhất để sử dụng điều này không. Tôi tải về bootswatch và xây dựng css của tôi bằng cách sử dụng swatch swatch: chủ đề nhưng tôi vẫn còn bối rối về những tập tin tôi nên đặt ở đâu. Tôi đang cố gắng để có được một tình huống mà tôi có thể tải về một phiên bản cập nhật của bootstrap hoặc một chủ đề bootswatch và sử dụng nó, nhưng vẫn sử dụng các biến tùy chỉnh của tôi. (Tôi đang làm việc trong VisualStudio2013 Pro nếu điều đó tạo nên sự khác biệt). Tôi không muốn sử dụng javascript để làm biên dịch. Bây giờ, tôi OK với việc chạy lệnh xây dựng. Sau đó, tôi sẽ cố gắng tìm một phương pháp tốt để tự động hóa. Cảm ơn Mark – mark1234

19

Tôi nghĩ cách chính thức được ưu tiên hiện nay là sử dụng Ít hơn và tự động ghi đè bootstrap.css (sử dụng less.js) hoặc biên dịch lại bootstrap.css (sử dụng Node hoặc trình biên dịch Less).

Từ Bootstrap docs, dưới đây là cách để ghi đè lên phong cách bootstrap.css động:

Tải Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less"> 
    <script src="/path/to/less.js"></script>

Để biên dịch lại các tệp .less, chỉ cần lưu và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ chúng trong bộ nhớ cục bộ.

Hoặc nếu bạn muốn tĩnh biên dịch một bootstrap.css mới với phong cách tùy chỉnh của bạn (cho các môi trường sản xuất):

Cài đặt công cụ dòng lệnh LESS qua Node và chạy lệnh sau:

$ lessc ./less/bootstrap.less > bootstrap.css

Nguồn

2012-08-19 20:36:11 Symmetric

+0

đây là cách ưa thích :) – Srivathsa

+1

Đây là câu trả lời đúng. –

0

Sử dụng LESS với Bootstrap ...

Here are the Bootstrap docs for how to use LESS

(họ đã chuyển từ câu trả lời trước)

Nguồn

2012-12-18 01:15:39 Twelve24

+3

Nếu tài liệu đã di chuyển, hãy chỉnh sửa các câu trả lời khác để phản ánh rằng – DeadChex

+0

Trớ trêu thay, liên kết trong câu trả lời này đã chết. – zacharydl

+0

ban đầu tôi không có đủ điểm để chỉnh sửa :-) – Twelve24

3

Các lựa chọn tốt nhất theo ý kiến ​​của tôi là để biên dịch một tập tin tùy chỉnh LESS bao gồm bootstrap.less, một tập tin tùy chỉnh variables.less và các quy tắc của riêng bạn:

  1. Clone bootstrap trong thư mục gốc của web site: git clone https://github.com/twbs/bootstrap.git
  2. Đổi tên nó là "bootstrap"
  3. Tạo một file package.json: https://gist.github.com/jide/8440609
  4. Tạo một Gruntfile.js: https://gist.github.com/jide/8440502
  5. tạo ra một "ít" thư mục
  6. Sao chép bootstrap/ít/variables.less vào thư mục "ít"
  7. Thay đổi đường dẫn font: @icon-font-path: "../bootstrap/fonts/";
  8. tạo ra một phong cách tùy chỉnh. ít tập tin trong thư mục "ít" mà nhập bootstrap.less và các biến tùy chỉnh của bạn.ít file: https://gist.github.com/jide/8440619
  9. Run npm install
  10. Run grunt watch

Bây giờ bạn có thể sửa đổi các biến bất kỳ cách nào bạn muốn, ghi đè quy tắc bootstrap trong tập tin style.less tùy chỉnh của bạn, và nếu một ngày nào đó bạn muốn cập nhật bootstrap, bạn có thể thay thế toàn bộ thư mục bootstrap!

EDIT: Tôi tạo ra một soạn sẵn Bootstrap sử dụng kỹ thuật này: https://github.com/jide/bootstrap-boilerplate

Nguồn

2014-01-15 17:42:18 Jide

3

Gần đây tôi đã viết một post về cách tôi đã làm nó ở Udacity cho vài năm trở lại đây. Phương pháp này có nghĩa là chúng tôi đã có thể cập nhật Bootstrap bất cứ khi nào chúng tôi muốn mà không cần hợp nhất xung đột, vứt bỏ công việc, v.v.

Bài đăng sâu hơn với các ví dụ, nhưng ý tưởng cơ bản là:

  • Giữ một bản sao nguyên sơ của bootstrap và ghi đè lên bên ngoài.
  • Sửa đổi một tệp (các biến của bootstrap.less) để bao gồm các biến của riêng bạn.
  • Tạo tệp trang web của bạn @bao gồm bootstrap.less và sau đó ghi đè của bạn.

Điều này có nghĩa là sử dụng LESS và biên dịch nó xuống CSS trước khi gửi nó cho khách hàng (LESS phía máy khách nếu khó tính, và tôi thường tránh nó) nhưng rất tốt để duy trì/nâng cấp và nhận Biên soạn LESS thực sự rất dễ dàng. Mã github liên kết có một ví dụ sử dụng grunt, nhưng có rất nhiều cách để đạt được điều này - ngay cả GUI nếu đó là điều của bạn.

Sử dụng giải pháp này, bài toán ví dụ của bạn sẽ trông như thế:

  • Thay đổi màu thanh nav với @ navbar-ngược-bg trong variables.less của bạn (không bootstrap của)
  • Thêm thanh nav của riêng bạn phong cách để bootstrap_overrides.less của bạn, ghi đè lên bất cứ điều gì bạn cần phải khi bạn đi.
  • Hạnh phúc.

Khi đến lúc nâng cấp bootstrap, bạn chỉ cần hoán đổi bản sao khởi động nguyên sơ và mọi thứ vẫn hoạt động (nếu bootstrap thực hiện thay đổi, bạn cần cập nhật phần ghi đè của mình, nhưng bạn phải làm điều đó anyway)

Bài đăng trên blog có hướng dẫn là here.

Ví dụ về mã trên github là here.

Nguồn

2015-01-03 23:10:29 betaorbust

Các vấn đề liên quan

 Các vấn đề liên quan