web-dev-qa-db-fra.com

Se débarrasser de tous les angles arrondis de Twitter Bootstrap

J'adore Twitter Bootstrap 2.0 - J'adore sa bibliothèque si complète ... mais je souhaite apporter une modification globale à un site très boxy-not-round, qui consiste à supprimer tous les contours arrondis. coins dans Bootstrap ...

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

csstwitter-bootstrap
163
ina

Je règle le bord-rayon de tous les éléments sur "0" comme ceci:

* {
  border-radius: 0 !important;
}

Comme je suis sûr de ne pas vouloir écraser cela plus tard, j’utilise simplement! 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 dans le fichier _custom.scss:

$enable-rounded:   false;
315
BrunoS

Téléchargez les fichiers .less source et videz le mélange .border-radius().

24
SLaks

Si vous utilisez Bootstrap version <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.

Mise à jour

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

19
adamwong246

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

18
yves amsellem
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;
}
18
ymakux

Lorsque vous utilisez Bootstrap> = 3.0 fichiers source (SASS ou LESS), vous n'avez pas à vous débarrasser des coins arrondis s'il n'y en a qu'un. Par exemple, pour vous débarrasser des coins arrondis de la barre de navigation, utilisez:

Avec SCSS:

$navbar-border-radius: 0;

Avec moins:

@navbar-border-radius: 0;

Toutefois, si vous souhaitez vous débarrasser des angles arrondis de tout, vous pouvez faire ce que @ adamwong246 a mentionné et utiliser:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Ces deux paramètres sont les paramètres "root" desquels les autres paramètres tels que navbar-border-radius hériteront sauf si d'autres valeurs sont spécifiées.

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

5
cwd

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 que cela vaut la peine d'ajouter une réponse pour désactiver les angles arrondis, façon BS4.

Dans le _variables.scss, il existe plusieurs modificateurs globaux permettant de modifier rapidement les éléments, tels que l'activation ou la désactivation du système de gaines flexibles, des angles arrondis, des gradients, 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 enabled par défaut.

Si vous préférez compiler le Bootstrap 4 en utilisant Sass et votre propre _custom.scss comme moi (ou en utilisant un personnalisateur officiel), il suffit de remplacer la variable liée:

$enable-rounded : false
5
edigu
.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
}
5
tomruss

Le code posté ci-dessus par @BrunoS ne fonctionnait pas pour moi,

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

ce que j'ai utilisé était

* {
  border-radius: 0 !important;
}

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

4
Smith

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

  1. Il suffit d'aller à 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.
4
Zbigniew Ledwoń

Ou vous pouvez ajouter ceci au code HTML de l'élément dont vous souhaitez supprimer le rayon de la bordure (de cette manière, vous ne le supprimeriez pas de tous les boutons/éléments):

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

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

1
Florian Feldhaus

J'ai créer un autre fichier css et ajouter 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;
}
0
Ruberandinda Patience