Tworzenie paginacji
Tworzenie paginacji w Bootstrapie jest bardzo proste. Wystarczy skorzystać z elementu nav
oraz nieuporządkowanej listy (ul
wraz z elementami li
)
Używając pomocniczej klasy pagination
, w prosty sposób uzyskamy paginacje. Paginacja przydaję się do zarządzania stronami wpisów na blogu oraz numerowania stron zdjęć w swoim portfolio.
Sprawdź na podstawie poniższego przykładu jak dodać do swojej strony paginację.
cool-tree-ukvkw
cool-tree-ukvkw danielminschinski
Rozmiary przycisków
Framework Bootstrap umożliwia zmiany rozmiarów przycisków za pomocą klas pomocniczych. Tak jak w poprzednim przykładzie, wystarczy dodać odpowiednią klasę do przycisku.
Framework udostępnia nam trzy dodatkowe rozmiary dla przycisków. Nazewnictwo klas pomocniczych jest taka sama jak w przypadku wszystkich innych w Bootstrapie, tzn. btn-rozmiar
np. btn-lg
.
Kolory przycisków również możemy nadawać dzięki klasom pomocniczym:
btn-info
niebieski kolor neutralny. Używany w przypadkach informacyjnych bądź neutralnych,btn-success
zielony kolor. Używany w przypadkach wskazywania pożądanej akcji, np. zatwierdzenia pewnego zdarzenia,btn-warning
kolor pomarańczowy – ostrzegawczy. Używany w sytuacji która wymaga przemyślanej decyzji,btn-danger
czerwony kolor – ostrzegawczy. Używany przy akcji odpowiedzialnej która będzie miała poważne i często nieodwracalne skutki.
Spójrz na poniższy przykład w którym zastosowałem powyższe klasy pomocnicze:
epic-darkness-hywb6
epic-darkness-hywb6 danielminschinski
Stany
Framework Bootstrapa oferuję różne stany utworzonych przycisków. Aby przycisk stał się aktywny, wystarczy że użyjemy klasy pomocniczej active
. Jeżeli chcemy, żeby dany przycisk stał się nieaktywny, to należy dodać do niego atrybut disabled="disabled"
.
Wizualnie, powyższe stany nadają odpowiedni wygląd, dzięki czemu wyraźnie widać, że przycisk jest nieaktywny i klikanie na niego nic nie daje. Ciekawą opcją jest klasa pomocnicza btn-block
– sprawia ona, że przycisk nabiera cech elementu blokowego (rozszerza się na całą dostępną szerokość).
Spójrz na poniższy przykład w którym zastosowałem powyższe klasy pomocnicze:
musing-resonance-u5qst
musing-resonance-u5qst danielminschinski
Grupowanie
Grupowanie przycisków daje nam możliwość framework Bootstrap. Aby tak się stało, należy objąć je elementem div
z klasą btn-group
.
Dzięki temu można w łatwy sposób zmienić rozmiar przycisków, sposób wyświetlania dodając klasy pomocnicze.
W przykładzie zobaczysz jak wyświetlać grupę przycisków w sposób wertykalny dodając do niej klasę btn-group-vertical
.
clever-shaw-np6yk
clever-shaw-np6yk danielminschinski
Dropdown
Ostatni sposób zaprezentowania przycisków który chciałem pokazać to tzw. “dropdown”. Po kliknięciu na przycisk będzie pojawiało się menu z odnośnikami.
W pierwszej grupie jest przycisk z “dropdown”, który aktywuje się po kliknięciu w element button
.
W drugiej grupie przycisk z tekstem jest odseparowany od przycisku ze strzałką. Po kliknięciu na drugi element button
pojawia się “dropdown” oraz zmienia się jego kolorystyka. Jeżeli klikniemy na pierwszy przycisk z tej grupy, to wykona się akcja podpięta do przycisku.
W trzeciej grupie są przyciski prawie identyczne jak w grupie drugiej – jedyną różnicą jest dodatkowa klasa przy elemencie grupującym (dropup
), dzięki której “dropdown” wysuwa się w górę.
Zobacz na poniższy przykład z zastosowaniem powyższych sposobów:
dank-tree-zucxe
dank-tree-zucxe danielminschinski
Dobrnęliśmy do końca powyższego materiału o przyciskach. Jeżeli chcesz szerzej poznać możliwości Bootstrapa to wysyłam do oficjalnej dokumentacji.
W następnym wpisie zobaczysz o możliwościach media object…
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA