Jak używać bootstrap-theme.css z bootstrap 3?

174

Po pobraniu pełnego pakietu bootstrap 3 ze strony http://getbootstrap.com zauważyłem, że istnieje osobny plik css dla motywu. Jak to wykorzystać? Proszę wytłumacz?

Dodałem bootstrap-theme.cssdo mojego istniejącego projektu bootstrap, ale nie ma różnicy w wynikach.

html css twitter-bootstrap-3 Yuvaraj P
źródło

Odpowiedzi:

382

Po pobraniu Bootstrap 3.x, dostaniesz bootstrap.css i bootstrap-theme.css (nie wspominając o minified wersje tych plików, które są również obecne).

bootstrap.css

bootstrap.cssjest całkowicie stylizowany i gotowy do użycia, jeśli takie jest Twoje życzenie. Może jest trochę proste, ale jest gotowe i jest.

Nie musisz używać bootstrap-theme.css, jeśli nie chcesz i wszystko będzie dobrze.

bootstrap-theme.css

bootstrap-theme.cssjest właśnie tym, co stara się sugerować nazwa pliku: jest to motyw programu ładującego, który jest twórczo uważany za „motyw bootstrap”. Nazwa pliku trochę myli sprawę, ponieważ w bazie zastosowano bootstrap.cssjuż stylizację, a ja, na przykład, uznałbym te style za domyślne. Ale ten wniosek jest najwyraźniej błędny w świetle rzeczy, które powiedziano w sekcji przykładów dokumentacji Bootstrap w odniesieniu do tego bootstrap-theme.csspliku:

„Załaduj opcjonalny motyw Bootstrap, aby uzyskać wizualnie lepsze wrażenia”.

Powyższy cytat znajduje się tutaj http://getbootstrap.com/getting-started/#examples na miniaturze, która zawiera link do tej przykładowej strony http://getbootstrap.com/examples/theme/ . Chodzi o to, że bootstrap-theme.cssjest motyw bootstrap i jest to opcjonalne.

Motywy na BootSwatch.com

O motywach na BootSwatch.com: Te motywy nie są zaimplementowane jak bootstrap-theme.css. Motywy BootSwatch to zmodyfikowane wersje oryginału bootstrap.css. Dlatego zdecydowanie NIE powinieneś używać motywu z BootSwatch ORAZ bootstrap-theme.csspliku w tym samym czasie.

Motyw niestandardowy

O swoim własnym motywie niestandardowym: Możesz zmodyfikować bootstrap-theme.csspodczas tworzenia własnego motywu. Może to ułatwić wprowadzanie zmian stylizacji bez przypadkowego zerwania którejkolwiek z wbudowanych zalet Bootstrap.

dowcipność
źródło
68
To powinna być wybrana odpowiedź.
Patrick Cullen
11
Uwaga dotycząca Bootswatch.com jest bardzo pomocna. Dzięki.
Daniel Kmak
@Daniel ... ale powinien zostać zreformowany zgodnie z nowym kierunkiem twbs / bootstrap, aby mieć stabilną, spójną funkcję dla jego klientów tematycznych
Luca G. Soave
Czy plik bootstrap-theme.css nie jest bardziej nadpisaniem, tj. Bootstrap.css ustawia cię w taki sposób, że możesz używać bootstrap z wszystkimi odpowiednimi stylami. Bootstrap-theme.css służy do nadpisywania stylów BEZ zmiany podstawowego pliku css. Ważne jest tutaj to, że jeśli zaktualizujesz do bootstrap XX, zastąpisz podstawowy plik css i nie będziesz musiał się martwić utratą wszystkich dostosowań. Być może będziesz musiał poprawić plik motywu, ale to znacznie mniejszy problem. Może to, co mówiłeś.
Jacques
2
Najbardziej zagmatwane jest to, że jeśli używasz funkcji Customizing na stronie bootstrap ( getbootstrap.com/customize ), to umieszcza ona twoje dostosowania w bootstrap.css, a nie w pliku motywu. Ta strona nie zawiera również opcji modyfikowania czegokolwiek związanego z motywem (tm). O ile widzę, plik motywu po prostu dodaje kilka gradientów i cieni do wszystkiego i niewiele więcej robi.
C. Lista
90

Aby zapoznać się z przykładami stylów css, zobacz: http://getbootstrap.com/examples/theme/

Jeśli chcesz zobaczyć, jak wygląda przykład bez pliku bootstrap-theme.css, otwórz narzędzia programistyczne przeglądarki i usuń link z elementu <head> przykładu, a następnie możesz go porównać.

Wiem, że to stare pytanie, ale opublikowałem je na wypadek, gdyby ktoś szukał przykładu, jak to wygląda.

Aktualizacja

bootstrap.css = główny framework css (siatki, podstawowe style itp.)

bootstrap-theme.css= rozszerzona stylizacja (przyciski 3D, gradienty itp.). Ten plik jest opcjonalny i w ogóle nie wpływa na funkcjonalność bootstrapa, a jedynie poprawia wygląd.

Zaktualizuj 2

Wraz z wydaniem wersji 3.2.0 Bootstrap dodali opcję przeglądania motywu css na stronach dokumentacji. Jeśli przejdziesz do jednej ze stron dokumentacji ( css , komponenty , javascript ), powinieneś zobaczyć link „Podgląd motywu” na dole bocznego panelu nawigacyjnego, którego możesz użyć do włączania i wyłączania CSS motywu.

joshhunt
źródło
Dziękuję za śledzenie tego tematu, ponieważ Twoja odpowiedź była najbardziej sensowna. Zastanawiałem się, czy wiesz, czy po prostu zastąpiłbym zawartość bootstrap.cssmotywem z Bootswatch.com, tak jak mówi tam strona, i nadal mógłbym używać bootstrap-theme.cssnawet z motywem Bottswatch?
Refracted Paladin
3
bootstrap.css = główny framework css (siatki, podstawowe style itp.) bootstrap-theme.css = rozszerzona stylizacja (przyciski 3D itp.) Nigdy go nie używałem, ale właśnie się temu przyjrzałem i Bootswatch wydaje się edytować plik bootstrap.css do własnych potrzeb. Aby go użyć, wystarczy pobrać plik bootstrap.css z Bootswatch i użyć go. Nie używaj bootstrap-theme.css, ponieważ prawdopodobnie spowoduje to konflikt z css z Bootswatch.
joshhunt
Dzięki stary, doceniam odpowiedź! Właśnie to zauważyłem, po prostu nie dotarło tutaj. Bez modyfikacji nie możesz używać bootstrap-themez Bootswatch. I tak narobił bałaganu na mojej stronie.
Refracted Paladin
72

Po pierwsze, bootstrap-theme.cssjest niczym innym jak odpowiednikiem stylu Bootstrap 2.x w Bootstrap 3. Jeśli naprawdę chcesz go używać, po prostu dodaj go RAZEM z bootstrap.css(wersja zminimalizowana też będzie działać).

androfon
źródło
4
Pamiętaj, że jeśli używasz plików css z motywami bootstrap innych firm, lepiej skomentuj oficjalny plik bootstrap-theme.css.
Cheung
163
Dlaczego jest to akceptowana odpowiedź. To nawet nie jest odpowiedź. Przepraszam. Wszystko to mówi, jaki jest odpowiednik pliku w Bootstrap 2 i każdy, kto nie jest zaznajomiony z Bootstrap 2, będzie musiał teraz poszukać innej odpowiedzi, aby dowiedzieć się, co robi ten plik.
Mario Awad,
4
Ale to wszystko, co chcę wiedzieć.
uladzimir
9
Zgadzam się z @MarioAwad, to nie jest odpowiedź. Jest to również mylące, ponieważ myślałem, że to tylko obsługa starego css Bootstrap, co jest tylko częściowo prawdziwe.
Yannis Dran,
1
W BS 3.2, w tym motyw CSS rzeczywiście zmienia wygląd i styl, dodając odcienie 3D do przycisków i innych rzeczy. Zobacz odpowiedź joshhunt, aby uzyskać szczegółowe informacje.
RajV
31

Bootstrap-theme.css to dodatkowy plik CSS, którego możesz użyć jako opcjonalny. Daje efekty 3D na przyciskach i niektórych innych elementach.

Jowen
źródło
14

Jak stwierdzili inni, nazwa pliku bootstrap-theme.css jest bardzo myląca. Wybrałbym coś takiego jak bootstrap-3d.css lub bootstrap-fancy.css, które byłoby bardziej opisowe tego, co faktycznie robi. To, co świat postrzega jako „motyw Bootstrap”, można uzyskać dzięki BootSwatch, który jest zupełnie inną bestią.

Mimo to efekty są całkiem niezłe - gradienty, cienie i tym podobne. Niestety ten plik będzie siał spustoszenie w motywach BootSwatch, więc zdecydowałem się zagłębić w to, co trzeba zrobić, aby dobrze się z nimi bawić.

MNIEJ

Bootstrap-theme.css jest generowany z pliku theme.less w źródle Bootstrap. Dotyczy to elementów (od wersji 3.2.0 Bootstrap):

  • Lista przedmiotów
  • guziki
  • Zdjęcia
  • Listy rozwijane
  • Paski nawigacyjne
  • Alerty
  • Paski postępu
  • Lista grup
  • Panele
  • Wells

Plik theme.less zależy od:

@import "variables.less";
@import "mixins.less";

Kod używa kolorów zdefiniowanych w zmiennych. Brak w kilku miejscach, na przykład:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

Dlatego bootstrap-theme.css całkowicie psuje motywy BootSwatch. Dobrą wiadomością jest to, że motywy BootSwatch są również tworzone z plików variable.less, więc możesz po prostu zbudować bootstrap-theme.css dla swojego motywu BootSwatch.

Tworzenie pliku bootstrap-theme.css

Właściwym sposobem jest zaktualizowanie procesu tworzenia motywu, ale tutaj jest szybki i brudny sposób. Zastąp plik variable.less w źródle Bootstrap plikiem z motywu Bootswatch i skompiluj go, a następnie masz plik bootstrap-theme.css dla motywu Bootswatch.

Budowanie samego Bootstrapa

Tworzenie Bootstrap może wydawać się zniechęcające, ale w rzeczywistości jest bardzo proste:

  1. Pobierz kod źródłowy Bootstrap
  2. Pobierz i zainstaluj NodeJS
  3. Otwórz wiersz polecenia i przejdź do folderu źródłowego bootstrap. Wpisz „npm install”. Spowoduje to dodanie folderu „node_modules” do projektu i pobranie wszystkich potrzebnych elementów Node.
  4. Zainstaluj grunt globalnie (opcja -g), wpisując „npm install -g grunt-cli”
  5. Zmień nazwę folderu „dist” na „dist-orig”, a następnie odbuduj go, wpisując „grunt dist”. Teraz sprawdź, czy istnieje nowy folder „dist” zawierający wszystko, czego potrzebujesz, aby użyć niestandardowej kompilacji Bootstrap.

Gotowe. Widzisz, to było łatwe, prawda?

Ten facet
źródło
2

Wiem, że ten post jest stary, ale ...

  Jak wskazała „dowcipność”.

Informacje o własnym motywie niestandardowym Podczas tworzenia własnego motywu możesz zmodyfikować plik bootstrap-theme.css. Może to ułatwić wprowadzanie zmian stylizacji bez przypadkowego zerwania którejkolwiek z wbudowanych zalet Bootstrap.

  Widzę to tak, jak przez lata Bootstrap widział, że każdy chce czegoś nieco innego niż podstawowe style. Chociaż możesz zmodyfikować plik bootstrap.css, może to zepsuć rzeczy i może sprawić, że aktualizacja do nowszej wersji będzie naprawdę uciążliwa i czasochłonna. Pobieranie z „rozrywki” środków miejscu trzeba czekać na razie , że aktualizacje z twórcą tego tematu, duży jeśli czasami, prawda?

  Niektórzy budują własny plik „custom.css” i to jest w porządku, ale jeśli używasz „bootstrap-theme.css”, wiele rzeczy jest już zbudowanych, co pozwala na szybsze rozwijanie własnego motywu „bez” zakłócania rdzenia bootstrap .css. Po pierwsze, nie lubię przycisków 3D i gradientów przez większość czasu, więc zmień je za pomocą bootstrap-theme.css. Dodaj marginesy lub dopełnienie, zmień promień do przycisków i tak dalej ...

user1946683
źródło