#54. Komponent – button

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ę.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!