Jak mogę zmienić kolor tła paska nawigacyjnego Twitter Bootstrap 2.0.2? Jak mogę zmienić kolor wszystkich elementów paska nawigacyjnego, aby odzwierciedlić kolor tła?
colors
twitter-bootstrap
navbar
Tatuaż
źródło
źródło
Odpowiedzi:
Możesz nadpisać kolory bootstrap, w tym
.navbar-inner
klasę, kierując je we własnym arkuszu stylów, zamiast modyfikować arkusz stylów bootstrap.css, na przykład:Musisz tylko zmodyfikować wszystkie te style za pomocą własnego, a zostaną one odebrane, na przykład jak coś takiego, w którym eliminuję wszystkie efekty gradientowe i ustawiam jednolity czarny kolor tła:
Możesz skorzystać z takich narzędzi, jak Colorzilla Gradient Editor i stworzyć własne kolory gradientu dla wszystkich przeglądarek i zastąpić oryginalne kolory własnymi.
I jak wspomniałem w komentarzach, nie polecałbym modyfikowania arkusza stylów bootstrap.css bezpośrednio, ponieważ wszystkie zmiany zostaną utracone po zaktualizowaniu arkusza stylów (aktualna wersja to v2.0.2 ), więc zaleca się włączenie wszystkich Twoje zmiany we własnym arkuszu stylów, w tandemie z arkuszem stylów bootstrap.css. Pamiętaj jednak, aby nadpisać wszystkie odpowiednie właściwości, aby zachować spójność między przeglądarkami.
źródło
background-image: none;
sześć razy?Doskonałym źródłem informacji na temat tworzenia motywów bootstrap jest: bootswatch.com . Ma ładne przykłady i pokazuje również kod. Krótko mówiąc, używają lessc do przekompilowania bootstrap.css do nowego color-theme.css. Zaletą ich podejścia jest to, że jest on oparty na bootstrapie, więc kiedy bootstrap jest aktualizowany, wystarczy ponownie skompilować.
Linki dotyczące używania lessc i bootstrap:
źródło
Jeśli nie masz czasu, aby dowiedzieć się „mniej” lub zrobić to poprawnie, oto brudny hack ...
Dodaj to powyżej, gdzie renderujesz HTML paska nawigacji bootstrap - zaktualizuj kolory zgodnie z wymaganiami.
źródło
Możesz pobrać niestandardową wersję bootstrapa i ustawić @navbarBackground na żądany kolor.
http://twitter.github.com/bootstrap/customize.html
źródło
Używam Bootstrap w wersji 3.2.0 i wygląda na to, że .navbar-inner już nie istnieje.
Tutaj rozwiązania sugerujące nadpisanie .navbar-inner nie zadziałały u mnie - kolor pozostał ten sam.
Kolor zmienił się tylko wtedy, gdy nadpisałem .navbar, jak pokazano poniżej:
źródło
Najlepszym obecnie sposobem na to samo byłoby zainstalowanie LESS kompilatora wiersza poleceń przy użyciu
Gdy to zrobisz, przejdź do mniejszego folderu w katalogu, a następnie edytuj zmienne pliku. Bez i możesz zmienić wiele zmiennych zgodnie z tym, czego potrzebujesz, w tym kolor paska nawigacji
Gdy to zrobisz, przejdź do katalogu bootstrap i uruchom polecenie make.
źródło
Jeśli używasz MNIEJ, możesz użyć Mixinów, aby uzyskać mniej kodu. Tutaj dodam gradient, border i border-radius:
* Jeśli używasz rails gem, twitter-bootstrap-rails, robię to bezpośrednio w pliku bootstrap_and_overrides.css.less *
źródło
to jest to, co robię
działa dobrze dla wszystkich nawigatorów, możesz zobaczyć demo tutaj http://caverne.fr na górze
źródło
W linii bootstrap.css 4784 widzimy:
Aby uzyskać pożądany efekt, musisz usunąć wszystkie deklaracje właściwości „background-image”.
źródło
Czy brzytwa Occama nie powiedziałaby, żeby robić to, dopóki nie będziesz potrzebować czegoś bardziej złożonego? To trochę hack, ale może odpowiadać potrzebom kogoś, kto chce szybko naprawić.
źródło
Jeśli używasz wersji LESS lub SASS programu Bootstrap. Najbardziej efektywnym sposobem jest zmiana nazwy zmiennej w pliku LESS lub SASS.
To zdecydowanie najłatwiejszy i najbardziej efektywny sposób zmiany paska nawigacyjnego Bootstraps. Nie musisz pisać nadpisań, a kod pozostaje czysty.
źródło
Możesz dostosować własną wersję na oficjalnej stronie Bootstrap .
źródło
Właściwie po prostu nadpisuję wszystko, co chcę zmienić w site.css, powinieneś załadować site.css po załadowaniu, aby nadpisał klasy. To, co teraz zrobiłem, to właśnie stworzyłem własne zajęcia z moim własnym małym motywem bootstrap. Takie małe rzeczy
W ten sam sposób zmieniłem również błędy walidacji.
źródło