web-dev-qa-db-fra.com

Comment changez-vous la couleur du CSS Bootstrap de Twitter?

Je n'ai pas utilisé moins avant aujourd'hui.

J'ai changé la couleur dans preboot.less en:

// Color Scheme
@baseColor:         @orange;                  // Set a base color

Je me suis alors conformé au moins de fichiers. Tout est sorti, mais tout était encore bleu.

J'ai donc essayé la voie sans js. Toujours bleu. 

csslesstwitter-bootstrap
17
speg

Voici un générateur de thèmes bootstrap qui fonctionne à partir d'une image .... Ainsi, vous pouvez simplement prendre une photo de votre "ancien" site Web, la télécharger ici, et il générera un thème qui correspond à votre ancien jeu de couleurs!

Note: Ce site semble être hors ligne pour le moment. Si vous voulez toujours cette fonctionnalité, vous pouvez installer le site à partir de son référentiel Github }, et essayez-le à partir de là.

http://www.lavishbootstrap.com/

et bien sûr, Bootstrap lui-même vous permet de personnaliser les couleurs lorsque vous le téléchargez, mais cela implique de nombreuses opérations de découpage et de collage de palettes de couleurs ... L'outil ci-dessus vous aide à comprendre ...

http://getbootstrap.com/customize/

11
Brad Parks

Vous pouvez trouver le Bootstrap Generator utile - il vous permet de choisir les couleurs, etc. et génère un fichier CSS Boostrap compilé pour vous.

4
Phil Gyford

Si vous utilisez la version 2.0-wip, c’est l’affaire.

la classe .primary utilise les variables @blue et @blueDark pour créer le dégradé du bouton. Ces variables sont définies dans le fichier variables.less.

Dans le fichier buttons.less, les autres classes de boutons sont codées en dur avec des valeurs hexadécimales. 

// Danger and error appear as red
  &.danger {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }

Vous devez modifier ces valeurs hex ou créer des variables avec lesquelles vous remplacez les valeurs hex. Je suis nouveau sur l'utilisation de bootstrap de Twitter moi-même, mais cela semble être le cas.

2
wuliwong

Pour personnaliser la couleur de vos liens et .btn-primary (ce à quoi je pense que la question faisait référence), ajustez le @linkColor:

@linkColor: @orange;
0
Josh W Lewis

Celui-ci pour la couleur # 01a4d9 btn

.btn {
    border-color:#c5c5c5;
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
 }

.btn-primary {
    color:#ffffff;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:#007cc5;
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9),  to(#0193c5));
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5);
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0);
    border-color:#0193c5 #0193c5 #003479;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
    color:#ffffff;
    background-color:#0193c5;
    *background-color:#0049ac;
 }

.btn-primary:active,.btn-primary.active {
    background-color:#003f92 \9;
 }
0
goldyorchita

Avez-vous défini la variable @orange sur une couleur, comme ceci

@orange: #FF2400;

0
Jason Gennaro