Radio i checkbox jako button

3 895 0

Standardowe elementy checkbox i radio nie są zbyt atrakcyjne wizualnie. Oczywiście istnieje wiele bibliotek, które zmieniają ich wygląd, dodają animacje podczas kliknięcia itp. Ale tutaj skupiamy się na samym Bootstrapie, więc zajmiemy się elementem przygotowanym przez jego twórców a mianowicie checkboxem lub radio wyglądającym jak bootstrapowy przycisk a właściwie grupa przycisków.

Checkbox jako button

Zaczniemy od grupy buttonów, które są checkboxami. Naszym „wrapperem” czyli elementem skupiającym będzie div z klasą .btn-group .btn-group-toggle oraz atrybutem data-toggle="buttons". Wewnątrz umieszczamy najpierw element <label> z klasami .btn oraz .btn-*. Kolory a właściwie klasy buttonów opisane są w tym wpisie. Natomiast wewnątrz powyższego elementu umieszczamy sam checkbox czyli <input type="checkbox" autocomplete="off"> Nazwa opcji. Gdy chcemy by był on domyślnie zaznaczony musimy dodać mu atrybut checked. Label w połączeniu z input kopiujemy tyle razy ile checkboxów chcemy mieć. Całość wygląda następująco:

Przykład

Kod

Radio jako button

Elementy radio tworzymy analogicznie do elementów checkbox. Różnica polega na zamianie typu input na radio.

Przykład

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (8 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*