web-dev-qa-db-fra.com

Comment changer la forme de Bootstrap

Comment puis-je changer la valeur par défaut du bouton du coin arrondi dans bootstrap en bouton rectangle normal? Maintenant, je ne peux changer que la couleur de taille ou la police du bouton

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

Apprécier ton aide

twitter-bootstrapbutton
10
Gavin Niu

La meilleure pratique consiste à créer une classe personnalisée afin de ne pas modifier votre CSS de base si vous souhaitez l'utiliser ailleurs, puis appliquez vos modifications.

Dans l'exemple, j'utilise .btn.btn-custom-lg, .btn.btn-custom-sm, .btn.btn-custom-xs mais si vous voulez seulement changer quelque chose comme _ border-radius pour tous les boutons, vous pouvez créer une classe globale à appliquer au bouton: .btn-square { border-radius: 0; }

Voir l'exemple de travail.

/*Specific Cases*/

.btn.btn-custom-lg,
.btn.btn-custom-sm,
.btn.btn-custom-xs {
  border-radius: 0;
}
/*Global*/

.btn.btn-square {
  border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <hr>
  <h3>Specific</h3>
  <div class="btn btn-default btn-lg btn-custom-lg">Button Default</div>
  <div class="btn btn-default btn-sm btn-custom-sm">Button Default</div>
  <div class="btn btn-default btn-xs btn-custom-xs">Button Default</div>
  <hr>
  <h3>Global</h3>
  <div class="btn btn-default btn-lg btn-square">Button Default</div>
  <div class="btn btn-default btn-sm btn-square">Button Default</div>
  <div class="btn btn-default btn-xs btn-square">Button Default</div>
</div>
12
vanburen

Ajoutez la classe rounded-0, comme expliqué sur GetBootstrap.com :

<a href="tel:+447447218297" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>
6
Saif Islam