Comment voulez-vous changer la couleur de Twitter Bootstrap CSS?

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

J'ai changé la couleur en avant.moins:

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

J'ai ensuite respecté le moins de fichiers. Tout cela est arrivé, mais tout était encore bleu.

J'ai donc essayé le js.de moins en moins la route. Encore bleu.

OriginalL'auteur speg | 2011-08-22

  1. 11

    Voici un bootstrap thème générateur qui fonctionne à partir d'une image.... Ainsi, vous pouvez simplement prendre une photo de votre "vieux" site web, télécharger ici, et il va générer un thème qui correspond à votre ancien schéma de couleur!

    Remarque: Ce site semble être hors ligne pour le moment. Si vous voulez encore profiter de cette fonctionnalité, vous pouvez installer le site à partir de son dépôt Github, et de l'essayer à 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 maintenant, mais cela implique beaucoup de découpage et de collage de couleurs.... L'outil ci-dessus les chiffres de tout pour vous...

    http://getbootstrap.com/customize/

    Le site web pour de Somptueux Bootstrap est morte à l'instant (toujours travaillé en août, 2015). La nouvelle officielle de Bootstrap de personnalisation est situé à getbootstrap.com/customize

    OriginalL'auteur Brad Parks

  2. 4

    Vous pourriez trouver la Bootstrap Générateur utile, il vous permet de choisir les couleurs etc et génère de la compilation d'un fichier CSS de Bootstrap pour vous.

    cela devrait être utilisé pour la version 2: twitter.github.com/bootstrap/download.html
    Votre premier lien semble mort...
    Oui, il est. Doit ont changé dans le passé+ de 2 ans.

    OriginalL'auteur Phil Gyford

  3. 2

    Si vous utilisez 2.0-wip version, c'est le deal.

    l' .classe primaire utilise @bleu et @blueDark variables pour la création du bouton dégradé. Ces variables sont définies dans les variables.moins fichier.

    Dans les boutons.moins fichier, le bouton d'autres classes sont codés 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 aurez à changer ces valeurs en hexadécimal ou créer des variables que vous remplacez les valeurs en hexadécimal. Je suis nouveau à l'aide de bootstrap de twitter moi-même, mais cela semble être la situation.

    pourrait-il être réaliser sans moins? J'ai installé le moins, de changer quelque chose, alors a des tonnes d'erreurs de compilation...
    J'ai surtout arrêté de l'utiliser Moins aussi parce que des erreurs. Si vous faites cela, vous devez éditer les différentes classes dans le bootstrap.fichier css ou à l'endroit où vous mettez tous le CSS de bootstrap. Vous devez modifier toutes les classes directement dans le CSS. En 2.0=wip le bouton classes sont .btn, .primaire, .info, .danger je pense. Dans la version finale, ils se trouvent ici twitter.github.com/bootstrap/base-css.html#buttons.

    OriginalL'auteur wuliwong

  4. 0

    Avez-vous mis la @orange variable à une couleur, à l'instar de ce

    @orange: #FF2400;

    Qui a été déjà fait. Tourne le bouton de la couleur et des liens sont tous basés sur leurs propres variables, et ne pas utiliser @baseColor encore..

    OriginalL'auteur Jason Gennaro

  5. 0

    Celui-ci pour la #01a4d9 couleur 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;
}

    OriginalL'auteur goldyorchita

  6. 0

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

    @linkColor: @orange;

    OriginalL'auteur Josh W Lewis