Klasy pomocnicze / Helper classes | Kurs / Tutorial Bootstrap

Klasy pomocnicze / Helper classes
autor: Robert

27 sierpnia 2014

Zaczniemy od kolorowania tekstu i nadawania mu „ramki” w standardowych bootstrapowych kolorach o których pisałem już wielokrotnie.

Kolorowanie tekstu

Nadanie kolorów polega na dodaniu wymienionych poniżej klas do paragrafów, spanów, emfaz lub hiperłącz.

class=”text-muted”

class=”text-primary”

class=”text-success”

class=”text-info”

class=”text-warning”

class=”text-danger”

Nadawanie tła dla tekstu

Podobnie jak powyżej dodajemy odpowiednią klasę, przykłady podane poniżej

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ikona zamknięcia

Z tą ikonką spotkaliście się podczas tworzenia okienek z ostrzeżeniami

Tworzymy ją za pomocą kodu:

Wiadomość wysłana, Dziękuję!

Ikona rozwijania

Ta ikona również pojawiała się w moim tutorialu m.in we wpisach o rozwijanych przyciskach

Tworzymy ją za pomocą kodu:

<span class="caret"></span>

Przesuwanie elementów

Jeśli chcemy by jakiś element przesunął się na lewo/prawo można skorzystać z dwóch klas pomocniczych .pull-left oraz .pull-right

Środkowanie elementów blokowych

Jak wiecie z z tego wpisu tekst (elementy liniowe) środkuje się klasą .text-center. Natomiast do środkowania elementów blokowych służy klasa .center-block

Usuwanie opływania (float)

Mniemam, że skoro korzystacie z tego kursu to macie za sobą naukę podstaw HTMLa. Wiecie zatem, że zastosowanie stylu CSS float powoduje, że wszystkie następne elementy będą opływały ten do którego styl jest zastosowany a więc nie będą się wyświetlać jak tego chcemy. Zastosowanie klas .pull-left oraz .pull-right powoduje użycie opływania. Istnieje mały trik w CSSie pozwalający na „skasowanie” dalszego opływania za elementem, nazywa się on „clearfix” i w bootstrapie wystarczy stworzyć diva z klasą .clearfix i bez zawartości by wyświetlanie po zastosowaniu opływania powróciło do normy.

Ukrywanie elementów

Choć nie jest polecane ukrywanie elementów na stronach WWW, czasami nie mamy wyboru (np. gdy edytujemy kupiony szablon a nie umiemy znaleźć gdzie w nim generuje się dany HTML). Bootstrap przychodzi z pomocą dając nam 3 klasy widoczności i zwalniając nas z konieczności pisania dla nich styli.