Ramki / Borders

989 0

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

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

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

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

.rounded .rounded-top .rounded-right .rounded-bottom .rounded-left .rounded-circle .rounded-0

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (2 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*