Jak zmienić kolor podstawowy bootstrapa?

Question 1

Czy można zmienić kolor podstawowy bootstrapa na kolor marki? W moim przypadku używam papierowego motywu Bootswatch.

Question 2

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 -primaryodmian (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

Question 3

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

Question 4

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

Question 5

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>

Rozwiń fragment

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

Question 6

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.scssi 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";

Question 7

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!

Question 8

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";

Question 9

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.

Question 10

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.scssplik:

@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.scsspliku zgodnie z następującymi zasadami:

Skopiuj i wklej zmienne _variables.scssw razie potrzeby, zmodyfikuj ich wartości i usuń flagę! Default . Jeśli zmienna została już przypisana, nie zostanie ponownie przypisana przez wartości domyślne w Bootstrap.

Przesłonięcia zmiennych w tym samym pliku Sass mogą występować przed lub po domyślnych zmiennych. Jednak podczas zastępowania plików Sass, przesłonięcia muszą nastąpić przed zaimportowaniem plików Sass Bootstrap .

Zmienne domyślne są dostępne w node_modules/bootstrap/scss/variables.scss.

Question 11

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";

Question 12

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.

Question 13

Nie można zmienić koloru w pliku cdn.
Pobierz plik bootstrap.
Wyszukaj plik bootstrap.css.
otwórz ten plik (bootstrsap.css) i wyszukaj „podstawowy”.
zmień go na żądany kolor.

Question 14

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;
}

Question 15

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ć