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


173

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?


Cherchez-vous à supprimer tout ou juste quelques coins arrondis?
Andres Ilich

Si vous ne pouvez pas modifier ce que vous avez actuellement en place, j'ai créé un fichier mod dont tous les rayons de bordure sont définis sur 0: mkamyszek.tumblr.com/post/61791361233/…
Mark Kamyszek

1
ina, ma réponse a-t-elle fonctionné pour vous? le marqueriez-vous comme correct?
BrunoS

Oui. Merci! .. pourquoi le vote négatif cependant
ina

Réponses:


331

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;

2
C'est une très bonne solution si vous essayez de personnaliser le bootstrap sans toucher aux fichiers de base. Très bonne réponse!
marty

4
Heck ouais, rapide et sale!
programmeur

1
J'avais utilisé ceci * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }et cela fonctionne parfaitement pour Bootstrap 3.2. Merci pour le réparateur!
Todor Todorov

1
Cette solution ne fonctionne pas pour les entrées <select> de style bootstrap. Probablement en raison de l'utilisation de -webkit-appearance: menulist.
johnsorrentino

C'est probablement une bonne solution, mais pas la meilleure. Cela générera inutilement un grand nombre de CSS redondants pour chaque élément. Je pense que c'est l'une des meilleures solutions fournies par @ymakux. Vous pouvez essayer ceci
MB Parvez Rony

25

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


C'est peut-être la meilleure solution en termes d'efficacité avec la maîtrise du traitement CSS Bootstrap.
klewis

20

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


18

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


1
Cela n'aura un impact que sur les boutons et partout où vous avez ajouté.btn
zVictor

18
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;
}

7

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

1
you rock;) Cela devrait être la réponse acceptée une fois que Bootstrap 4 deviendra viral ... désolé, public. Il est bien caché ici pour ceux qui l'utilisent déjà en alpha.
kub1x le

5
.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
}

4
pxest redondant, non?
ta.speot.is

1
Je garde généralement «px» pour que si je dois changer la valeur, je n'ai pas à taper à nouveau «px».
nkkollaw

1
mais les octets supplémentaires de données
Anthony Shaw

5

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


4

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


3
@brunos utilisaitLESS
afaolek

4

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.

2

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;"

2

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;

Exactement. Mettez ces déclarations avant eg @import "../node_modules/bootstrap/scss/bootstrap";et bootstrap ne les écrasera pas, puisqu'elles sont déclarées avec le !defaultmot clé dans bootstrap-source.
Jeppe le

2

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>


1

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.


Le problème avec Flatstrap est qu'ils n'ont pas encore de support SCSS pour la v3 :(
HP.

1

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>


quelle version de bootstrap
ina

0

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;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.