web-dev-qa-db-fra.com

Styliser les boutons Bootstrap 3.x de Twitter

Les boutons Bootstrap 3 de Twitter sont limités en couleurs. Par défaut, il y aura 5 7 couleurs (primaire par défaut, erreur, avertissement, info, réussite et lien) Voir:

enter image description here

Twitter's Bootstrap Buttons

Chaque bouton a 3 états (par défaut, actif et désactivé)

Comment ajouter plus de couleurs ou créer des boutons personnalisés? Cette question a déjà trouvé une réponse pour les boutons Bootstrap 2.x de Twitter: Style des boutons Twitter bootstrap . Bootstrap 3 n'est pas rétrocompatible. Il y aura beaucoup de changements dans les fichiers less et css. La prise en charge d'IE7 sera supprimée. TB3 est d'abord mobile. Les codes de balisage seront également modifiés.

css3twitter-bootstraplesstwitter-bootstrap-3
37
Bass Jobsen

Ajoutez des couleurs supplémentaires à vos fichiers moins et recompilez. Voir aussi Twitter Bootstrap Meilleures pratiques de personnalisation . mise à jour

Comme mentionné par @ ow3n depuis la v3.0.3, utilisez:

.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

Remarque dans ce qui précède @btn-default-color définit la couleur de la police, @btn-default-bg la couleur d'arrière-plan et @ btn-default-border la couleur de la bordure. Les couleurs des états comme actif, survolé et désactivé sont calculées en fonction de ces paramètres.

Par exemple:

.btn-custom {
  .button-variant(blue; red; green);
}

aura pour résultat:

enter image description here

Pour ceux qui veulent utiliser le CSS direct, remplacez les couleurs dans ce code:

.btn-custom {
  color: #0000ff;
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #0000ff;
  background-color: #d60000;
  border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom .badge {
  color: #ff0000;
  background-color: #0000ff;
}

fin de la mise à jour

Pour générer un bouton personnalisé:

.btn-custom {
    .btn-pseudo-states(@yourColor, @yourColorDarker);
 }

Ce qui précède générera le CSS suivant:

.btn-custom {
  background-color: #1dcc00;
  border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #19b300;
  border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #1dcc00;
  border-color: #1dcc00;
}

Dans ce qui précède, # 1dcc00 sera votre couleur personnalisée et # 19b300 votre couleur plus foncée. Au lieu de la solution moins, vous pouvez également ajouter ce css directement à vos fichiers html (après le bootstrap css).

Ou obtenez votre code css directement depuis Twitter Bootstrap 3 Button Generator

49
Bass Jobsen

Il est assez facile de le faire avec des CSS non traités

CSS

.btn-purple {
    background: #9b59b6;
    border-color: #9b59b6;
}

.btn-purple:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

.btn-teal {
    background: #1abc9c;
    border-color: #1abc9c;
}

.btn-teal:hover {
    background: #16a085;
    border-color: #16a085;
 }

HTML

<button class="btn btn-purple">purple</button>

<button class="btn btn-teal">teal</button>

Violon sur: http://jsfiddle.net/z7hV6/

17
Matt Lambert

Après avoir trouvé cette solution via google et compris les boutons bootstrap mieux, j'ai trouvé l'outil suivant pour générer différentes couleurs pour les boutons bootstrap.

Cela signifie que vous devrez l'ajouter à un CSS séparé, mais c'est parfait pour ce dont j'avais besoin. En espérant que cela soit utile aux autres:

http://twitterbootstrap3buttons.w3masters.nl/

3
Onimusha

Voici un moyen agréable et facile de créer des couleurs de bouton supplémentaires Bootstrap

Générateur de bouton Bootstrap

Vous trouverez ci-dessous un échantillon du CSS qu'il générera:

.btn-sample { 
  color: #ffffff; 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample:hover, 
.btn-sample:focus, 
.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  color: #ffffff; 
  background-color: #49247A; 
  border-color: #130269; 
} 

.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  background-image: none; 
} 

.btn-sample.disabled, 
.btn-sample[disabled], 
fieldset[disabled] .btn-sample, 
.btn-sample.disabled:hover, 
.btn-sample[disabled]:hover, 
fieldset[disabled] .btn-sample:hover, 
.btn-sample.disabled:focus, 
.btn-sample[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-sample.disabled:active, 
.btn-sample[disabled]:active, 
fieldset[disabled] .btn-sample:active, 
.btn-sample.disabled.active, 
.btn-sample[disabled].active, 
fieldset[disabled] .btn-sample.active { 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample .badge { 
  color: #611BBD; 
  background-color: #ffffff; 
}
2
Homer

Je cherchais depuis longtemps une solution possible pour styliser les boutons bootstrap. J'ai suivi le dernier langage de style css (less http://lesscss.org/ ), et pas mal de solutions de contournement pour personnaliser les boutons, mais aucun n'était utile. Il y a des générateurs de boutons bootstrap bootstrap disponibles en ligne tels que http: //www.plugolabs) .com/Twitter-bootstrap-button-generator / et bien d'autres. Mais à ma grande surprise, une seule ligne de code dans le fichier css a fonctionné assez bien pour moi. (Remarque: Au lieu de "background-color", j'ai utilisé "background" comme paramètre pour spécifier le nom de la couleur du bouton. Dans le code html, j'ai utilisé btn-custom comme nom de classe que j'ai redéfini dans le fichier css.)

Code HTML 

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

Code CSS 

.btn-custom {
    background: #colorname; 
}
1
SrishAkaTux

Voici une autre alternative avec l'avantage que vous pouvez ajouter autant d '"actions de bouton" (couleurs) que vous le souhaitez. Voici une courte vidéo de démonstration: tilisation des boutons Unicorn-UI avec Twitter Bootstrap

Si vous saisissez la bibliothèque et compilez vous-même, vous pouvez définir autant d '"actions de bouton" en modifiant une liste Sass qui ressemble à:

$ubtn-colors: ('primary' #1B9AF7  #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37  #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;

Ajouter autant de types personnalisés que vous le souhaitez (et bien sûr aussi supprimer ceux dont vous n'avez pas besoin).

0
Rob