Bootstrap - Prilagođene forme


Kreiranje prilagođenih formi

Bootstrap 4 vam omogućava da prilagodite zadane kontrole forme pretraživača kako biste stvorili još elegantnije rasporede forme. Sada možete stvoriti potpuno prilagođene radio dugmadi i potvrdne okvire kompatibilne s više pretraživača, unose datoteka, odabra padajućih padajuća polja, unose raspona i još mnogo toga. U nastavku ćete vidjet kako stvoriti ove prilagođene elemente forme jedan po jedan.



Kreiranje prilagođenih potvrdnih okvira (Checkboxes)

Da biste kreirali prilagođene potvrdne okvire, svaki okvir za potvrdu <input> i odgovarajuću <label> umotajte u element <div> i primijenite klase kao što je prikazano u sljedećem primjeru:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
    <label class="custom-control-label" for="customCheck1"> Checkbox polje</label>
</div>
<div class="custom-control custom-checkbox mt-2">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
    <label class="custom-control-label" for="customCheck2"> Drugo checkbox polje</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, shrink-to-fit=no">
<title>Bootstrap 4 Prilagođeni checkbox-es</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="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
            <label class="custom-control-label" for="customCheck1"> Checkbox polje</label>
        </div>
        <div class="custom-control custom-checkbox mt-2">
            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
            <label class="custom-control-label" for="customCheck2"> Drugo checkbox polje</label>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje prilagođenih radio dugmadi (Radio Buttons)

Slično checkbox-ovima, možete stvoriti prilagođena radio dugmad koristeći Bootstrap poput ovog:

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Prilagođeni radio</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Drugi prilagođeni radio radio</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, shrink-to-fit=no">
<title>Bootstrap 4 Prilagođena radio dugmad (Radio 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">
    <form>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
            <label class="custom-control-label" for="customRadio1">Prilagođeni radio</label>
        </div>
        <div class="custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
            <label class="custom-control-label" for="customRadio2">Drugi prilagođeni radio</label>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Takođe možete ove prilagođene potvrdne okvire i radio dugmad smjestiti u red jednostavnim dodavanjem klase .custom-control-inline na element <div>, poput ovog:

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Prilagođeni radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Drugi prilagođeni radio</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, shrink-to-fit=no">
<title>Bootstrap 4 Prilagođeni radio u redu</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="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
            <label class="custom-control-label" for="customRadio1">Prilagođeni radio</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
            <label class="custom-control-label" for="customRadio2">Drugi prilagođeni radio</label>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Onemogućavanje prilagođenih potvrdnih okvira i radija

Takođe se mogu onemogućiti prilagođeni okviri za potvrdu i radio dugmad. Samo dodajte logički atribut disabled elementu <input>, kao što je prikazano u sljedećem primjeru:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" disabled>
    <label class="custom-control-label" for="customCheck">Onemogući checkbox</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" id="customRadio" disabled>
    <label class="custom-control-label" for="customRadio">Onemogući radio</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, shrink-to-fit=no">
<title>Bootstrap 4 Onemogućavanje Checkboxes i Radio 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">
    <form>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck" disabled>
            <label class="custom-control-label" for="customCheck">Onemogući checkbox</label>
        </div>
        <div class="custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" id="customRadio" disabled>
            <label class="custom-control-label" for="customRadio">Onemogući radio</label>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje preklopnih prekidača (Toggle Switches)

Oznaka prekidača slična je prilagođenom potvrdnom okviru, jedina razlika je u tome što koristi klasu .custom-switch umjesto .custom-checkbox da bi prikazala preklopni prekidač. Prekidači takođe podržavaju atribut disabled. Pogledajmo primjer:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle switch</label>
</div>
<div class="custom-control custom-switch mt-2">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Onemogući switch element</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, shrink-to-fit=no">
<title>Bootstrap 4 Toggle Switch</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="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1">
            <label class="custom-control-label" for="customSwitch1">Toggle switch</label>
        </div>
        <div class="custom-control custom-switch mt-2">
            <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">Onemogući switch element</label>
        </div>
    </form>
    <p class="mt-4"><strong>Napomena:</strong> Klkinite na toggle switch da biste vidjeli kako primjer radi.</p>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje prilagođenog menija

Meniji po mjeri za odabir mogu se stvoriti jednostavnim dodavanjem klase .custom-select na element <select>. Međutim, prilagođeni stil odabranih menija ograničen je samo na početni izgled i ne može mijenjati <option> zbog ograničenja pretraživača. Pogledajmo primjer:

<select class="custom-select">
    <option selected>Prilagođeni meni za odabir</option>
    <option value="1">Jedan</option>
    <option value="2">Dva</option>
    <option value="3">Tri</option>
</select>
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 Kreiranje prilagođenog menija</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>
        <select class="custom-select">
            <option selected>Prilagođeni meni za odabir</option>
            <option value="1">Jedan</option>
            <option value="2">Dva</option>
            <option value="3">Tri</option>
        </select>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Takođe možete kreirati male i velike prilagođene odabire kako bi se podudarali sa unosima teksta Bootstrap slične veličine.

<select class="custom-select custom-select-lg">
    <option selected>Velika (Large) veličina slova za meni</option>
    <option value="1">Jedan</option>
    <option value="2">Dva</option>
    <option value="3">Tri</option>
</select>
<select class="custom-select mt-3">
    <option selected>Difoltna (Default) veličina slova za meni</option>
    <option value="1">Jedan</option>
    <option value="2">Dva</option>
    <option value="3">Tri</option>
</select>
<select class="custom-select custom-select-sm mt-3">
    <option selected>Mala (Small) veličina slova za meni</option>
    <option value="1">Jedan</option>
    <option value="2">Dva</option>
    <option value="3">Tri</option>
</select>

Bootstrap prilagođeni odabir takođe podržava višestruke atribute i atribute veličine poput uobičajenog odabira:

<select class="custom-select" size="3" multiple>
    <option selected>Klikni na meni za odabir</option>
    <option value="1">Jedan</option>
    <option value="2">Dva</option>
    <option value="3">Tri</option>
</select>


Kreiranje prilagođenih unosa raspona

Da biste kreirali unose prilagođenog raspona, samo primijenite klasu .custom-range na element <input type="range">.

<label for="customRange">Prilagođeni raspon</label>
<input type="range" class="custom-range" id="customRange">
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 Prilagođeni raspon</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>
<script>
    $(document).ready(function(){
        // Očitana vrijednost pri učitavanju stranice
        $("#result b").html($("#customRange").val());

        // Očitana vrijednost pri promjeni
        $("#customRange").change(function(){
            $("#result b").html($(this).val());
        });
    });        
</script> 
</head>
<body>
<div class="bs-example">
    <p class="mt-4"><strong>Napomnea:</strong> Povicite plati krug kako biste vidjeli kako radi.</p>
    <form>
        <label for="customRange">Prilagođeni raspon</label>
        <input type="range" class="custom-range" id="customRange">
    </form>
    <div id="result">Trenutna vrijednost: <b></b></div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Prema zadanim postavkama ulazi imaju implicitne vrijednosti za min i max - 0 i 100, ali možete odrediti nove vrijednosti za one koji koriste atribute min i max. Takođe zadani ulazi opsega "snap" na cjelobrojne vrijednosti. Da biste to promijenili, možete odrediti vrijednost koraka. U sljedećem primjeru udvostručili smo broj koraka pomoću step="0.5".

<label for="customRange">Prilagođeni raspon</label>
<input type="range" class="custom-range" min="0" max="10" step="0.5" id="customRange">


Kreiranje prilagođenih unosa fajlova

Pomoću Bootstrap-a 4 takođe možete kreirati prilagođene unose fajlova koji su elegantni i dosljedno se prikazuju u svim pretraživačima. Isprobajmo sljedeći primjer da vidimo kako to funkcioniše:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</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, shrink-to-fit=no">
<title>Bootstrap 4 Prilagođenih unosi fajlova</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="custom-file">
            <input type="file" class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile">Choose file</label>
        </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: