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

J'adore Twitter Bootstrap 2.0 - J'adore la façon dont c'est une bibliothèque si complète ... mais je veux faire une modification globale pour un site très boxy-not-round, qui consiste à se débarrasser de tous les coins arrondis de Bootstrap ...

C'est beaucoup de CSS à parcourir. Existe-t-il un commutateur global ou quel serait le meilleur moyen de trouver et de remplacer tous les arrondis?

J'ai défini le rayon de bordure de tous les éléments sur "0" comme ceci:

* {
  border-radius: 0 !important;
}

Comme je suis sûr que je ne veux pas l'écraser plus tard, j'utilise juste! Important.

Si vous ne compilez pas vos fichiers moins, faites simplement:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

Dans bootstrap 3, si vous le compilez, vous pouvez maintenant définir le rayon dans le fichier variables.less:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

Dans bootstrap 4, si vous le compilez, vous pouvez désactiver le rayon tous ensemble dans le _custom.scssfichier:

$enable-rounded:   false;

Téléchargez les .lessfichiers source et .border-radius()videz le mixin.

Si vous utilisez la version Bootstrap <3 ...

Avec sass / scss

$baseBorderRadius: 0;

Avec moins

@baseBorderRadius: 0;

Vous devrez définir cette variable avant d' importer le bootstrap. Cela affectera tous les puits et barres de navigation.

Mettre à jour

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

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

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

Cette question est assez ancienne, mais elle est très visible sur les moteurs de recherche, même dans les recherches liées à Bootstrap 4 . Je pense qu'il vaut la peine d'ajouter une réponse pour désactiver les coins arrondis, façon BS4.

Dans le, _variables.scssil existe plusieurs modificateurs globaux pour changer rapidement les choses telles que l'activation ou la désactivation du système de gird gird, les coins arrondis, les dégradés, etc.:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

Les coins arrondis sont enabledpar défaut.

Si vous préférez compiler le Bootstrap 4 en utilisant Sass et le vôtre _custom.scsscomme moi (ou en utilisant le personnalisateur officiel), il suffit de remplacer la variable associée:

$enable-rounded : false

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

Ou définissez un mixin et incluez-le là 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
}

Lorsque vous utilisez Bootstrap> = 3.0fichiers source ( SASSou LESS) vous n'avez pas à vous débarrasser des coins arrondis de tout s'il n'y a qu'un seul élément qui vous dérange, par exemple, pour simplement vous débarrasser des coins arrondis de la barre de navigation, utilisation:

Avec SCSS:

$navbar-border-radius: 0;

Avec moins:

@navbar-border-radius: 0;

Cependant, si vous voulez vous débarrasser des coins arrondis sur tout, vous pouvez faire ce que @ adamwong246 a mentionné et utiliser:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Ces deux paramètres sont les paramètres «racine» dont les autres paramètres comme navbar-border-radiushériteront à moins que d'autres valeurs ne soient spécifiées.

Pour une liste de toutes les variables, consultez les variables.less ou variables.scss

Le code posté ci-dessus par @BrunoS n'a pas fonctionné pour moi,

* {
  .border-radius(0) !important;
}

ce que j'ai utilisé était

* {
  border-radius: 0 !important;
}

J'espère que ça aidera quelqu'un

Il existe un moyen très simple de personnaliser Bootstrap:

1. Allez simplement à http://getbootstrap.com/customize/
2. Trouvez tous les "rayons" et modifiez-les comme vous le souhaitez.
3. Cliquez sur "Compiler et télécharger" et profitez de votre propre version de Bootstrap.

Ou vous pouvez ajouter ceci au html de l'élément dont vous souhaitez supprimer le rayon de la bordure (de cette façon, vous ne le supprimeriez pas de tous les boutons / éléments):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

Avec SASS Bootstrap - si vous compilez Bootstrap vous-même - vous pouvez définir tout rayon de bordure (ou plus spécifique) simplement à zéro:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Bootstrap a ses propres classes pour les bordures, y compris .rounded-0pour se débarrasser des coins arrondis sur n'importe quel élément, y comprisbuttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

Vous voudrez peut-être aussi jeter un œil à FlatStrap . Il fournit un remplacement de style Metro pour le CSS Bootstrap sans coins arrondis, dégradés et ombres portées.

si vous utilisez bootstrap, vous pouvez simplement utiliser la classe bootstrap = "round-0" pour créer la bordure avec les arêtes vives sans coins arrondis <button class="btn btn-info rounded-0"">Generate</button></span>

J'ai créé un autre fichier css et ajouté le code suivant Tous les éléments ne sont pas inclus

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}