Değerli harcama olacaktır biraz zaman en iyisi Bootstrap özelleştirme için pratik öğrenmem olarak bütün gün soruşturuyorum.

Dostça bir sayfa http://twitter.github.io/bootstrap/customize.html seçmeli olarak özelleştirme öğeleri için kullanılabilir olduğunu görebiliyorum ama orijinal bootstrap kaynak dosyaları dokunmadan daha fazla kontrol sahibi olmak istiyorum.

Başlangıç olarak, ben temelde istediği için test değişen ızgara 12-16 sütun ve bunu yapmak için yarattım kendim değişken daha az dosya ve eklendi @gridColumns:16; sadece bu dosya için ve ithal edilen bu özel az içeri bootstrap.daha az gibi.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Sonra, WinLess ı kullanarak bootstrap derlenmiş.daha yeni bootstrap almak için dosya.geçersiz değişken ile css Ara ithalat ve html dosyası ile css bağlantılı ama kılavuz 16 sütunları değiştirmez.

Herkes ben yanlış yapıyorum ne işaret edebilir misiniz?

Değişkenleri geçersizsonrabootstrap.less özgün işler benim için büyük alma:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Yukarıda daha AZ kaynak derleme çıktıları düzgün özelleştirilmiş Bootstrap CSS kodu.

İlgili bilgi: http://lesscss.org/features/#variables-feature-lazy-loading