Sbarazzarsi di tutti gli angoli arrotondati nel Bootstrap di Twitter

Adoro Twitter Bootstrap 2.0 - Adoro come sia una libreria così completa ... ma voglio fare una modifica globale per un sito molto squadrato, che è quello di sbarazzarsi di tutti gli angoli arrotondati in Bootstrap ...

Ci sono molti CSS da sfogliare. Esiste uno switch globale o quale sarebbe il modo migliore per trovare e sostituire tutti gli arrotondati?

Ho impostato tutto il raggio del bordo dell'elemento su "0" in questo modo:

* {
  border-radius: 0 !important;
}

Sicuramente non voglio sovrascriverlo in seguito, lo uso solo! Important.

Se non stai compilando meno file, fai semplicemente:

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

In bootstrap 3 se lo stai compilando puoi ora impostare il raggio nel file variabili.less:

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

In bootstrap 4, se lo stai compilando, puoi disabilitare il raggio completamente nel _custom.scssfile:

$enable-rounded:   false;

Scarica i .lessfile sorgente e rendi .border-radius()vuoto il mixin.

Se si utilizza Bootstrap versione <3 ...

Con sass / scss

$baseBorderRadius: 0;

Con meno

@baseBorderRadius: 0;

Sarà necessario impostare questa variabile prima di importare il bootstrap. Ciò influenzerà tutti i pozzi e le barre di navigazione.

Aggiornare

Se stai usando Bootstrap 3 baseBorderRadius dovrebbe essere border-radius-base

Se vuoi evitare di ricompilare il tutto, aggiungi semplicemente .btn {border-radius: 0;}al tuo 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;
}

Questa domanda è piuttosto vecchia, tuttavia è altamente visibile sui motori di ricerca anche in Bootstrap 4 ricerche correlate . Penso che valga la pena aggiungere una risposta per disabilitare gli angoli arrotondati, in modo BS4.

Nel _variables.scssci sono diversi modificatori globali per cambiare rapidamente le cose come abilitare o disabilitare il sistema di cintura flessibile, angoli arrotondati, gradienti ecc.:

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

Gli angoli arrotondati sono enabledpredefiniti.

Se preferisci compilare Bootstrap 4 usando Sass e il tuo proprio _custom.scsscome me (o usando un personalizzatore ufficiale), è sufficiente sostituire la relativa variabile:

$enable-rounded : false

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

Oppure definisci un mixin e includilo ovunque tu voglia un pulsante non arrotondato.

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

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

Quando usi Bootstrap> = 3.0file sorgente ( SASSo LESS) non devi sbarazzarti degli angoli arrotondati su tutto se c'è solo un elemento che ti sta infastidendo, ad esempio, per sbarazzarti degli angoli arrotondati sulla barra di navigazione, uso:

Con SCSS:

$navbar-border-radius: 0;

Con meno:

@navbar-border-radius: 0;

Tuttavia, se vuoi sbarazzarti degli angoli arrotondati su tutto, puoi fare ciò che @ adamwong246 ha menzionato e usare:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Queste due impostazioni sono le impostazioni "root" da cui navbar-border-radiuserediteranno le altre impostazioni , a meno che non vengano specificati altri valori.

Per un elenco di tutte le variabili, consultare il file variabile.less o variabili.scss

Il codice pubblicato sopra da @BrunoS non ha funzionato per me,

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

quello che ho usato era

* {
  border-radius: 0 !important;
}

Spero che questo aiuti qualcuno

C'è un modo molto semplice per personalizzare Bootstrap:

1. Vai su http://getbootstrap.com/customize/
2. Trova tutti i "raggi" e modificali come desideri.
3. Fai clic su "Compila e scarica" ​​e goditi la tua versione di Bootstrap.

Oppure potresti aggiungere questo al codice HTML dell'elemento da cui vuoi rimuovere il raggio del bordo (in questo modo non lo rimuoveresti da tutti i pulsanti / elementi):

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

Con SASS Bootstrap - se stai compilando Bootstrap da solo - puoi impostare tutto il raggio del bordo (o più specifico) semplicemente su zero:

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

Bootstrap ha le sue classi per i bordi, incluso .rounded-0sbarazzarsi degli angoli arrotondati su qualsiasi elemento inclusobuttons

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>

Puoi anche dare un'occhiata a FlatStrap . Fornisce un sostituto in stile Metro per il Bootstrap CSS senza angoli arrotondati, sfumature e ombre.

se stai usando bootstrap puoi semplicemente usare bootstrap class = "arrotondato-0" per creare il bordo con i bordi taglienti senza angoli arrotondati <button class="btn btn-info rounded-0"">Generate</button></span>

Ho creato un altro file CSS e ho aggiunto il seguente codice Non tutti gli elementi sono inclusi

/* 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;
}