Tùy chỉnh mẫu CSS Bootstrap

Tôi chỉ mới bắt đầu với Bootstrap từ Twitter và đang tự hỏi 'các phương pháp hay nhất' để tùy chỉnh là gì. Tôi muốn phát triển một hệ thống tận dụng tất cả sức mạnh của mẫu css (Bootstrap hoặc loại khác), có thể sửa đổi hoàn toàn (và dễ dàng), 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, tôi không muốn ' t phải bắt đầu lại.

Ví dụ, tôi muốn thêm hình nền vào điều hướng trên cùng. Có vẻ như có 3 cách để thực hiện điều này:

1. Sửa đổi các lớp .topbar trong bootstrap.css. Tôi đặc biệt không thích điều này 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 chúng theo cùng một cách.
2. Tạo các lớp mới với các hình nền của tôi và áp dụng cả hai kiểu (mới và bootstrap cho phần tử của tôi). Điều này có thể tạo ra xung đột phong cách, có thể tránh được bằng cách tách 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 bị 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. Nói cách khác, đây có vẻ là một cách tiếp cận tốt nhưng chưa được sử dụng. ÍT Tôi lo lắng 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 cho bất kỳ mẫu css nào.

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

Điều tốt nhất để làm là.

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

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

2. Không sửa đổi tệp bootstrap.css

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

3. Tạo tệp css của riêng bạn và ghi đè bất cứ khi nào bạn muốn nội dung bootstrap gốc

Nếu họ đặt thanh trên cùng, giả sử, color: black;nhưng bạn muốn nó có màu trắng, hãy tạo một bộ chọn mới rất cụ thể cho thanh trên cùng này và sử dụng quy tắc này trên thanh trên cùng cụ thể. Đối với một bảng chẳng hạn, 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, tệp này sẽ ghi đè lên bất kỳ thứ gì bạn muốn.

Cập nhật 2019 - Bootstrap 4

Tôi đang xem lại câu hỏi tùy chỉnh Bootstrap này cho 4.x, hiện sử dụng SASS thay vì LESS. Nói chung, có 2 cách để tùy chỉnh Bootstrap ...

1. Ghi đè CSS đơn giản

Một cách để tùy chỉnh đơn giản là sử dụng CSS để ghi đè CSS Bootstrap. Để có khả năng bảo trì, các tùy chỉnh CSS được đặt trong một custom.csstệp riêng biệt , để phần bootstrap.csscòn lại không bị sửa đổi. Các tham chiếu đến custom.csssau khi các bootstrap.csscho ghi đè để làm việc ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Chỉ cần thêm bất kỳ thay đổi nào cần thiết trong CSS tùy chỉnh. Ví dụ...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Trước ( bootstrap.css)

Sau (với custom.css)

Khi thực hiện các tùy chỉnh, bạn nên hiểu Đặc điểm CSS . Ghi đè custom.cssnhu cầu sử dụng các bộ chọn cụ thể như bootstrap.css.

Lưu ý rằng không cần phải sử dụng !importanttrong CSS tùy chỉnh, trừ khi bạn đang ghi đè một trong các lớp Tiện ích Bootstrap . Tính đặc hiệu của CSS luôn hoạt động để một lớp CSS ghi đè lớp CSS khác.

2. Tùy chỉnh bằng SASS

Nếu bạn đã quen với SASS (và bạn nên sử dụng phương pháp này), bạn có thể tùy chỉnh Bootstrap của riêng mình custom.scss. Có một phần trong tài liệu Bootstrap giải thích điều này, tuy nhiên tài liệu không giải thích cách sử dụng các biến hiện có trong tài liệu của bạn custom.scss. Ví dụ: hãy thay đổi màu nền của nội dung thành #eeeeeevà thay đổi / ghi đè màu primarytheo ngữ cảnh màu xanh lam thành biến của Bootstrap$purple ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Điều này cũng hoạt động để tạo các lớp tùy chỉnh mới . Ví dụ, ở đây tôi thêm purplevào màu sắc của theme mà tạo ra tất cả các CSS cho btn-purple, text-purple, bg-purple, alert-purple, vv ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

Với SASS, bạn phải @import bootstrap sau các tùy chỉnh để chúng hoạt động! Sau khi SASS được biên dịch sang CSS ( điều này phải được thực hiện bằng cách sử dụng trình biên dịch SASS node-sass, gulp-sass, npm webpack, v.v. ), CSS kết quả là Bootstrap tùy chỉnh. Nếu bạn không quen với SASS, bạn có thể tùy chỉnh Bootstrap bằng cách sử dụng một công cụ như trình tạo chủ đề này mà tôi đã tạo.

Bản trình diễn Bootstrap tùy chỉnh (SASS)

Lưu ý: Không giống như 3.x, Bootstrap 4.x không cung cấp công cụ tùy biến chính thức . Tuy nhiên, bạn có thể tải xuống CSS chỉ lưới hoặc sử dụng một công cụ xây dựng tùy chỉnh 4.x khác để xây dựng lại CSS Bootstrap 4 như mong muốn.

Liên quan:
Cách mở rộng / sửa đổi (tùy chỉnh) Bootstrap 4 với SASS
Làm thế nào để thay đổi màu chính của bootstrap?
Cách tạo bộ kiểu màu mới trong Bootstrap 4 với sass
Cách tùy chỉnh Bootstrap

Tôi nghĩ rằng cách chính thức được ưa thích hiện nay là sử dụng Less và ghi đè động 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ừ tài liệu Bootstrap , đây là cách ghi đè động các kiểu bootstrap.css:

Tải xuống 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 chúng và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ trong bộ nhớ cục bộ.

Hoặc nếu bạn muốn biên dịch tĩnh một bootstrap.css mới với các kiểu tùy chỉnh của mình (cho 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

Kể từ câu trả lời của Pabluez 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 của bạn

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

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

http://www.initializr.com/

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

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

1. Sao chép bootstrap trong thư mục gốc của bạn: git clone https://github.com/twbs/bootstrap.git
2. Đổi tên nó thành "bootstrap"
3. Tạo tệp package.json: https://gist.github.com/jide/8440609
4. Tạo Gruntfile.js: https://gist.github.com/jide/8440502
5. Tạo một thư mục "ít hơn"
6. Sao chép bootstrap / less / variable.less vào thư mục "less"
7. Thay đổi đường dẫn phông chữ: @icon-font-path: "../bootstrap/fonts/";
8. Tạo tệp style.less tùy chỉnh trong thư mục "less" nhập bootstrap.less và tệp tùy chỉnh variable.less của bạn: https://gist.github.com/jide/8440619
9. Chạy npm install
10. Chạy grunt watch

Bây giờ bạn có thể sửa đổi các biến theo bất kỳ cách nào bạn muốn, ghi đè các quy tắc bootstrap trong tệp 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!

CHỈNH SỬA: Tôi đã tạo một bản ghi Bootstrap bằng kỹ thuật này: https://github.com/jide/bootstrap-boilerplate

Gần đây tôi đã viết một bài về cách tôi đã làm việc đó tại Udacity trong vài năm qua. 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 xảy ra xung đột hợp nhất, bỏ dở công việc, v.v.

Bài đăng đi 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 thủy của bootstrap và ghi đè nó ra bên ngoài.
• Sửa đổi một tệp (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 @include bootstrap.less và sau đó ghi đè.

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

Sử dụng giải pháp này, vấn đề ví dụ của bạn sẽ giống như sau:

• Thay đổi màu thanh điều hướng bằng @ navbar-inverse-bg trong các biến của bạn.less (không phải của bootstrap)
• Thêm các kiểu thanh điều hướng của riêng bạn vào bootstrap_overrides.less của bạn, ghi đè lên bất cứ thứ gì bạn cần khi thực hiện.
• Hạnh phúc.

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

Bài đăng trên blog với hướng dẫn là ở đây .

Ví dụ mã trên github là ở đây .

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

Đây là tài liệu Bootstrap về cách sử dụng LESS

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