Rozwijane przyciski / Buttons dropdown
autor: Robert
11 listopada 2013
Dłuższy czas nie pojawiało się nic nowego. Niestety ale praca, szkolenia itp itd nie pozwoliły mi się skupić na blogu. Mam nadzieję, że teraz nadrobię te kilka straconych miesięcy.
Myślę też nad stworzeniem portalu typu Q&A albo forum gdzie będziecie mogli wrzucać swoje pomysły na wykorzystanie bootstrapa oraz pytać w razie niejasności.
Z racji tego, że w końcu będę musiał zapłacić za domenę i serwer bardzo Was proszę o klikanie w reklamy, jeśli jakaś was oczywiście zainteresuje:)
Pojedyncze rozwijane przyciski
O buttonach było już kilka wpisów więc nie muszę chyba ich przedstawiać. We wpisie o grupowaniu przycisków pokazałem możliwość zastosowania listy rozwijanej pojawiającej się po kliknięciu w button. Teraz postaram się pokazać dokładniej jak to zrobić.
Tak więc zaczynamy:
Stworzenie rozwijanego przycisku to nic innego jak stworzenie grupy która składa się z buttona i listy. Grupę tworzymy poprzez stworzenie diva
<div class="btn-group">...</div>.
Wewnątrz tworzymy standardowy button ale zawierający klasę dropdown-toggle oraz w tekście pojawiającym się na przycisku dodajemy „dziubek” w dół poprzez kod <span class="caret"></span>. Kolejnym elementem w naszej grupie jest rozwijana lista. Do zapoznania się z jej formatem zapraszam TUTAJ. I to właściwie wszystko. Pamietajcie, że poprzez zmianę klasy przycisku (btn-default, btn-danger, btn-success) możemy zmieniać jego kolor.
Całość kodu wygląda tak:
Rozdzielone przyciski
W tym przypadku naciśnięcie przycisku nie powoduje rozwinięcia listy, od tego mamy dodatkowe pole w buttonie.
Aby stworzyć coś takiego również całość zamykamy w divie <div class="btn-group">. Różnica polega na tym, że teraz tworzymy 2 buttony. Jeden z nich z tekstem który chcemy na przycisku i klasą zwykłego przycisku class=btn btn-danger a drugi z nich będzie posiadał ów „dziubek” oraz podpiętą listę i klasę class="btn btn-danger dropdown-toggle" data-toggle="dropdown".
Całość wygląda następująco:
Myślę, że filozofia tworzenia nie jest trudna. W przypadku pojedynczego przycisku podpinamy listę pod akcję na przycisku. W przypadku rozdzielonego tworzymy grupę przycisków w której jeden z nich jest zwykłym buttonem a drugi ma podpiętą listę.
Lista rozwijana w górę
Możliwe jest stworzenie listy która rozwija się do góry. Wystarczy w tym przypadku zmienić klasę <div class="btn-group dropdown"> na <div class="btn-group dropup">.
Standardowo stronka z przykładami
Strona z przykładamiPost się przydał? Oceń go proszę.
(4 głosów, średnia: 4,75 na 5)
Loading...