Bootony – bootstrapowe przyciski

Klik, klik – przyciskamy myszą te przyciski OK, Anuluj, Wyślij i co tam jeszcze komu wpadnie do głowy. Nie zwracamy na nie uwagi (no chyba, że nie można odczytać co jest na nich napisane) do momentu gdy sami  nie potrzebujemy mieć dokładnie takich jak chcemy.

Bootstrap daje nam kilka możliwości w zakresie przycisków. Załóżmy, że mamy kilka linków tak jak w przykładzie poniżej i chcemy je przekształcić w przyciski – jest to możliwe z wykorzystaniem CSS i HTML ale trochę trzeba zrobić (https://www.rafalrebacz.pl/2015/09/20/buttony-ach-buttony/). Podobnie działa bootstrap z tym, że daje nam już gotowe klasy, które mogą być wykorzystane do formatowania linków (zmiany ich w przyciski).

Przykładowo: mamy zwyczajny link

<a href="#">uruchom</a>

który wyświetli się tak: uruchom Prawda, że mało przyciskowo wygląda?

Poniżej przykład ze strony z uruchomionym bootstrapem:

Do wygenerowania czterech powyższych przycisków posłużył nam kod:

<a class="btn btn-default" href="#" role="button">Link</a> 
<button class="btn btn-default" type="submit">Button</button> 
<input class="btn btn-default" type="button" value="Input"> 
<input class="btn btn-default" type="submit" value="Submit">

Jak widać do linków zostały dodane klasy „btn btn-default”, które przemieniły je w ładne przyciski. No ale to trochę mało i szaro. Bootstrap oferuje kilka klas, które mogą służyć do definiowania funkcji/ważności przycisków. Poniżej przykład ze strony z uruchomionym bootstrapem:

Za przyciski te odpowiada kod:

<a class="btn btn-default" href="#">uruchom</a> 
<a class="btn btn-primary" href="#">zlecenia</a> 
<a class="btn btn-success" href="#">OK</a> 
<a class="btn btn-info" href="#">statystyka</a> 
<a class="btn btn-warning" href="#">brak uprawnień</a> 
<a class="btn btn-danger" href="#">WYŁĄCZ</a> 
<a class="btn btn-link" href="#">statystyka</a>

Kilka uwag:
Jeśli linki <a> mają być elementami strony zmieniającymi jej funkcjonalność a nie przenoszącymi nas do innej treści to powinny elementy te zawierać dodatkowo wpis -> role=”button”.

Więcej szczegółów na stronie bootstrap dotyczącej przycisków -> https://getbootstrap.com/css/#buttons

Jak widać na powyższych przykładach to wszystkie buttony mają taką samą wysokość – szerokość zależną od treści, która jest wyświetlana przez przycisk. Można to zmienić poprzez zastosowanie klas btn-lg, btn-sm, btn-xs. Ten sam przycisk w kilku wersjach:

Odpowiada za to kod:

<div class="col-md-6">     
	<a class="btn btn-primary btn-lg" href="#">zlecenia</a>     
	<a class="btn btn-primary" href="#">zlecenia</a>     
	<a class="btn btn-primary btn-sm" href="#">zlecenia</a>     
	<a class="btn btn-primary btn-xs" href="#">zlecenia</a> 
</div> 
<div class="col-md-6">     
	<a class="btn btn-default btn-lg" href="#">zlecenia</a>     
	<a class="btn btn-default" href="#">zlecenia</a>     
	<a class="btn btn-default btn-sm" href="#">zlecenia</a>     
	<a class="btn btn-default btn-xs" href="#">zlecenia</a> 
</div>

Jeśli użyjemy klasy „btn-block” to nasze przyciski zajmą całą szerokość elementu „rodzica” – w tym wypadku div’a.

Lepiej jest to widoczne tutaj-> https://www.rafalrebacz.pl/examples/bootstrap/button4.html

a odpowiada za to kod:

<div class="col-md-4">     
	<a class="btn btn-primary btn-block" href="#">zlecenia</a>     
	<a class="btn btn-default btn-block" href="#">zlecenia</a> 
</div>

Często przyciski na stronie mają stan wskazujący, że dana opcja jest wybrana, lub jesteśmy właśnie na stronie wskazywanej przez ten przycisk – najczęściej stan przycisku odbiega wyglądem od pozostałych np. przycisk jest „wciśnięty”, ma inny kolor itp. Tutaj też może wspomóc nas klasa bootstrap.

Jeśli dodamy do naszego elementu <a> klasę „active” to przycisk okaże się wybranym. Przykład poniżej („wybrany” jest przycisk
strona2):

Jeśli mamy elementy <button> to wizualnie efekt jest taki sam jak w przypadku elementu <a>:

Odpowiedzialny za powyższe kod wygląda tak:

<div class="col-md-4">
	<button type="button" class="btn btn-default">strona1</button>
	<button type="button" class="btn btn-default active">strona2</button>
	<button type="button" class="btn btn-default">strona3</button>
	<button type="button" class="btn btn-default">strona4</button>
	<button type="button" class="btn btn-default">strona5</button> 
</div

Na sam koniec jeszcze jedna klasa, która sprawia, że przycisk zmienia swój wygląd na „disabled” czyli jest lekko poszarzony. Klasa, która tego dokonuje to „disabled”. Przykłady dla <a> oraz <button> poniżej:

kod powyższego rozwiązania:

<div class="row">
<div class="col-md-4">
        <a href="#" type="button" class="btn btn-default" role="button">strona1</a>
        <a href="#" type="button" class="btn btn-default role="button" disabled">strona2</a>
        <a href="#" type="button" class="btn btn-default" role="button">strona3</a>
        <a href="#" type="button" class="btn btn-default" role="button">strona4</a>
        <a href="#" type="button" class="btn btn-default" role="button">strona5</a>
    </div>      
</div>
<div class="row">
<div class="col-md-4">
        <button type="button" class="btn btn-primary">strona1</button>
        <button type="button" class="btn btn-primary disabled">strona2</button>
        <button type="button" class="btn btn-primary">strona3</button>
        <button type="button" class="btn btn-primary">strona4</button>
        <button type="button" class="btn btn-primary">strona5</button>
    </div>            
</div>
Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz