web-dev-qa-db-fra.com

Comment changer la couleur primaire bootstrap?

Est-il possible de changer la couleur primaire bootstrap pour correspondre à la couleur de la marque? J'utilise le thème de papier de Bootswatch dans mon cas.

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
49
ashishjmeshram

Mise à jour 2018 pour Bootstrap 4

Pour changer le primaire , ou n’importe laquelle des couleurs de thème dans Bootstrap 4 SASS, définissez les variables appropriées avant importer bootstrap.scss. Cela permet à votre scss personnalisé de remplacer les! Valeurs par défaut ...

$primary: purple;
$danger: red;

@import "bootstrap";

Démo: https://www.codeply.com/go/f5OmhIdre

Dans certains cas, vous pouvez définir une nouvelle couleur à partir d'une autre variable existante Bootstrap. Pour cela, importez d'abord les fonctions et les variables afin qu'elles puissent être référencées dans les personnalisations ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Démo: https://www.codeply.com/go/lobGxGgfZE

Voir aussi cette réponse , ou cette réponse pour changer la couleur du bouton en (CSS ou SASS)

Il est également possible de changer la couleur primaire avec CSS uniquement , mais cela nécessite beaucoup de CSS supplémentaires car il existe de nombreuses -primary variations (btn- primaire, primaire d'alerte, primaire-bg, primaire-de-texte, primaire-de-table, primaire-de-frontière, etc.) et certaines de ces classes ont de légères variations de couleurs sur les états de bordure, de survol et actif. Par conséquent, si vous devez utiliser CSS, il est préférable d'utiliser un composant cible, tel que la modification de couleur du bouton principal .

43
Zim

il y a deux façons d'aller à

http://getbootstrap.com/customize/

et changez la couleur dans ces ajustements et téléchargez le bootstrap personnalisé.

Ou vous pouvez utiliser sass avec cette version https://github.com/twbs/bootstrap-sass et importer dans vos sass assets/stylesheets/_bootstrap.scss mais avant d'importer cela, vous pouvez modifier la variable par défaut couleurs

//== 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;

et compiler le résultat

19
Jorge Luis Saud Rosal

J'ai créé cet outil: https://lingtalfi.com/bootstrap4-color-generator , vous mettez simplement primaire dans le premier champ, puis choisissez votre couleur et cliquez sur générer.

Copiez ensuite le code scss ou css généré et collez-le dans un fichier nommé my-colors.scss ou my-colors.css (ou le nom de votre choix).

Incluez ce fichier APRÈS, le bootstrap css et le tour est joué.

L'ensemble du processus prend environ 10 secondes si vous en avez l'essentiel, à condition que le fichier my-colors.scss soit déjà créé et inclus dans votre tête. étiquette.

Remarque: cet outil peut être utilisé pour remplacer les couleurs par défaut de Bootstrap (primaire, secondaire, danger, ...), mais vous pouvez également créer des couleurs personnalisées si vous le souhaitez (bleu, vert, ternaire, ...).

Note2: cet outil a été conçu pour fonctionner avec bootstrap 4 (c'est-à-dire pas de version ultérieure pour l'instant).

6
ling

Tout élément avec la balise 'primay' a la couleur @ brand-primary. L'une des options pour le modifier consiste à ajouter un fichier CSS personnalisé comme ci-dessous:

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

Pour plus d'informations sur les fichiers CSS personnalisés avec bootstrap, voici un lien utile: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

5
N. Osil

La bonne façon de changer la couleur primaire par défaut dans Bootstrap 4.x à l'aide de SASS, ou de toute autre couleur comme la couleur secondaire, la réussite, etc.

Créez le fichier SASS suivant et importez Bootstrap SASS comme indiqué:

// (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";
2
Alvin Konda

C'est peut-être une question un peu ancienne, mais je veux partager la meilleure façon que j'ai trouvée de personnaliser le bootstrap. Il existe un outil en ligne appelé bootstrap.buildhttps://bootstrap.build/app. Cela fonctionne très bien et aucune installation ou configuration d'outils de construction n'est requise!

1
Rami Alloush

Utiliser SaSS
changer la couleur de la marque

$brand-primary:#some-color;

cela changera la couleur primaire dans toute l'interface utilisateur.

Utiliser css-
supposons que vous vouliez changer la couleur primaire du bouton.Alors

btn.primary{
  background:#some-color;
}

recherchez l'élément et ajoutez une nouvelle règle css/sass dans un nouveau fichier, puis attachez-le après avoir chargé le bootstrap css.

1
manish kumar