Dostosowywanie szablonu Bootstrap CSS

Właśnie zaczynam korzystać z Bootstrap z Twittera i zastanawiam się, jakie są „najlepsze praktyki” w zakresie dostosowywania. Chcę opracować system, który będzie wykorzystywał całą moc szablonu css (Bootstrap lub inny), był całkowicie (i łatwo) modyfikowalny, zrównoważony (tj. Kiedy kolejna wersja Bootstrap zostanie wydana z Twittera, nie wiem) nie muszę zaczynać od nowa.

Na przykład chcę dodać obrazy tła do górnego menu nawigacyjnego. Wygląda na to, że można to zrobić na 3 sposoby:

1. Zmodyfikuj klasy .topbar w pliku bootstrap.css. Nie podoba mi się to specjalnie, ponieważ będę miał wiele elementów .topbar i niekoniecznie chcę je wszystkie modyfikować w ten sam sposób.
2. Utwórz nowe klasy z moich obrazów tła i zastosuj oba style (nowy i bootstrap do mojego elementu). Może to powodować konflikty stylów, których można by uniknąć, dzieląc klasę .topbar na oddzielne klasy, a następnie używając tylko elementów, na które nie nadepnęła moja klasa niestandardowa. Ponownie wymaga to więcej pracy, niż myślę, że powinno być konieczne i chociaż jest elastyczne, nie pozwoli mi łatwo zaktualizować bootstrap.css, gdy Twitter wyda kolejną część.
3. Użyj zmiennych w .LESS, aby osiągnąć dostosowanie. Wydaje się, że to dobre podejście, ale ponieważ nie używałem .MNIEJ mam obawy co do kompilowania css na kliencie i trwałości kodu.

Chociaż używam Bootstrap, to pytanie można uogólnić na dowolny szablon css.

Z góry dziękuję za wkład.

Najlepszą rzeczą do zrobienia jest.

1. rozwidlenie twitter-bootstrap z github i klonowanie lokalnie.

bardzo szybko zmieniają bibliotekę / framework (różnią się wewnętrznie. Niektórzy wolą bibliotekę, powiedziałbym, że to framework, ponieważ zmieniaj układ od momentu załadowania go na stronę). Cóż ... rozwidlanie / klonowanie pozwoli ci łatwo pobrać nowe nadchodzące wersje.

2. Nie modyfikuj pliku bootstrap.css

To skomplikuje twoje życie, gdy będziesz musiał uaktualnić bootstrap (i będziesz musiał to zrobić).

3. Stwórz swój własny plik css i nadpisz, kiedy chcesz, oryginalny plik bootstrap

jeśli ustawią górny pasek, powiedzmy, color: black;ale chcesz , aby był biały, utwórz nowy, bardzo szczegółowy selektor dla tego górnego paska i użyj tej reguły na określonym górnym pasku. Na przykład byłby to stół <table class="zebra-striped mycustomclass">. Jeśli zadeklarujesz plik css później bootstrap.css, spowoduje to nadpisanie wszystkiego, co chcesz.

Aktualizacja 2019 - Bootstrap 4

Wracam do tego pytania dostosowującego Bootstrap do 4.x, który teraz używa SASS zamiast MNIEJ. Ogólnie rzecz biorąc, istnieją 2 sposoby dostosowania Bootstrap ...

1. Proste przesłonięcia CSS

Jednym ze sposobów dostosowania jest po prostu użycie CSS do zastąpienia Bootstrap CSS. Aby ułatwić konserwację, dostosowania CSS są umieszczane w osobnym custom.csspliku, dzięki czemu bootstrap.csspozostają niezmodyfikowane. Odniesienie do custom.cssnastępującego po tym, bootstrap.cssaby zastąpienia działały ...

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

Po prostu dodaj potrzebne zmiany w niestandardowym CSS. Na przykład...

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

Przed ( bootstrap.css)

Po (z custom.css)

Dokonując dostosowań, powinieneś zrozumieć specyfikę CSS . Zastępuje custom.csskonieczność użycia selektorów tak specyficznych, jak bootstrap.css.

Zauważ, że nie ma potrzeby używania !importantw niestandardowym CSS, chyba że nadpisujesz jedną z klas Bootstrap Utility . Specyfika CSS zawsze działa, gdy jedna klasa CSS zastępuje inną.

2. Dostosuj za pomocą SASS

Jeśli znasz SASS (i powinieneś używać tej metody), możesz dostosować Bootstrap za pomocą własnego custom.scss. W dokumentacji Bootstrap znajduje się sekcja wyjaśniająca to, jednak dokumentacja nie wyjaśnia, jak wykorzystać istniejące zmienne w custom.scss. Na przykład zmieńmy kolor tła treści na #eeeeeei zmień / zastąpmy niebieski primarykolor kontekstowy na $purplezmienną Bootstrap ...

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

Działa to również przy tworzeniu nowych klas niestandardowych . Na przykład tutaj dodaję purpledo kolorów motywu, który tworzy wszystkie CSS na btn-purple, text-purple, bg-purple, alert-purple, itd ...

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

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

Z SASS musisz @import bootstrap po dostosowaniach, aby działały! Po skompilowaniu SASS do CSS ( należy to zrobić za pomocą kompilatora SASS node-sass, gulp-sass, npm webpack itp. ), Wynikowy CSS jest dostosowanym bootstrapem. Jeśli nie znasz SASS, możesz dostosować Bootstrap za pomocą narzędzia takiego jak ten stworzony przeze mnie kreator motywów .

Niestandardowe demo Bootstrap (SASS)

Uwaga: w przeciwieństwie do 3.x, Bootstrap 4.x nie oferuje oficjalnego narzędzia do dostosowywania. Możesz jednak pobrać tylko CSS grid lub użyć innego niestandardowego narzędzia do budowania w wersji 4.x, aby ponownie zbudować CSS Bootstrap 4 zgodnie z potrzebami.

Powiązane:
Jak rozszerzyć / zmodyfikować (dostosować) Bootstrap 4 z SASS
Jak zmienić podstawowy kolor bootstrapa?
Jak stworzyć nowy zestaw stylów kolorów w Bootstrap 4 za pomocą sass
Jak dostosować Bootstrap

Myślę, że oficjalnie preferowanym sposobem jest teraz użycie Less i albo dynamiczne zastąpienie pliku bootstrap.css (przy użyciu less.js), albo ponowne skompilowanie bootstrap.css (przy użyciu Node lub kompilatora Less).

Z dokumentacji Bootstrap , oto jak dynamicznie przesłonić style bootstrap.css:

Pobierz najnowszy Less.js i dołącz do niego ścieżkę (i plik Bootstrap) w pliku <head>.

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

Aby ponownie skompilować pliki .less, po prostu zapisz je i ponownie załaduj swoją stronę. Less.js kompiluje je i przechowuje w pamięci lokalnej.

Lub jeśli wolisz statycznie skompilować nowy plik bootstrap.css ze swoimi niestandardowymi stylami (dla środowisk produkcyjnych):

Zainstaluj LESS narzędzie wiersza poleceń za pośrednictwem Node i uruchom następujące polecenie:

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

Od odpowiedzi Pablueza w grudniu, jest teraz lepszy sposób na dostosowanie Bootstrapa.

Użyj: Bootswatch, aby wygenerować plik bootstrap.css

Bootswatch buduje normalny Twitter Bootstrap z najnowszej wersji (cokolwiek zainstalujesz w katalogu bootstrap), ale także importuje twoje dostosowania. Ułatwia to korzystanie z najnowszej wersji Bootstrap przy zachowaniu niestandardowego CSS, bez konieczności zmiany czegokolwiek w kodzie HTML. Możesz po prostu kołysać plikami boostrap.css.

Możesz użyć szablonu bootstrap z

http://www.initializr.com/

który obejmuje wszystkie pliki bez ładowania początkowego. Następnie możesz zmienić zmienne / zaktualizować mniej plików, jak chcesz, a to automatycznie skompiluje css. Podczas wdrażania skompiluj mniejszy plik do css.

Moim zdaniem najlepszą opcją jest skompilowanie niestandardowego pliku LESS, w tym pliku bootstrap.less, pliku niestandardowych zmiennych.less i własnych reguł:

1. Sklonuj bootstrap w folderze głównym: git clone https://github.com/twbs/bootstrap.git
2. Zmień nazwę na „bootstrap”
3. Utwórz plik package.json: https://gist.github.com/jide/8440609
4. Utwórz plik Gruntfile.js: https://gist.github.com/jide/8440502
5. Utwórz folder „mniej”
6. Skopiuj plik bootstrap / less / variable.less do folderu „less”
7. Zmień ścieżkę czcionki: @icon-font-path: "../bootstrap/fonts/";
8. Utwórz niestandardowy plik style.less w folderze „less”, który importuje plik bootstrap.less i niestandardowy plik variable.less: https://gist.github.com/jide/8440619
9. Biegać npm install
10. Biegać grunt watch

Teraz możesz modyfikować zmienne w dowolny sposób, nadpisywać reguły ładowania początkowego w swoim własnym pliku style.less, a jeśli pewnego dnia będziesz chciał zaktualizować program bootstrap, możesz zastąpić cały folder bootstrap!

EDYCJA: utworzyłem konfigurację Bootstrap przy użyciu tej techniki: https://github.com/jide/bootstrap-boilerplate

Niedawno napisałem post o tym, jak robię to w Udacity przez ostatnie kilka lat. Ta metoda oznaczała, że ​​mogliśmy aktualizować Bootstrap, kiedy tylko chcieliśmy, bez konfliktów scalania, wyrzucania pracy itp.

Post jest bardziej szczegółowy i zawiera przykłady, ale podstawowa idea jest taka:

• Zachowaj nieskazitelną kopię bootstrap i nadpisz ją zewnętrznie.
• Zmodyfikuj jeden plik (zmienne bootstrap.less), aby dołączyć własne zmienne.
• Utwórz plik witryny @include bootstrap.less, a następnie nadpisania.

Oznacza to użycie MNIEJSZYCH i kompilowanie ich do CSS przed wysłaniem do klienta (po stronie klienta MNIEJ, jeśli jest to skomplikowane, i generalnie unikam tego), ale jest to BARDZO dobre dla łatwości utrzymania / aktualizacji, a uzyskanie MNIEJ kompilacji jest naprawdę łatwe . Powiązany kod github ma przykład wykorzystujący grunt, ale jest na to wiele sposobów - nawet GUI, jeśli to twoja sprawa.

Korzystając z tego rozwiązania, Twój przykładowy problem wyglądałby następująco:

• Zmień kolor paska nawigacyjnego za pomocą @ navbar-inverse-bg w swoich zmiennych. Bez (nie w bootstrapie)
• Dodaj własne style paska nawigacyjnego do pliku bootstrap_overrides.less, nadpisując wszystko, czego potrzebujesz.
• Szczęście.

Kiedy przychodzi czas na aktualizację bootstrapu, po prostu zamień nieskazitelną kopię bootstrap i wszystko będzie nadal działać (jeśli bootstrap wprowadzi poważne zmiany, będziesz musiał zaktualizować swoje nadpisania, ale i tak musiałbyś to zrobić)

Post na blogu z przewodnikiem jest tutaj .

Przykład kodu na github jest tutaj .

Użyj LESS z Bootstrap ...

Oto dokumentacja Bootstrap opisująca, jak używać LESS

(przenieśli się od czasu poprzednich odpowiedzi)