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

172

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?

w
źródło
Chcesz usunąć wszystkie lub tylko niektóre zaokrąglone rogi?
Andres Ilich
Jeśli nie możesz zmodyfikować tego, co obecnie masz na miejscu, utworzyłem plik mod, który ma wszystkie promienie obramowania ustawione na 0: mkamyszek.tumblr.com/post/61791361233/ ...
Mark Kamyszek
1
ina, czy moja odpowiedź zadziałała dla ciebie? oznaczyłbyś to jako poprawne?
BrunoS
tak. Dziękuję Ci! .. dlaczego jednak głos przeciw
ina

Odpowiedzi:

330

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;
BrunoS
źródło
2
To naprawdę fajne rozwiązanie, jeśli próbujesz dostosować bootstrap bez dotykania podstawowych plików. Świetna odpowiedź!
marty
4
Heck yeah, szybki i brudny!
programista
1
Użyłem tego * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }i działa idealnie dla Bootstrap 3.2. Dzięki za naprawę człowieka!
Todor Todorov
1
To rozwiązanie nie działa w przypadku wejść <select> w stylu bootstrap. Prawdopodobnie z powodu użycia -webkit-appearance: menulist.
johnsorrentino
To prawdopodobnie dobre rozwiązanie, ale nie najlepsze. Spowoduje to niepotrzebne wygenerowanie dużej liczby redundantnych CSS dla każdego elementu. Myślę, że jest to jedno z najlepszych rozwiązań oferowanych przez @ymakux. Możesz spróbować
MB Parvez Rony
25

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

SLaks
źródło
Jest to chyba najlepsze rozwiązanie, jeśli chodzi o wydajność przy opanowaniu przetwarzania Bootstrap CSS.
klewis
20

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

adamwong246
źródło
18

Jeśli chcesz uniknąć ponownej kompilacji wszystkiego, po prostu dodaj .btn {border-radius: 0;}do swojego CSS.

yves amsellem
źródło
1
.btn
Wpłynie
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;
}
ymakux
źródło
7

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
edigu
źródło
1
ty rządzisz;) To powinna być akceptowana odpowiedź, gdy Bootstrap 4 stanie się wirusowy ... przepraszam, publicznie. Jest tu dobrze ukryty dla tych, którzy już używają go w wersji alfa.
kub1x
5
.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
}
tomruss
źródło
4
pxjest zbędne, prawda?
ta.speot.jest
1
Zwykle zachowuję „px”, więc jeśli muszę zmienić wartość, nie muszę ponownie wpisywać „px”.
nkkollaw
1
ale dodatkowe bajty danych
Anthony Shaw,
5

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

cwd
źródło
4

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

Kowal
źródło
3
@brunos używałLESS
afaolek
4

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.
Zbigniew Ledwoń
źródło
2

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;"
Nadia
źródło
2

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;
Blackbam
źródło
Dokładnie. Umieść te deklaracje przed np. @import "../node_modules/bootstrap/scss/bootstrap";A bootstrap ich nie przesłoni, ponieważ są zadeklarowane za pomocą !defaultsłowa kluczowego w bootstrap-source.
Jeppe
2

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>

Ergec
źródło
1

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

Florian Feldhaus
źródło
Problem z Flatstrap polega na tym, że nie mają one jeszcze obsługi SCSS dla v3 :(
HP.
1

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>

Rajesh Maradana
źródło
która wersja bootstrapa
ina
0

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;
}
Ruberandinda Patience
źródło