Bootstrap - Dugmad (Buttons)


Kreiranje dugmadi pomoću Bootstrap-a

Dugmad su sastavni dio web stranice i aplikacije. Koriste se u razne svrhe, poput podnošenja ili resetovanja HTML formi, izvođenja interaktivnih radnji poput prikazivanja ili skrivanja nečega na web stranici klikom na dugme, preusmjeravanja korisnika na drugu stranicu itd. Bootstrap pruža brz i jednostavan način za stvaranje i prilagođavanje dugmadi.



Stilovi dugmadi u Bootstrap-u

U Bootstrap-u su dostupne različite klase za oblikovanje dugmadi, kao i za ukazivanje na različita stanja ili semantiku. Stilovi dugmadi mogu se primijeniti na bilo koji element. Međutim, obično se primjenjuje na elemente <a>, <input> i <button> za najbolje prikazivanje. Sljedeći primjer će vam pokazati kako kreirati različite stilove dugmadi u Bootstrap-u:

<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>
<button type="button" class="btn btn-link">Link</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, shrink-to-fit=no">
<title>Bootstrap 4 Dugmad (Buttons)</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <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>
    <button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dugmad sa obrisom u Bootstrap-u

Takođe možete stvoriti dugme za konture zamjenom klasa modifikatora dugmeta, poput sljedećeg primjera:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</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, shrink-to-fit=no">
<title>Bootstrap 4 Dugmad s obrisom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light">Light</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Promjena veličine dugmeta

Bootstrap vam daje mogućnost daljeg skaliranja dugmeta gore ili dolje. Dugmad možete povećati ili smanjiti dodavanjem dodatne klase .btn-lg ili .btn-sm, poput idućeg primjera:

<button type="button" class="btn btn-primary btn-lg">Veliko (Large)</button>
<button type="button" class="btn btn-primary">Difoltno (Default)</button>
<button type="button" class="btn btn-primary btn-sm">Mali (Small)</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, shrink-to-fit=no">
<title>Bootstrap 4 Veličina dugmadi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg">Veliko dugme</button>
    <button type="button" class="btn btn-secondary btn-lg">Veliko dugme</button>
    <hr>
    <button type="button" class="btn btn-primary">Difoltna veličina dugmeta</button>
    <button type="button" class="btn btn-secondary">Difoltna veličina dugmeta</button>
    <hr>
    <button type="button" class="btn btn-primary btn-sm">Malo dugme</button>
    <button type="button" class="btn btn-secondary btn-sm">Malo dugme</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:





Takođe možete stvoriti dugmad na nivou bloka (dugmad koja pokrivaju punu širinu nadređenih elemenata) dodavanjem dodatne klase .btn-block na dugmad, poput sljedećeg primjera:

<button type="button" class="btn btn-primary btn-lg btn-block">Blok nivo dugme</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Blok nivo dugme</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, shrink-to-fit=no">
<title>Bootstrap 4 Blok-level dugmad</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg btn-block">Blok nivo dugme</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Blok nivo dugme</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dugme za onemogućavanje (Disabled Buttons)

Ponekad iz određenih razloga trebamo onemogućiti dugme, na primjer korisnik u slučaju da ne ispunjava uslove za izvođenje ove određene radnje ili želimo osigurati da korisnik izvrši sve ostale potrebne radnje prije nego što nastavi s tom određenom radnjom. Pogledajmo kako to učiniti.



Kreiranje onemogućenih dugmadi pomoću dugmeta i ulaznog elementa

Dugmad kreirana pomoću elementa <button> ili <input> mogu se onemogućiti dodavanjem atributa disabled odgovarajućem elementu, kao što je prikazano u sljedećem primjeru:

<button type="button" class="btn btn-primary btn-lg" disabled>Primary dugme</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Dugme</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, shrink-to-fit=no">
<title>Bootstrap 4 Blok-level dugme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" disabled>Primary dugme</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Dugme</button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Stvaranje onemogućenih dugmadi pomoću sidrenih elemenata

Dugmad kreirana pomoću elementa &lra> mogu se onemogućiti dodavanjem klase .disabled, kao u idućem primjeru:

<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
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, shrink-to-fit=no">
<title>Bootstrap 4 Onemogućena sidrena dugmad</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary link Link



Aktivni gumbi u Bootstrap-u (Active Buttons)

Takođe možete primijeniti klasu .active kako biste prisilili da dugmad izgledaju aktivno (tj. pritisnute). Obično ne morate dodavati ovu klasu na dugmad, jer njihovo aktivno stanje automatski oblikuje Bootstrap pomoću CSS :active pseudo-klase. Pogledajmo primjer:

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
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, shrink-to-fit=no">
<title>Bootstrap 4 Aktivno dugme (Active Buttons)</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary link Link

Kreiranje Spinner dugmadi

Pomoću Bootstrapa možete lako uključiti ikonu okretača u dugme kako biste naznačili stanje učitavanja u svojoj aplikaciji. Pogledajte sljedeći primjer da biste vidjeli kako to funkcioniše:

<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span> Učitavanje...
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span> Učitavanje...
</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, shrink-to-fit=no">
<title>Bootstrap 4 Spinner dugmad</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
    </button>
    <button type="button" class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span> Učitavanje...
    </button>
    <button type="button" class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span> Učitavanje...
    </button>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: