autor: Robert
Zaczniemy od kolorowania tekstu i nadawania mu „ramki” w standardowych bootstrapowych kolorach o których pisałem już wielokrotnie.
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”
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.
Z tą ikonką spotkaliście się podczas tworzenia okienek z ostrzeżeniami
Tworzymy ją za pomocą kodu:
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>
Jeśli chcemy by jakiś element przesunął się na lewo/prawo można skorzystać z dwóch klas pomocniczych .pull-left
oraz .pull-right
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
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.
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.