Dostosowywanie szablonu Bootstrap CSS

109

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.

Anne
źródło
Cześć @Pabluez, tak, odpowiedziałeś, patrz poniżej. Przepraszam za opóźnienie w odpowiedzi - byłem zajęty wakacjami.
Anne
Wierzę, że ten artykuł pomoże ci prideparrot.com/blog/archive/2014/6/…
VJAI
1
Ten wątek ma charakter informacyjny stackoverflow.com/questions/10451317/ ...
Zim

Odpowiedzi:

127

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.

Pabluez
źródło
15
+1 Dobra odpowiedź. Wystarczy dodać do jego trzeciego punktu: możesz albo utworzyć nową klasę, aby zastosować ją jako dodatek do starej klasy, lub po prostu nadpisać / dodać właściwości, które chcesz zmienić.
Wex
to właśnie miałem na myśli w przypadku mycustomcss ... zamierzam zmienić to na mycustomclass, oprócz zebra-stripes (klasa bootstrap)
Pabluez
1
Czy jest coś, co możesz dodać do tego, jak to zrobić w „nowy” sposób less / sass? tj .: jak można utworzyć podklasę stylu „bootstrap”? dziedzicz wszystkie + ulepszenia. nie wiem jeszcze, czy jest to połączenie i rozszerzenie, czy ?? przepraszam, że jestem głupi.
Alex Grey
1
+ 1Dziękuję za odpowiedź. Robiłem to i działa, ale po prostu nie wydaje się to najbardziej zrównoważoną odpowiedzią. Jeśli otrzymam zaktualizowany plik bootstrap.css, być może będę musiał zmienić moje niestandardowe klasy nadpisywania, aby dostosować się do wszelkich zmian. Podobnie jak @alexgray, chciałbym zrozumieć sposób na zrobienie tego za pomocą less lub mixinów. Albo jeszcze lepszy sposób na utworzenie piaskownicy bez stosowanego bootstrapu, dzięki czemu mogę używać moich stylów bez konieczności nadpisywania bootstrapa. Jeśli ktoś ma dobry tutorial, przekaż go dalej
Anne
2
Jaki jest sens rozwidlania Bootstrap, jeśli zamierzasz dodawać zmiany tylko do własnego pliku CSS?
32

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)

wprowadź opis obrazu tutaj

Po (z custom.css)

wprowadź opis obrazu tutaj

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

Zim
źródło
Noice - co powiesz na ustawienie niestandardowego koloru tła, obramowania i czcionki dla nowego przycisku niestandardowego?
wykopaliska
Czy to normalne, że wygenerowany plik CSS ma około 160 KB (skompresowany 130 KB)? Czy na przykład można po prostu zastąpić kolor podstawowy?
Evgeny
@Zim Doceniam twórcę motywów, który stworzyłeś!
Kareem Jeiroudi
Uwaga: Pamiętaj, aby użyć Autoprefixera po kompilacji
kanlukasz
20

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
Symetryczny
źródło
jest to preferowany sposób :)
Srivathsa
10

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.

mdashx
źródło
czy mógłbyś opisać najlepszy sposób wykorzystania tego. Pobrałem program Bootswatch i skompilowałem mój css przy użyciu grunt swatch: theme, ale nadal zastanawiam się, które pliki mam gdzie umieścić. Próbuję dojść do sytuacji, w której mogę pobrać zaktualizowaną wersję motywu bootstrap lub bootstrap i używać go, ale nadal używam moich niestandardowych zmiennych. (Pracuję w VisualStudio2013 Pro, jeśli to robi różnicę). Nie chcę używać javascript do kompilacji. Na razie nic mi nie jest z uruchomieniem polecenia kompilacji. Później spróbuję znaleźć dobrą metodę automatyzacji. Dzięki Mark
mark1234
5

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.

Tomek
źródło
3

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

Jide
źródło
3

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 .

betaorbust
źródło
0

Użyj LESS z Bootstrap ...

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

(przenieśli się od czasu poprzednich odpowiedzi)

Dwanaście24
źródło
3
Jeśli dokumenty zostały przeniesione, edytuj pozostałe odpowiedzi, aby to odzwierciedlić
DeadChex
Jak na ironię, link w tej odpowiedzi jest martwy.
zacharydl