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.
Odpowiedzi:
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.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.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.
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.
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.
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.
bootstrap.cssmotywem z Bootswatch.com, tak jak mówi tam strona, i nadal mógłbym używać bootstrap-theme.cssnawet z motywem Bottswatch?
bootstrap-themez Bootswatch. I tak narobił bałaganu na mojej stronie.
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ć).
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ć.
Bootstrap-theme.css jest generowany z pliku theme.less w źródle Bootstrap. Dotyczy to elementów (od wersji 3.2.0 Bootstrap):
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.
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.
Tworzenie Bootstrap może wydawać się zniechęcające, ale w rzeczywistości jest bardzo proste:
Gotowe. Widzisz, to było łatwe, prawda?
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 ...