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?
Odpowiedzi:
Ustawiłem border-radius wszystkich elementów na „0” w ten sposób:
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:
W bootstrapie 3, jeśli go kompilujesz, możesz teraz ustawić promień w pliku variable.less:
W bootstrap 4, jeśli go kompilujesz, możesz całkowicie wyłączyć radius w
_custom.scss
pliku:źródło
* { -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!-webkit-appearance: menulist
.Pobierz
.less
pliki źródłowe i pozostaw.border-radius()
mieszankę pustą.źródło
Jeśli używasz wersji Bootstrap <3 ...
Z sass / scss
Mniej
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
źródło
Jeśli chcesz uniknąć ponownej kompilacji wszystkiego, po prostu dodaj
.btn {border-radius: 0;}
do swojego CSS.źródło
.btn
źródło
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.scss
istnieje kilka globalnych modyfikatory istnieje, aby szybko zmienić rzeczy, takie jak włączenie lub wyłączenie elastycznego systemu Przepasz, zaokrąglone narożniki, gradienty itp:enabled
Domyślnie zaokrąglone rogi .Jeśli wolisz skompilować Bootstrap 4 przy użyciu Sassa i własnego,
_custom.scss
takiego jak ja (lub używając oficjalnego dostosowywania), zastąpienie odpowiedniej zmiennej jest wystarczające:źródło
Lub zdefiniuj mikser i umieść go w dowolnym miejscu, w którym chcesz mieć niezaokrąglony przycisk.
źródło
px
jest zbędne, prawda?Korzystając z Bootstrap> =
3.0
pliki źródłowe (SASS
lubLESS
) 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:
MNIEJ:
Jeśli jednak chcesz pozbyć się zaokrąglonych rogów na wszystkim, możesz zrobić to, o czym wspomniał @ adamwong246 i użyć:
Te dwa ustawienia są ustawieniami „głównymi”, z których
navbar-border-radius
będą dziedziczyć inne ustawienia, takie jak , chyba że określono inne wartości.Aby uzyskać listę wszystkich zmiennych, sprawdź zmienne.less lub zmienne.scss
źródło
Kod zamieszczony powyżej przez @BrunoS nie działał u mnie,
to, czego użyłem, było
Mam nadzieję, że to komuś pomoże
źródło
LESS
Istnieje bardzo łatwy sposób dostosowania Bootstrapa:
źródło
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):
źródło
Z SASS Bootstrap - jeśli sam kompilujesz Bootstrap - możesz ustawić cały promień obramowania (lub bardziej szczegółowy) na zero:
źródło
@import "../node_modules/bootstrap/scss/bootstrap";
A bootstrap ich nie przesłoni, ponieważ są zadeklarowane za pomocą!default
słowa kluczowego w bootstrap-source.Bootstrap ma własne klasy dla obramowań, w tym
.rounded-0
do usuwania zaokrąglonych rogów dowolnego elementu, w tymbuttons
https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius
źródło
Możesz także rzucić okiem na FlatStrap . Zapewnia zamiennik stylu Metro dla Bootstrap CSS bez zaokrąglonych rogów, gradientów i cieni.
źródło
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>
źródło
Utworzyłem kolejny plik css i dodaję następujący kod Nie wszystkie elementy są uwzględnione
źródło