Prócz gotowych elementów Bootstrap zawiera także wiele małych narzędzi ułatwiających budowanie layoutu stron. Są to zwykle klasy robiące bardzo proste rzeczy jak wyrównanie tekstu czy dodanie ramek.
Podstawowy przykład
Aby dodać poszczególne ramki naszemu elementowi mamy do wyboru pięc klas:
.border– dodaje ramki na wszystkich bokach.border-top– dodaje ramkę u góry.border-right– dodaje ramkę po prawej.border-bottom– dodaje ramkę na dole.border-left– dodaje ramkę po lewej
Przykład
Kod
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
Usuwanie ramek
Te klasy działają odwrotnie do wyżej wymienionych. Odejmują wybraną ramkę pozostawiając pozostałe. Dzięki temu, gdy chcemy otoczyć element z trzech stron, nie musimy mu nadawać trzech klas.
.border-0– usuwa ramki na wszystkich bokach.border-top-0– usuwa ramkę u góry.border-right-0– usuwa ramkę po prawej.border-bottom-0– usuwa ramkę na dole.border-left-0– usuwa ramkę po lewej
Przykład
Kod
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
Kolory ramek
W tym przykładzie powracamy do „wbudowanych” w Bootstrap kolorów, które są dostepne również dla ramek. Mamy do wyboru klasy:
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-white
Przykład
Kod
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Zaokrąglenie ramek
W tym przykładzie poznacie klasy służące do zaokrąglenia czy to zdjęcia czy obramowania jakiegoś elementu.
.rounded– zaokrągla wszystkie boki.rounded-top– zaokrągla u góry.rounded-right– zaokrągla po prawej.rounded-bottom– zaokrągla na dole.rounded-left– zaokrągla po lewej.rounded-circle– tworzy okrąg.rounded-0– usuwa zaokrąglenia
Przykład
Kod
<img src="https://placehold.it/100?text=rounded" alt=".rounded" class="rounded">
<img src="https://placehold.it/100?text=rounded-top" alt=".rounded-top" class="rounded-top">
<img src="https://placehold.it/100?text=rounded-right" alt=".rounded-right" class="rounded-right">
<img src="https://placehold.it/100?text=rounded-bottom" alt=".rounded-bottom" class="rounded-bottom">
<img src="https://placehold.it/100?text=rounded-left" alt=".rounded-left" class="rounded-left">
<img src="https://placehold.it/100?text=rounded-circle" alt=".rounded-circle" class="rounded-circle">
<img src="https://placehold.it/100?text=rounded-0" alt=".rounded-0" class="rounded-0">
Loading...