kolor paska nawigacyjnego w Twitter Bootstrap

113

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?

Tatuaż
źródło
1
Rozwiązany. Dokonano zmian w pliku bootstrap.css .navbar-inner {background-color: # 2c2c2c; zmienił kolor tła, skomentował wszystko inne. Dzięki.
Gattoo
12
nie zaleca się modyfikowania głównego arkusza stylów css bootstrap tylko dlatego, że po zaktualizowaniu arkusza stylów wszystkie zmiany zostaną utracone, więc po prostu umieść wszelkie potrzebne modyfikacje we własnym arkuszu stylów.
Andres Ilich
Dzięki Andres, jakie są inne sposoby zmiany zachowania Bootstrapa? Pasek nawigacyjny jest uciążliwy dla większości witryn, ponieważ ludzie po prostu nie są w stanie uwierzyć, że sieć jest tak dobra zarówno pod względem estetyki, jak i funkcjonalności.
Gattoo
4
W rzeczywistości możesz nadpisać większość reguł ładowania początkowego we własnym arkuszu stylów, nie musisz w ogóle dotykać arkusza stylów bootstrap.css. W ten sposób, gdy bootstrap zostanie zaktualizowany, możesz po prostu zaktualizować to od razu, a wszystkie zmiany pozostaną, a także w ten sposób możesz nadpisać style boostrap, aby pasowały do ​​twoich potrzeb (czy to czcionek, czy kolorów) twojej witryny.
Andres Ilich
O wiele prostsza odpowiedź: stackoverflow.com/questions/18529274/…
Chris Johnson

Odpowiedzi:

134

Możesz nadpisać kolory bootstrap, w tym .navbar-innerklasę, kierując je we własnym arkuszu stylów, zamiast modyfikować arkusz stylów bootstrap.css, na przykład:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

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:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

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.

Andres Ilich
źródło
2
background-image: none;sześć razy?
Nowaker
2
@DamianNowak woh, właśnie to zauważyłem, dzięki za wskazówkę: D ultimate brain fart.
Andres Ilich,
Dziękuję Ci. Doprowadzało mnie do szału, że nie mogłem ustawić koloru tła na cokolwiek i zastosować go do całego paska nawigacyjnego.
Automatico
30

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:

Aleksandra Posławskiego
źródło
Wspaniałe zasoby Alexander. Wielkie dzięki.
Gattoo
1
Dzięki za link do Bootswatch :)
Akshat Jiwan Sharma
6

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.

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>
JGilmartin
źródło
4

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:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}
paulo62
źródło
3

Najlepszym obecnie sposobem na to samo byłoby zainstalowanie LESS kompilatora wiersza poleceń przy użyciu

$ npm install -g less jshint recess uglify-js

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

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

Gdy to zrobisz, przejdź do katalogu bootstrap i uruchom polecenie make.

gauravmunjal
źródło
2

Jeśli używasz MNIEJ, możesz użyć Mixinów, aby uzyskać mniej kodu. Tutaj dodam gradient, border i border-radius:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* Jeśli używasz rails gem, twitter-bootstrap-rails, robię to bezpośrednio w pliku bootstrap_and_overrides.css.less *

Ryan
źródło
2

to jest to, co robię

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

działa dobrze dla wszystkich nawigatorów, możesz zobaczyć demo tutaj http://caverne.fr na górze

user2545728
źródło
1

W linii bootstrap.css 4784 widzimy:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

Aby uzyskać pożądany efekt, musisz usunąć wszystkie deklaracje właściwości „background-image”.

Roopkunwar
źródło
1

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ć.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}
Krishan Gupta
źródło
1

Jeśli używasz wersji LESS lub SASS programu Bootstrap. Najbardziej efektywnym sposobem jest zmiana nazwy zmiennej w pliku LESS lub SASS.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

To zdecydowanie najłatwiejszy i najbardziej efektywny sposób zmiany paska nawigacyjnego Bootstraps. Nie musisz pisać nadpisań, a kod pozostaje czysty.

Ronak Jain
źródło
0

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

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

W ten sam sposób zmieniłem również błędy walidacji.

Michael
źródło