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ładami

---

Post się przydał? Oceń go proszę.

(4 głosów, średnia: 4,75 na 5)

Loading...

---

← Starszy post
Grupowanie przycisków / Button groups
Nowszy post →
Breadcrumbs / Okruszki

Robert 13 marca 2014 o 09:48

Słuszna uwaga:) stronę budowałem jeszcze na Bootstrap 2 a ostatnie lekcje są już na temat Bootstrap 3 stad, idąc na łatwiznę, wklejałem obrazki ale kody źródłowe i przykłady są już w BS3:) Stronę muszę przerobić na BS3 i wtedy wszystko poprawię:)

Odpowiedz