Bootstrap CSS şablonunu özelleştirme

Twitter'dan Bootstrap kullanmaya yeni başlıyorum ve özelleştirme için 'en iyi uygulamaların' ne olduğunu merak ediyorum. Bir css şablonunun (Bootstrap veya diğer) tüm gücünden yararlanacak, tamamen (ve kolayca) değiştirilebilir, sürdürülebilir (yani Bootstrap'ın bir sonraki sürümü Twitter'dan yayınlandığında) bir sistem geliştirmek istiyorum. baştan başlamak zorunda.

Örneğin, üstteki gezinmeye arka plan resimleri eklemek istiyorum. Bunu yapmanın 3 yolu var gibi görünüyor:

1. Bootstrap.css'deki .topbar sınıflarını değiştirin. Bundan özellikle hoşlanmıyorum çünkü çok sayıda .topbar öğem olacak ve hepsini aynı şekilde değiştirmek istemiyorum.
2. Arka plan resimlerimle yeni sınıflar oluşturun ve her iki stili de uygulayın (yeni ve önyükleme elemanıma). Bu, .topbar sınıfını ayrı sınıflara ayırarak ve ardından yalnızca benim özel sınıfım tarafından üzerine basılmayan parçaları kullanarak önlenebilecek stil çatışmaları yaratabilir. Yine bu, gerekli olduğunu düşündüğümden daha fazla çalışma gerektiriyor ve esnek olmasına rağmen, Twitter bir sonraki taksiti yayınladığında bootstrap.css'yi kolayca güncellememe izin vermiyor.
3. Özelleştirmeyi gerçekleştirmek için .LESS içindeki değişkenleri kullanın. Bu iyi bir yaklaşım gibi görünüyor, ancak .LESS'i kullanmadım, istemcide css derleme ve kod sürdürülebilirliği hakkında endişelerim var.

Bootstrap kullanmama rağmen, bu soru herhangi bir css şablonuna genelleştirilebilir.

Giriş için şimdiden teşekkürler.

Yapılması gereken en iyi şey.

1. twitter-bootstrap'i github'dan çatal ve yerel olarak klonlayın.

kütüphaneyi / çerçeveyi gerçekten hızlı bir şekilde değiştiriyorlar (dahili olarak ayrılıyorlar. Bazıları kitaplığı tercih ediyor, bunun bir çerçeve olduğunu söyleyebilirim, çünkü sayfanıza yüklediğiniz andan itibaren düzeninizi değiştirin). Pekala ... forking / klonlama, yeni gelecek sürümleri kolayca getirmenize izin verecektir.

2. bootstrap.css dosyasını değiştirmeyin

Bootstrap'i yükseltmeniz gerektiğinde hayatınızı zorlaştıracak (ve bunu yapmanız gerekecek).

3. Kendi css dosyanızı oluşturun ve orijinal önyükleme malzemelerini istediğinizde üzerine yazın

ile bir üst çubuk ayarlarlarsa, diyelim, color: black;ama onu beyaz yapmak istiyorsanız, bu üst çubuk için çok özel yeni bir seçici oluşturun ve bu kuralı belirli üst çubukta kullanın. Örneğin bir tablo için öyle olurdu <table class="zebra-striped mycustomclass">. Daha sonra css dosyanızı bootstrap.cssbildirirseniz, bu istediğiniz her şeyin üzerine yazacaktır.

Güncelleme 2019 - Bootstrap 4

Şimdi LESS yerine SASS kullanan 4.x için bu Bootstrap özelleştirme sorusunu tekrar gözden geçiriyorum. Genel olarak, Bootstrap'i özelleştirmenin 2 yolu vardır ...

1. Basit CSS Geçersiz Kılmaları

Özelleştirmenin bir yolu, Bootstrap CSS'yi geçersiz kılmak için CSS kullanmaktır. Sürdürülebilirlik için, CSS özelleştirmeleri ayrı bir custom.cssdosyaya konur , böylece bootstrap.cssdeğiştirilmeden kalır. Referans custom.cssizler sonrabootstrap.css işe geçersiz kılma için ...

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

Özel CSS'de gereken değişiklikleri eklemeniz yeterlidir. Örneğin...

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

Önce ( bootstrap.css)

Sonra (ile custom.css)

Özelleştirmeler yaparken CSS Özgüllüğünü anlamalısınız . custom.cssGibi belirli seçicileri kullanma ihtiyacını geçersiz kılar bootstrap.css.

Bootstrap Utility sınıflarından!important birini geçersiz kılmadığınız sürece özel CSS'de kullanmaya gerek olmadığını unutmayın . CSS özgüllüğü her zaman bir CSS sınıfının diğerini geçersiz kılması için çalışır.

2. SASS kullanarak özelleştirin

SASS'a aşina iseniz (ve bu yöntemi kullanmanız gerekiyorsa), Bootstrap'i kendinizinkiyle özelleştirebilirsiniz custom.scss. Bir yoktur Bootstrap docs bölümünde bunları açıklayacak dokümanlar ancak açıklamak yok Gözlerinde farklı mevcut değişkenleri şekilde nasıl custom.scss. Örneğin, vücut background-rengini değiştirelim #eeeeeeve değişim / geçersiz mavi primaryiçin içeriğe renk Bootstrap adlı $purpledeğişken ...

/* 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";

Bu aynı zamanda yeni özel sınıflar oluşturmak için de çalışır . Örneğin burada ben eklemek purpleoluşturur tema renklerine bütün için CSS btn-purple, text-purple, bg-purple, alert-purple, vb ...

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

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

SASS ile özelleştirmelerden sonra onları çalıştırmak için @import önyükleme yapmalısınız ! SASS, CSS'ye derlendiğinde ( bu, bir SASS derleyici düğüm sass, gulp-sass, npm web paketi vb. Kullanılarak yapılmalıdır ), ortaya çıkan CSS, özelleştirilmiş Bootstrap'tir. Eğer konum değil SUKDÖ'nün aşina, bu gibi bir araç kullanarak Bootstrap özelleştirebilirsiniz oluşturucu tema benim yarattığım.

Özel Bootstrap Demosu (SASS)

Not: 3.x'ten farklı olarak, Bootstrap 4.x resmi bir özelleştirme aracı sunmaz . Bununla birlikte, yalnızca ızgarayı CSS'yi indirebilir veya Bootstrap 4 CSS'yi istediğiniz gibi yeniden oluşturmak için başka bir 4.x özel oluşturma aracı kullanabilirsiniz.

İlgili:
SASS ile Bootstrap 4 nasıl genişletilir / değiştirilir (özelleştirilir) Bootstrap
birincil rengi nasıl değiştirilir?
Sass ile Bootstrap 4'te yeni renk stilleri seti nasıl oluşturulur Bootstrap
Nasıl Özelleştirilir

Resmi olarak tercih edilen yolun artık Less'i kullanmak ve bootstrap.css'yi dinamik olarak geçersiz kılmak (less.js kullanarak) veya bootstrap.css'yi yeniden derlemek (Node veya Less derleyicisini kullanarak) olduğunu düşünüyorum.

Gönderen Bootstrap docs , burada dinamik bootstrap.css stillerini geçersiz için:

En son Less.js dosyasını indirin ve bunun yolunu (ve Bootstrap'ı) <head>.

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

.Less dosyalarını yeniden derlemek için sadece kaydedin ve sayfanızı yeniden yükleyin. Less.js bunları derler ve yerel depoda saklar.

Veya özel stillerinizle (üretim ortamları için) yeni bir bootstrap.css'yi statik olarak derlemeyi tercih ederseniz:

LESS komut satırı aracını Düğüm aracılığıyla kurun ve aşağıdaki komutu çalıştırın:

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

Pabluez'in Aralık ayındaki cevabından bu yana, Bootstrap'i özelleştirmenin daha iyi bir yolu var.

Bootstrap.css dosyanızı oluşturmak için Bootswatch'ı kullanın

Bootswatch, normal Twitter Önyükleme'yi en son sürümden (önyükleme dizinine yüklediğiniz ne olursa olsun) oluşturur, ancak özelleştirmelerinizi de içe aktarır. Bu, HTML'niz hakkında herhangi bir değişiklik yapmanıza gerek kalmadan özel CSS'yi korurken Bootstrap'in en son sürümünü kullanmayı kolaylaştırır. Boostrap.css dosyalarını basitçe sallayabilirsiniz.

Önyükleme şablonunu şuradan kullanabilirsiniz:

http://www.initializr.com/

tüm önyükleme .less dosyalarını içerir. Daha sonra değişkenleri değiştirebilir / daha az dosyayı istediğiniz gibi güncelleyebilirsiniz ve css'i otomatik olarak derler. Dağıtırken daha az dosyayı css'e derleyin.

Bence en iyi seçenek, bootstrap.less, özel bir değişkenler.less dosyası ve kendi kurallarınızı içeren özel bir LESS dosyası derlemektir:

1. Kök klasörünüzdeki önyüklemeyi klonlayın: git clone https://github.com/twbs/bootstrap.git
2. "Bootstrap" olarak yeniden adlandırın
3. Bir package.json dosyası oluşturun: https://gist.github.com/jide/8440609
4. Bir Gruntfile.js oluşturun: https://gist.github.com/jide/8440502
5. "Daha az" bir klasör oluşturun
6. Bootstrap / less / variable.less dosyasını "less" klasörüne kopyalayın
7. Yazı tipi yolunu değiştirin: @icon-font-path: "../bootstrap/fonts/";
8. Bootstrap.less ve özel değişkenler.less dosyanızı içe aktaran "less" klasöründe özel bir style.less dosyası oluşturun: https://gist.github.com/jide/8440619
9. Çalıştırmak npm install
10. Çalıştırmak grunt watch

Artık değişkenleri istediğiniz şekilde değiştirebilir, özel style.less dosyanızdaki önyükleme kurallarını geçersiz kılabilirsiniz ve bir gün önyükleme klasörünü güncellemek isterseniz tüm önyükleme klasörünü değiştirebilirsiniz!

DÜZENLEME: Bu tekniği kullanarak bir Bootstrap şablon oluşturdum: https://github.com/jide/bootstrap-boilerplate

Geçenlerde Udacity'de son birkaç yıldır bunu nasıl yaptığım hakkında bir yazı yazdım . Bu yöntem, Bootstrap'i birleştirme çatışmaları, atılmalar vb. Olmadan istediğimiz zaman güncelleyebileceğimiz anlamına geliyordu.

Gönderi örneklerle daha derinlere iniyor, ancak temel fikir şudur:

• Bootstrap'in bozulmamış bir kopyasını saklayın ve harici olarak üzerine yazın.
• Kendi değişkenlerinizi dahil etmek için bir dosyayı (bootstrap değişkenleri.less) değiştirin.
• Site dosyanızı @include bootstrap.less yapın ve ardından geçersiz kılmalarınızı yapın.

Bu, LESS kullanmak ve bunu müşteriye göndermeden önce CSS'ye derlemek anlamına gelir (müşteri tarafı titizse DAHA AZ ve genellikle bundan kaçınırım), ancak bakım / yükseltme açısından SON DERECE iyidir ve DAHA AZ derleme almak gerçekten çok kolaydır. . Bağlantılı github kodunun grunt kullanan bir örneği vardır, ancak bunu başarmanın birçok yolu vardır - bu size aitse GUI'ler bile.

Bu çözümü kullandığınızda, örnek probleminiz şöyle görünecektir:

• Gezinme çubuğu rengini değişkenlerinizde @ navbar-inverse-bg ile değiştirin .less (bootstrap'ler değil)
• Bootstrap_overrides.less dosyanıza kendi gezinme çubuğu stillerinizi ekleyin ve ilerledikçe ihtiyacınız olan her şeyin üzerine yazın.
• Mutluluk.

Önyüklemenizi yükseltme zamanı geldiğinde, bozulmamış önyükleme kopyasını değiştirirsiniz ve her şey çalışmaya devam eder (bootstrap önemli değişiklikler yaparsa, geçersiz kılmalarınızı güncellemeniz gerekir, ancak bunu yine de yapmanız gerekir)

Gözden geçirmeli blog yayını burada .

Github'daki kod örneği burada .

Bootstrap ile DAHA AZ kullanın ...

LESS'in nasıl kullanılacağına ilişkin Bootstrap belgeleri.

(önceki cevaplardan bu yana taşındılar)