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:
- 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.
- 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ęść.
- 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.
Odpowiedzi:
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óźniejbootstrap.css
, spowoduje to nadpisanie wszystkiego, co chcesz.źródło
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.css
pliku, dzięki czemubootstrap.css
pozostają niezmodyfikowane. Odniesienie docustom.css
następującego po tym,bootstrap.css
aby zastąpienia działały ...Po prostu dodaj potrzebne zmiany w niestandardowym CSS. Na przykład...
Przed (
bootstrap.css
)Po (z
custom.css
)Dokonując dostosowań, powinieneś zrozumieć specyfikę CSS . Zastępuje
custom.css
konieczność użycia selektorów tak specyficznych, jakbootstrap.css
.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 wcustom.scss
. Na przykład zmieńmy kolor tła treści na#eeeeee
i zmień / zastąpmy niebieskiprimary
kolor kontekstowy na$purple
zmienną Bootstrap ...Działa to również przy tworzeniu nowych klas niestandardowych . Na przykład tutaj dodaję
purple
do kolorów motywu, który tworzy wszystkie CSS nabtn-purple
,text-purple
,bg-purple
,alert-purple
, itd ...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
źródło
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:
Lub jeśli wolisz statycznie skompilować nowy plik bootstrap.css ze swoimi niestandardowymi stylami (dla środowisk produkcyjnych):
źródło
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.
źródło
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.
źródło
Moim zdaniem najlepszą opcją jest skompilowanie niestandardowego pliku LESS, w tym pliku bootstrap.less, pliku niestandardowych zmiennych.less i własnych reguł:
git clone https://github.com/twbs/bootstrap.git
@icon-font-path: "../bootstrap/fonts/";
npm install
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
źródło
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:
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:
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 .
źródło
Użyj LESS z Bootstrap ...
Oto dokumentacja Bootstrap opisująca, jak używać LESS
(przenieśli się od czasu poprzednich odpowiedzi)
źródło