Bootstrap - Stanja dugmadi (Stateful Buttons)


Kontrolna stanja dugmadi

U prethodnom dijelu naučili ste o stilu Bootstrap dugmadi i izmjenama, kao i o tome kako stvoriti grupe dugmadi i alatne trake. Uz Bootstrap možete učiniti još više pomoću dugmadi poput kontrole stanja dugmadi, učiniti da se checkbox i radio ulazi ponašaju kao prekidači itd. U sljedećem dijelu ćemo ih detaljno razmotriti.



Kreiranje jednog dugmeta za prebacivanje

Možete aktivirati prebacivanje (tj. Promijeniti normalno stanje dugmeta u stanje pritiska i obrnuto) na jednom dugmetu jednostavnim dodavanjem atributa data-toggle="button". Pogledajmo primjer:

<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Dugme za prebacivanje</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 jedno dugme za prebacivanje</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Dugme za prebacivanje</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:




Kreiranje dugmeta kao potvrdnog okvira

Možete dodati atribut data-toggle="buttons" u grupu potvrdnih okvira za prebacivanje stila okvira za odabir na grupe dugmadi. Takođe možete dodati klasu .active na element <label> unosa ako želite da se opcije unaprijed provjere. Isprobajte sljedeći primjer da vidite kako to funkcioniše:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" name="options" autocomplete="off" checked> Opcija A
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" autocomplete="off"> Opcija B
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" name="options" autocomplete="off" checked> Opcija C
    </label>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Potvrdni oblik kao dugmad (Buttons Checkbox)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" autocomplete="off" checked> Opcija A
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options" autocomplete="off"> Opcija B
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" autocomplete="off" checked> Opcija C
        </label>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:




Kreiranje radijskog dugmeta

Slično prethodnim primjerima možete dodati atribut data-toggle="buttons" u grupu radio ulaza za prebacivanje stila radio dugmadi na grupe dugmadi, kao što je prikazano u sljedećem primjeru:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" autocomplete="off"> Opcija A
    </label>
    <label class="btn btn-primary active">
        <input type="radio" name="options" autocomplete="off" checked> Opcija B
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" autocomplete="off"> Opcija C
    </label>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Radio dugmad (Buttons Radio)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="radio" name="options" autocomplete="off"> Opcija A
        </label>
        <label class="btn btn-primary active">
            <input type="radio" name="options" autocomplete="off" checked> Opcija B
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" autocomplete="off"> Opcija C
        </label>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:



Metoda - $().button('toggle')

Ova metoda prebacuje stanje pritiska dugmeta. Mijenja izgled dugmeta i čini se da je aktiviran. Takođe možete omogućiti automatsko prebacivanje dugmeta jednostavnim korištenjem atributa za prebacivanje podataka (data-toggle). Pogledajmo sljedeći primjer:

<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        $(this).button('toggle');
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Metoda - $().button('toggle')</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $("#myButtons .btn").click(function(){
        $(this).button('toggle');
    });
});
</script>
<style>
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myButtons"> 
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>    
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-light">Light</button>
    </div>
</div>
</body>
</html>