Se débarrasser de tous les coins arrondis dans Twitter Bootstrap

Question

J’aime Twitter Bootstrap 2.0 - J’adore comment elle est telle une bibliothèque complète... mais je veux faire une modification globale pour un site très boxy-non-ronde, qui est de se débarrasser de tous les coins arrondis en Bootstrap...

C’est beaucoup de CSS pour souffler à travers. Existe-t-il un commutateur global, ou quelle serait la meilleure façon de trouver et de remplacer tous les arrondis ?

Answer 1

Ce que j’ai juste fait devait définir tous les éléments de frontière-rayon à « 0 » comme ceci :

Je suis sûr que je ne veux pas remplacer cela par la suite j’ai simplement utiliser ! important.

Si vous ne compilez vos fichiers moins juste faire :

3 « bootstrap » si vous compilez il vous pouvez maintenant définir il sur le variables.less ici :

Answer 2

Télécharger la source fichiers et faire la mixin vide.

Answer 3

Si vous utilisez Bootstrap version Avec sass/scss

Avec moins

Vous devrez définir cette variable avant d’importer les données d’amorçage. Cela affectera tous les puits et navbars.

Mise à jour

Si vous utilisez 3 de Bootstrap baseBorderRadius devrait être border-radius-base

Answer 4

Si vous voulez éviter de tout recompiler, ajoutez simplement .btn {border-radius: 0;} à votre CSS.

Answer 5

 .btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}
 

Ou définissez un mixin et incluez-le partout où vous voulez un bouton non arrondi.

 @mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}