Pozbycie się wszystkich zaokrąglonych rogów w Twitter Bootstrap

Uwielbiam Twitter Bootstrap 2.0 - uwielbiam to, że jest to taka kompletna biblioteka ... ale chcę wprowadzić globalną modyfikację dla bardzo pudełkowej, a nie okrągłej witryny, która ma pozbyć się wszystkich zaokrąglonych rogów w Bootstrap ...

To dużo CSS do przebicia. Czy istnieje globalna zmiana lub jaki byłby najlepszy sposób na znalezienie i zastąpienie wszystkich zaokrąglonych?

Ustawiłem border-radius wszystkich elementów na „0” w ten sposób:

* {
  border-radius: 0 !important;
}

Ponieważ jestem pewien, że nie chcę tego później nadpisywać, po prostu używam! Ważne.

Jeśli nie kompilujesz plików less, po prostu zrób:

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

W bootstrapie 3, jeśli go kompilujesz, możesz teraz ustawić promień w pliku variable.less:

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

W bootstrap 4, jeśli go kompilujesz, możesz całkowicie wyłączyć radius w _custom.scsspliku:

$enable-rounded:   false;

Pobierz .lesspliki źródłowe i pozostaw .border-radius()mieszankę pustą.

Jeśli używasz wersji Bootstrap <3 ...

Z sass / scss

$baseBorderRadius: 0;

Mniej

@baseBorderRadius: 0;

Będziesz musiał ustawić tę zmienną przed zaimportowaniem bootstrapa. Wpłynie to na wszystkie studnie i navbary.

Aktualizacja

Jeśli używasz Bootstrap 3 baseBorderRadius powinien mieć wartość border-radius-base

Jeśli chcesz uniknąć ponownej kompilacji wszystkiego, po prostu dodaj .btn {border-radius: 0;}do swojego 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;
}

To pytanie jest dość stare, ale jest bardzo widoczne w wyszukiwarkach, nawet w wyszukiwaniach powiązanych z Bootstrap 4 . Myślę, że warto dodać odpowiedź na wyłączenie zaokrąglonych rogów, sposób BS4.

W _variables.scssistnieje kilka globalnych modyfikatory istnieje, aby szybko zmienić rzeczy, takie jak włączenie lub wyłączenie elastycznego systemu Przepasz, zaokrąglone narożniki, gradienty itp:

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

enabledDomyślnie zaokrąglone rogi .

Jeśli wolisz skompilować Bootstrap 4 przy użyciu Sassa i własnego, _custom.scsstakiego jak ja (lub używając oficjalnego dostosowywania), zastąpienie odpowiedniej zmiennej jest wystarczające:

$enable-rounded : false

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

Lub zdefiniuj mikser i umieść go w dowolnym miejscu, w którym chcesz mieć niezaokrąglony przycisk.

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

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

Korzystając z Bootstrap> = 3.0pliki źródłowe ( SASSlub LESS) nie musisz pozbywać się zaokrąglonych rogów ze wszystkiego, jeśli jest tylko jeden element, który Cię denerwuje, na przykład, aby po prostu pozbyć się zaokrąglonych rogów na pasku nawigacyjnym, posługiwać się:

Z SCSS:

$navbar-border-radius: 0;

MNIEJ:

@navbar-border-radius: 0;

Jeśli jednak chcesz pozbyć się zaokrąglonych rogów na wszystkim, możesz zrobić to, o czym wspomniał @ adamwong246 i użyć:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Te dwa ustawienia są ustawieniami „głównymi”, z których navbar-border-radiusbędą dziedziczyć inne ustawienia, takie jak , chyba że określono inne wartości.

Aby uzyskać listę wszystkich zmiennych, sprawdź zmienne.less lub zmienne.scss

Kod zamieszczony powyżej przez @BrunoS nie działał u mnie,

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

to, czego użyłem, było

* {
  border-radius: 0 !important;
}

Mam nadzieję, że to komuś pomoże

Istnieje bardzo łatwy sposób dostosowania Bootstrapa:

1. Po prostu przejdź do http://getbootstrap.com/customize/
2. Znajdź wszystkie „promienie” i zmodyfikuj je według własnego uznania.
3. Kliknij „Kompiluj i pobierz” i ciesz się własną wersją Bootstrap.

Lub możesz dodać to do html elementu, z którego chcesz usunąć promień obramowania (w ten sposób nie usuwałbyś go ze wszystkich przycisków / elementów):

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

Z SASS Bootstrap - jeśli sam kompilujesz Bootstrap - możesz ustawić cały promień obramowania (lub bardziej szczegółowy) na zero:

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

Bootstrap ma własne klasy dla obramowań, w tym .rounded-0do usuwania zaokrąglonych rogów dowolnego elementu, w tymbuttons

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>

Możesz także rzucić okiem na FlatStrap . Zapewnia zamiennik stylu Metro dla Bootstrap CSS bez zaokrąglonych rogów, gradientów i cieni.

jeśli używasz bootstrap, możesz po prostu użyć bootstrap class = "rounded-0", aby obramowanie miało ostre krawędzie bez zaokrąglonych rogów <button class="btn btn-info rounded-0"">Generate</button></span>

Utworzyłem kolejny plik css i dodaję następujący kod Nie wszystkie elementy są uwzględnione

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