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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
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:
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.
Post się przydał? Oceń go proszę.
(7 głosów, średnia: 5,00 na 5)
Loading...