Bootstrap - Input Groupe


Proširivanje kontrola forme pomoću Bootstrap-a

Komponenta ulazne grupe Bootstrap-a vrlo su fleksibilna i moćne komponenta za stvaranje interaktivnih i elegantnih kontrola, međutim ograničena je samo na tekstualni unos. U nastavku vidjećete kako proširiti polja za unos zasnovana na dodavanju teksta, ikona ili dugmadi prije, poslije ili s obe strane kako biste oblik učinili privlačnijim.



Stvaranje unaprijed dodanih ulaza (Prepended and Appended Inputs)

Grupe za unos kreiraju se pomoću klase .input-group. Djeluje kao kontejner za ulaze i dodatke. Dalje, upotrijebite klasu .input-group-prepend za postavljanje dodataka prije unosa, dok koristite klasu .input-group-append za postavljanje dodataka nakon unosa. Takođe obavezno umotajte tekst ili ikonu u element <span> i na nju primijenite klasu .input-group-text za pravilno prikazivanje i oblikovanje. Isprobajte sljedeći primjer da vidite kako to funkcioniše:

<div class="row">
    <div class="col-sm-4">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <span class="fa fa-user"></span>
                </span>                    
            </div>
            <input type="text" class="form-control" placeholder="Korisničko ime">
        </div>
    </div>
    <div class="col-sm-4">
        <div class="input-group">            
            <input type="text" class="form-control" placeholder="Cijena">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" placeholder="US Dollar">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Bootstrap 4 Prepend i Append unosi</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">
    <form>
        <div class="row">
            <div class="col-sm-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <span class="fa fa-user"></span>
                        </span>                    
                    </div>
                    <input type="text" class="form-control" placeholder="Korisničko ime">
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">            
                    <input type="text" class="form-control" placeholder="Cijena">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">$</span>
                    </div>
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:




Dodaci sa checkbox-es i radio dugmad

Slično prethodnom primjeru, možete dodati okvir za potvrdu ili radio dugme u dodatak grupe za unos umjesto teksta.

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <input type="checkbox">
                </span>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <input type="radio">
                </span>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Bootstrap 4 Dodaci sa checkbox i radio 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">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="checkbox">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="radio">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Postavljanje više ulaza ili dodataka

Takođe možete lako smjestiti više ulaza jedan pored drugog unutar grupe unosa. Pogledajmo primjer:

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Vaše podaci</span>
    </div>
    <input type="text" class="form-control" placeholder="Ime">
    <input type="text" class="form-control" placeholder="Prezime">
</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, shrink-to-fit=no">
<title>Postavljanje više ulaza unutar grupe unosa u Bootstrap 4</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">
    <form>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Vaši podaci</span>
            </div>
            <input type="text" class="form-control" placeholder="Ime">
            <input type="text" class="form-control" placeholder="Prezime">
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Slično predhodnom primjeru, takođe možete smjestiti više dodataka jedan pored drugog unutar ulazne grupe. Možete ga kombinovati i sa potvrdnim okvirom i radio ulazima, kao što je prikazano u sljedećem primjeru:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <input type="checkbox">
                </span>
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
                <span class="input-group-text">0.00</span>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Postavljanje više dodataka unutar ulazne grupe u Bootstrap 4</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">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="checkbox">
                        </span>
                        <span class="input-group-text">$</span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">$</span>
                        <span class="input-group-text">0.00</span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dodaci dugmadi za unos teksta

Dugmad možete dodati ili dodati umesto teksta. Jednostavno, smjestite koliko god želite dugmadi u klasu .input-group-prepend ili u klasu .input-group-append, kao što je prikazano u sljedećem primjeru:

<div class="row">    
    <div class="col-sm-5">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Pretraga...">
            <div class="input-group-append">
                <button type="button" class="btn btn-secondary">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Upiši nešto...">
            <div class="input-group-append">
                <button type="submit" class="btn btn-primary">Pošalji</button>
                <button type="reset" class="btn btn-danger">Poništi</button>
            </div>
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Bootstrap 4 Grupe za unos sa dzgmadima</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">
    <form>
        <div class="row">    
            <div class="col-sm-5">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Pretraga...">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-secondary">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Upiši nešto...">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">Pošalji</button>
                        <button type="reset" class="btn btn-danger">Poništi</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dodavanje padajućih tipki za unose teksta

Možete čak dodati dugme s padajućim tipkama za unos teksta ako želite izvršiti više od jedne radnje s dugmadima. Takođe u slučaju ulazne grupe ne treba vam klasa .dropdown. Pogledajmo primjer:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Padajuća lista</button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Prva stavka</a>
                    <a href="#" class="dropdown-item">Druga stavka</a>
                </div>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Druga padajuća lista</button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Prva stavka</a>
                    <a href="#" class="dropdown-item">Druga stavka</a>
                </div>
            </div>                
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Bootstrap 4 ulazne grupe s padajućim dugmadima</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">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Padajuća lista</button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Prva stavka</a>
                            <a href="#" class="dropdown-item">Druga stavka</a>
                        </div>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Druga padajuća lista</button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Prva stavka</a>
                            <a href="#" class="dropdown-item">Druga stavka</a>
                        </div>
                    </div>                
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Dodavanje segmentiranih grupa padajućih dugmadi (Dropdown Button)

Slično tome, možete definisati segmentiranu skupinu padajućih mjesta gdje se pored ostalih dugmadi nalazi i padajuće dugme, kao što je prikazano u sljedećem primjeru:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary">Action</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Prva stavka</a>
                    <a href="#" class="dropdown-item">Druga stavka</a>
                </div>
            </div>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary">Action</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Prva stavka</a>
                    <a href="#" class="dropdown-item">Druga stavka</a>
                </div>
            </div>                
        </div>
    </div>
</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, shrink-to-fit=no">
<title>Bootstrap 4 ulazne grupe sa podijeljenim padajućim grupama</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">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-outline-secondary">Prva grupa</button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Prva stavka</a>
                            <a href="#" class="dropdown-item">Druga stavka</a>
                        </div>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary">Druga grupa</button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Prva stavka</a>
                            <a href="#" class="dropdown-item">Druga stavka</a>
                        </div>
                    </div>                
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Veličina ulaznih grupa

Možete i dodati relativne klase za određivanje veličine oblika, kao što su .input-group-lg ili .input-group-sm, samom elementu .input-group da bi bio veći ili manji po visini. Sadržaj unutar .input-grupe automatski će promijeniti veličinu, nema potrebe za ponavljanjem klasa veličine kontrolne forme na svakom elementu. Pogledajmo primjer:

<!-- Velika (Larger) input grupa -->
<div class="input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text">Velika (Larger) veličina</span>
    </div>
    <input type="text" class="form-control">
</div>

<!-- Difoltna (Default ) input grupa -->
<div class="input-group mt-2">
    <div class="input-group-prepend">
        <span class="input-group-text">Difoltna (Default) veličina</span>
    </div>
    <input type="text" class="form-control">
</div>

<!-- Mala (Smaller) input grupa -->
<div class="input-group input-group-sm mt-2">
    <div class="input-group-prepend">
        <span class="input-group-text">Mala (Small) veličina</span>
    </div>
    <input type="text" class="form-control">
</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, shrink-to-fit=no">
<title>Veličina ulazne grupe Bootstrap 4</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">
    <form>
        <!-- Velika (Larger) input grupa -->
        <div class="input-group input-group-lg">
            <div class="input-group-prepend">
                <span class="input-group-text">Velika (Larger) veličina</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <!-- Difoltna (Default ) input grupa -->
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">Difoltna (Default) veličina</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <!-- Mala (Smaller) input grupa -->
        <div class="input-group input-group-sm mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">Mala (Small) veličina</span>
            </div>
            <input type="text" class="form-control">
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: