Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęZaokrąglone rogi
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Ta lekcja będzie łatwa, przyjemna i krótka. Dowiemy się, jak dodać zaokrąglone narożniki w Bootstrapie i używać właściwości border-radius.
Zaokrąglone narożniki to szczegół, ale bardzo ważny w projektowaniu.
Uwaga: W teorii projektowania, zaokrąglone narożniki wymagają mniejszego wysiłku poznawczego (czyli związanego z nauką i rozumieniem rzeczywistości). Również wydają się nam przyjaźniejsze. Dlaczego?
Jest to związane z tzw. "konturowym uprzedzeniem", które sprawia, że łączymy ostre krawędzie z zagrożeniem (jak kły i pazury dzikiego zwierzęcia, przed którymi nasi przodkowie żyli w strachu). W przeciwności do nich, istnieją delikatne i zaokrąglone krawędzie, które wydają się nam bardziej przyjazne i bezpieczne.
Jak dodać zaokrąglone rogi?
W CSS, właściwość border-radius odpowiada za zaokrąglone narożniki.
W Bootstrapie bardzo łatwo jest dodać zaokrąglone narożniki do dowolnego elementu i manipulować właściwością border-radius.
Po prostu dodaj klasę rounded- + rozmiar jednostki do elementu. Masz jednostki od 0 (usuwa zaokrąglone narożniki) do 9, więc aby dodać na przykład lekko zaokrąglone narożniki, możesz użyć klasy rounded-4 lub podobnej.
<!-- border-radius: 0px; -->
<img src="..." class="rounded-0" alt="...">
<!-- border-radius: .2rem; -->
<img src="..." class="rounded-1" alt="...">
<!-- border-radius: .25rem; -->
<img src="..." class="rounded-2" alt="...">
<!-- border-radius: .3rem; -->
<img src="..." class="rounded-3" alt="...">
<!-- border-radius: .375rem; -->
<img src="..." class="rounded-4" alt="...">
<!-- border-radius: .5rem; -->
<img src="..." class="rounded-5" alt="...">
<!-- border-radius: .75rem; -->
<img src="..." class="rounded-6" alt="...">
<!-- border-radius: .1rem; -->
<img src="..." class="rounded-7" alt="...">
<!-- border-radius: 1.25rem; -->
<img src="..." class="rounded-8" alt="...">
<!-- border-radius: 1.5rem; -->
<img src="..." class="rounded-9" alt="...">
Dodaj zaokrąglone narożniki do karuzeli
Teraz dodajmy zaokrąglone narożniki do naszej karuzeli za pomocą klasy rounded-6.
Aby zmodyfikować wygląd karuzeli, musimy dodać klasę rounded-6 do elementu carousel-inner.
<!-- Inner -->
<div class="carousel-inner rounded-6">
Po zapisaniu pliku i odświeżeniu przeglądarki, zobaczysz, że nasza karuzela teraz ma urocze zaokrąglone narożniki.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
O autorze
Michal Szymanski
Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.
Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.
