Czy można zmienić kolor podstawowy bootstrapa na kolor marki? W moim przypadku używam papierowego motywu Bootswatch.
css
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
ashishjmeshram
źródło
źródło
Odpowiedzi:
Aktualizacja 2020 dla Bootstrap 4
Aby zmienić podstawowy lub dowolny z kolorów motywu w Bootstrap 4 SASS, ustaw odpowiednie zmienne przed importowaniem
bootstrap.scss
. To pozwala twojemu niestandardowemu scss nadpisać! Domyślne wartości ...$primary: purple; $danger: red; @import "bootstrap";
Demo: https://codeply.com/go/f5OmhIdre3
W niektórych przypadkach możesz chcieć ustawić nowy kolor z innej istniejącej zmiennej Bootstrap. W tym celu @ zaimportuj najpierw funkcje i zmienne, aby można było się do nich odwoływać w dostosowaniach ...
/* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; $theme-colors: ( primary: $purple ); /* finally, import Bootstrap */ @import "bootstrap";
Demo: https://codeply.com/go/lobGxGgfZE
Zobacz także: ta odpowiedź , ta odpowiedź lub zmiana koloru przycisku w (CSS lub SASS)
Możliwa jest również zmiana koloru podstawowego za pomocą samego CSS, ale wymaga to wielu dodatkowych CSS, ponieważ istnieje wiele
-primary
odmian (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, itp. ...), a niektóre z tych klas mają niewielkie różnice kolorystyczne w granicach, najechaniu kursorem i stanach aktywnych. Dlatego jeśli musisz używać CSS, lepiej jest użyć jednego docelowego komponentu, takiego jak zmiana podstawowego koloru przycisku .Te rozwiązania będą działać również dla Bootstrap 5 alpha
źródło
npm
„sgulp
, aby zakończyć etap kompilacji.można się udać na dwa sposoby
http://getbootstrap.com/customize/
i zmień kolor w tych ustawieniach i pobierz dostosowany bootstrap.
Lub możesz użyć Sass w tej wersji https://github.com/twbs/bootstrap-sass i zaimportować do swoich zasobów sass / stylesheets / _bootstrap.scss, ale przed zaimportowaniem możesz zmienić domyślne kolory zmiennych
//== Colors // //## Gray and brand colors for use across Bootstrap. $gray-base: #000 !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; // #333 $gray: lighten($gray-base, 33.5%) !default; // #555 $gray-light: lighten($gray-base, 46.7%) !default; // #777 $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for `<body>`. $body-bg: #fff !default; //** Global text color on `<body>`. $text-color: $gray-dark !default; //** Global textual link color. $link-color: $brand-primary !default; //** Link hover color set via `darken()` function. $link-hover-color: darken($link-color, 15%) !default; //** Link hover decoration. $link-hover-decoration: underline !default;
i skompiluj wynik
źródło
!default
flagi, chyba że istnieją inne pliki niestandardowy styl, który daje powód, aby nie.Stworzyłem to narzędzie: https://lingtalfi.com/bootstrap4-color-generator , po prostu umieszczasz podstawowy w pierwszym polu, następnie wybierasz kolor i klikasz generuj.
Następnie skopiuj wygenerowany kod scss lub css i wklej go do pliku o nazwie my-colors.scss lub my-colors.css (lub jak chcesz).
Po skompilowaniu pliku scss do css , możesz dołączyć ten plik css PO bootstrapowym CSS i będziesz gotowy .
Cały proces zajmuje około 10 sekund, jeśli zrozumiesz, o co chodzi, pod warunkiem, że plik my-colors.scss jest już utworzony i zawarty w tagu head.
Uwaga: tego narzędzia można użyć do nadpisania domyślnych kolorów programu bootstrap (podstawowego, drugorzędnego, niebezpieczeństwa, ...), ale można również tworzyć kolory niestandardowe, jeśli chcesz (niebieski, zielony, trójskładnikowy, ...).
Uwaga 2: to narzędzie zostało stworzone do pracy z bootstrapem 4 (czyli na razie nie ma żadnej kolejnej wersji).
źródło
Każdy element z tagiem „primay” ma kolor @ brand-primary. Jedną z opcji, aby to zmienić, jest dodanie dostosowanego pliku css, jak poniżej:
.my-primary{ color: lightYellow ; background-color: red; } .my-primary:focus, .my-primary:hover{ color: yellow ; background-color: darkRed; } a.navbar-brand { color: lightYellow ; } .navbar-brand:hover{ color: yellow; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <br> <nav class="navbar navbar-dark bg-primary mb-3"> <div class="container"> <a class="navbar-brand" href="/">Default (navbar-dark bg-primary)</a> </div> </nav> <button type="button" class="btn btn-primary">Default (btn btn-primary)</button> </div> <br> <div class="container"> <nav class="navbar my-primary mb-3"> <div class="container"> <a class="navbar-brand" href="/">Customized (my-primary)</a> </div> </nav> <button type="button" class="btn my-primary">Customized (btn my-primary)</button> </div>
Aby uzyskać więcej informacji na temat dostosowanych plików css z bootstrapem, tutaj znajduje się pomocne łącze: https://bootstrapbay.com/blog/bootstrap-button-styles/ .
źródło
Bootstrap 4
Oto, co zadziałało dla mnie:
Stworzyłem własny
_custom_theme.scss
plik o zawartości podobnej do:/* To simplify I'm only changing the primary color */ $theme-colors: ( "primary":#ffd800);
Dodałem go na początek pliku
bootstrap.scss
i ponownie skompilowałem (w moim przypadku miałem go w folderze o nazwie! Scss)@import "../../../!scss/_custom_theme.scss"; @import "functions"; @import "variables"; @import "mixins";
źródło
To może być trochę stare pytanie, ale chcę podzielić się najlepszymi sposobami dostosowywania bootstrapa. Istnieje narzędzie online o nazwie
bootstrap.build
https://bootstrap.build/app . Działa świetnie i nie wymaga instalacji ani konfiguracji narzędzi do budowania!źródło
Prawidłowy sposób zmiany domyślnego koloru podstawowego w Bootstrap 4.x za pomocą SASS lub innych kolorów, takich jak drugorzędny, sukces i tak dalej.
Utwórz następujący plik SASS i zaimportuj Bootstrap SASS zgodnie ze wskazówkami:
// (Required) Import Bootstrap @import "bootstrap/functions"; @import "bootstrap/variables"; @import "bootstrap/mixins"; $primary: blue; $secondary: green; $my-color: red; $theme-colors: ( primary: $primary, secondary: $secondary, my-color: $my-color ); // Add below your SASS or CSS code // (Required) Import Bootstrap @import "bootstrap/bootstrap";
źródło
Za pomocą SaSS
zmień kolor marki
$brand-primary:#some-color;
zmieni to podstawowy kolor w całym interfejsie użytkownika.
Używając css -
przypuśćmy, że chcesz zmienić podstawowy kolor przycisku
btn.primary{ background:#some-color; }
przeszukaj element i dodaj nową regułę css / sass w nowym pliku i dołącz ją po załadowaniu css bootstrap.
źródło
Zasady Bootstrap 4
Większość odpowiedzi tutaj jest mniej więcej poprawnych, ale wszystkie zawierają pewne problemy (dla mnie). W końcu wyszukując w Google znalazłem poprawną procedurę, jak podano w dedykowanym dokumencie bootstrap: https://getbootstrap.com/docs/4.0/getting-started/theming/ .
Załóżmy, że bootstrap jest zainstalowany w
node_modules/bootstrap
.A. Utwórz
your_bootstrap.scss
plik:@import "your_variables_theme"; // here your variables // mandatory imports from bootstrap src @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables @import "../node_modules/bootstrap/scss/mixins"; // optional imports from bootstrap (do not import 'bootstrap.scss'!) @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; etc...
B. W tym samym folderze utwórz plik
_your_variables_theme.scss
plik.C. Dostosuj zmienne bootstrap w
_your_variables_theme.scss
pliku zgodnie z następującymi zasadami:Zmienne domyślne są dostępne w
node_modules/bootstrap/scss/variables.scss
.źródło
Bootstrap 5
W przypadku bootstrap 5 możesz po prostu przejść do głównego pliku scss i dodać:
$primary: #d93eba; $body-bg: #fff; $secondary: #8300d9;
lub cokolwiek chcesz wprowadzić ...
I nie zapomnij zaimportować bootstrap zaraz potem.
Twój ostateczny plik main.scss powinien wyglądać następująco:
$primary: #d93eba; $body-bg: #fff; $secondary: #8300d9; @import "~node_modules/bootstrap/scss/bootstrap";
źródło
Od Bootstrap 4 możesz łatwo zmienić podstawowy kolor swojego Bootstrap , pobierając prosty plik CSS na BootstrapColor.net . Nie musisz znać SASS, a plik CSS jest gotowy do użycia w Twojej witrynie. Możesz wybrać żądany kolor, taki jak niebieski, indygo, fioletowy, różowy, czerwony, pomarańczowy, żółty, zielony, turkusowy lub cyjan.
źródło
źródło
-primary
odniesień do koloru tego samego koloru straci zamierzonych wariacje na granicy, najedź, aktywny, etc .. kolorach, ponieważ są one odmianę pierwotnego koloru tła.To bardzo proste rozwiązanie.
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
zamień klasę bg-dark na bg-custom .
W CSS
.bg-custom { background-color: red; }
źródło
Tak, proponuję otworzyć plik .css, przejrzeć stronę i znaleźć kod koloru, który chcesz zmienić, i znaleźć wszystko i zamienić (w zależności od edytora tekstu) na żądany kolor. Zrób to ze wszystkimi kolorami, które chcesz zmienić
źródło