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ę.
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-infoniebieski kolor neutralny. Używany w przypadkach informacyjnych bądź neutralnych,btn-successzielony kolor. Używany w przypadkach wskazywania pożądanej akcji, np. zatwierdzenia pewnego zdarzenia,btn-warningkolor pomarańczowy – ostrzegawczy. Używany w sytuacji która wymaga przemyślanej decyzji,btn-dangerczerwony 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:
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:
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.
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:
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