Bootstrap - Kartice (Tabs)


Kreiranje kartica pomoću Bootstrap-a

Navigacija pomoću kartica pruža jednostavan i moćan mehanizam za rukovanje ogromnom količinom sadržaja na malom području razdvajanjem sadržaja u različita okna gdje se svako okno može gledati jedno po jedno. Korisnik može brzo pristupiti sadržaju prebacivanjem između okna bez napuštanja stranice. Sljedeći primjer će vam pokazati kako stvoriti osnovne kartice pomoću komponente tab u Bootstrap-u.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link active">Početna</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profil</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Poruke</a>
    </li>
</ul>
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 Osnovne kartice (Tabs)</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">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#" class="nav-link active">Početna</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profil</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Poruke</a>
        </li>
    </ul>
</div>
</body>
</html>

Dodatak tabs radi i sa tabletama nav. Za kreiranje pill nav samo zamijenite klasu .nav-tabs sa .nav-pills u oznakama kartica, kao što je prikazano u sljedećem primjeru:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Početna</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profil</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Poruke</a>
    </li>
</ul>


Kreiranje dinamičkih kartica putem atributa podataka

Možete aktivirati komponentu kartice bez pisanja bilo kog JavaScript koda. Jednostavno navedite data-toggle="tab" na svakoj kartici i kreirajte .tab-pane s jedinstvenim ID-jem za svaku karticu i umotajte ih u .tab-content. Sljedeći primjer će vam pokazat kako stvoriti osnovne kartice pomoću atributa podataka u Bootstrap-u.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#html" class="nav-link active" data-toggle="tab">HTML5 & CSS3</a>
    </li>
    <li class="nav-item">
        <a href="#bootstrap" class="nav-link" data-toggle="tab">Bootstrap</a>
    </li>
    <li class="nav-item">
        <a href="#javascript" class="nav-link" data-toggle="tab">JavaScript</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="html">
        <p>Sadržaj taba HTML5 & CSS3 ...</p>
    </div>
    <div class="tab-pane fade" id="bootstrap">
        <p>Sadržaj taba Bootstrap ...</p>
    </div>
    <div class="tab-pane fade" id="javascript">
        <p>Sadržaj taba JavaScript ...</p>
    </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">
<title>Kreiranje dinamičkih kartica u Bootstrapu 4 putem atributa podataka</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">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#html" class="nav-link active" data-toggle="tab">HTML5 & CSS3</a>
        </li>
        <li class="nav-item">
            <a href="#bootstrap" class="nav-link" data-toggle="tab">Bootstrap</a>
        </li>
        <li class="nav-item">
            <a href="#javascript" class="nav-link" data-toggle="tab">JavaScript</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="html">
            <h4 class="mt-2">O HTML5 & CSS3</h4>
            <p>Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
        </div>
        <div class="tab-pane fade" id="bootstrap">
            <h4 class="mt-2">O Bootstrap-u</h4>
            <p>Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="tab-pane fade" id="javascript">
            <h4 class="mt-2">O JavaScript</h4>
            <p>Javascript je dinamički programski jezik koji se uglavnom koristi 
            kao sastavni dio web pretraživača.</p>
        </div>
    </div>
</div>
</body>
</html>


Kreiranje dinamičkih kartica putem JavaScripta

Kartice možete omogućiti i putem JavaScript. Svaku karticu je potrebno aktivirati zasebno.

<script>
$(document).ready(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</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>Kreiranje dinamičkih kartica u Bootstrapu 4 putem JavaScript -a</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>
<script>
    $(document).ready(function(){ 
        $("#myTab a").click(function(e){
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <ul id="myTab" class="nav nav-pills">
        <li class="nav-item">
            <a href="#html" class="nav-link active">HTML5 & CSS3</a>
        </li>
        <li class="nav-item">
            <a href="#bootstrap" class="nav-link">Bootstrap</a>
        </li>
        <li class="nav-item">
            <a href="#javascript" class="nav-link">JavaScript</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="html">
            <h4 class="mt-2">O HTML5 & CSS3</h4>
            <p>Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
        </div>
        <div class="tab-pane fade" id="bootstrap">
            <h4 class="mt-2">O Bootstrap-u</h4>
            <p>Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="tab-pane fade" id="javascript">
            <h4 class="mt-2">O JavaScript</h4>
            <p>Javascript je dinamički programski jezik koji se uglavnom koristi 
            kao sastavni dio web pretraživača.</p>
        </div>
    </div>
</div>
</body>
</html>

Pojedine kartice možete aktivirati na nekoliko načina:

$('#myTab a[href="#profile"]').tab('show'); // Prikaži karticu na koju cilja birač
$("#myTab a:first").tab('show'); // Prikaži prvu karticu
$("#myTab a:last").tab('show'); // Prikaži zadnju karticu
$("#myTab li:eq(2) a").tab('show'); // Prikaži treću karticu (indeksirana 0, poput niza)
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>Aktiviranje Bootstrap 4 pojedinačne kartice putem JavaScript-a</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>
<script>
    $(document).ready(function(){ 
        $("#myTab a:last").tab('show'); // Prikaži zadnju karticu pri učitavanju stranice
    });
</script>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-tabs" id="myTab">
        <li class="nav-item">
            <a href="#html" class="nav-link" data-toggle="tab">HTML5 &CSS3</a>
        </li>
        <li class="nav-item">
            <a href="#bootstrap" class="nav-link" data-toggle="tab">Bootstrap</a>
        </li>
        <li class="nav-item">
            <a href="#javascript" class="nav-link" data-toggle="tab">JavaScript</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade" id="html">
            <h4 class="mt-2">O HTML5 & CSS3</h4>
            <p>Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
        </div>
        <div class="tab-pane fade" id="bootstrap">
            <h4 class="mt-2">O Bootstrap-u</h4>
            <p>Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="tab-pane fade" id="javascript">
            <h4 class="mt-2">O JavaScript</h4>
            <p>Javascript je dinamički programski jezik koji se uglavnom koristi 
            kao sastavni dio web pretraživača.</p>
        </div>
    </div>
</div>
</body>
</html>


Metoda - $().tab('show')

Ovo je standardna metoda kartice pri pokretanju. Aktivira element kartice i odgovarajući kontejner sadržaja. Kartica treba imati data-target ili href za ciljanje čvora kontejnera u DOM-u.

<script>
$(document).ready(function(){
    $("#myTab li:eq(1) a").tab('show');
})
</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 $().tab('show') metoda</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>
<script>
$(document).ready(function(){ 
    $("#myTab li:eq(1) a").tab('show'); // Prikaži drugu karticu pri učitavanju stranice
});
</script>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-tabs" id="myTab">
        <li class="nav-item">
            <a href="#html" class="nav-link" data-toggle="tab">HTML5 & CSS3</a>
        </li>
        <li class="nav-item">
            <a href="#bootstrap" class="nav-link" data-toggle="tab">Bootstrap</a>
        </li>
        <li class="nav-item">
            <a href="#javascript" class="nav-link" data-toggle="tab">JavaScript</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade" id="html">
            <h4 class="mt-2">O HTML5 & CSS3</h4>
            <p>Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
        </div>
        <div class="tab-pane fade" id="bootstrap">
            <h4 class="mt-2">O Bootstrap-u</h4>
            <p>Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="tab-pane fade" id="javascript">
            <h4 class="mt-2">O JavaScript</h4>
            <p>Javascript je dinamički programski jezik koji se uglavnom koristi 
            kao sastavni dio web pretraživača.</p>
        </div>
    </div>
</div>
</body>
</html>


Događaji

Ovo su standardni Bootstrap događaji za poboljšanje funkcionalnosti kartice.

Događaj Opis
show.bs.tab Ovaj događaj se aktivira u prikazu kartica, ali prije nego što je prikazana nova kartica. Možete koristiti event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
shown.bs.tab Ovaj događaj se aktivira u prikazu kartica nakon prikaza kartice. Možete koristiti event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
hide.bs.tab Ovaj događaj se aktivira kada se trenutna aktivna kartica treba sakriti i zbog toga se mora prikazati nova kartica. Možete koristiti event.target i event.relatedTarget za ciljanje trenutne aktivne kartice i nove kartice koja će uskoro biti aktivna.
hidden.bs.tab Ovaj događaj se aktivira nakon što je prethodna aktivna kartica skrivena i prikazana je nova kartica. Možete koristiti event.target i event.relatedTarget za ciljanje prethodne aktivne kartice, odnosno nove aktivne kartice.

Sljedeći primjer prikazuje imena aktivne kartice i prethodne kartice korisniku kada je prelaz kartice potpuno dovršen.

<script>
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
        e.target // Aktivni tab (kartica)
        e.relatedTarget // Prethodni tab (kartica)
    })
});
</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 Događaji taba (kartice)</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>
<script>
    $(document).ready(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
            var activeTab = $(e.target).text(); // Dobijanje naziva aktivne kartice
            var previousTab = $(e.relatedTarget).text(); // Dobijanje naziva prethodne kartice
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <ul id="myTab" class="nav nav-tabs">
        <li class="nav-item">
            <a href="#html" class="nav-link active" data-toggle="tab">HTML5 & CSS3</a>
        </li>
        <li class="nav-item">
            <a href="#bootstrap" class="nav-link" data-toggle="tab">Bootstrap</a>
        </li>
        <li class="nav-item">
            <a href="#javascript" class="nav-link" data-toggle="tab">JavaScript</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="html">
            <h4 class="mt-2">O HTML5 & CSS3</h4>
            <p>HTML označava HyperText Markup Language. HTML je
            osnovni blok World Wide Web-a. HTML je glavni jezik za opis 
            strukture web stranica. Hypertext je tekst prikazan na računaru ili 
            drugom električnom uređaju s referencama na tekst kojem korisnik 
            može odmah pristupiti, obično klikom miša ili pritiskom tipke.</p>
        </div>
        <div class="tab-pane fade" id="bootstrap">
            <h4 class="mt-2">O Bootstrap-u</h4>
            <p>Bootstrap je moćan front-end framework za brži i lakši 
            web razvoj. Bootstrap uključuje dizajna zasnovane na HTML-u i 
            CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa 
            poput obrazaca, dugmadi, navigacija, padajućih menija, upozorenja i 
            tako dalje. Bootstrap vam daje mogućnost stvaranja fleksibilnih i 
            prilagodljivih web stranica s mnogo manje napora. Bootstrap su 
            prvobitno kreirali dizajner i programer na Twitteru sredinom 2010. 
            godine. Prije nego što je bio otvorenog koda, Bootstrap je bio 
            poznat kao Twitter Blueprint. Pomoću Bootstrap-a možete uštediti 
            puno vremena i truda.</p>
        </div>
        <div class="tab-pane fade" id="javascript">
            <h4 class="mt-2">O JavaScript</h4>
            <p>JavaScript je najpopularniji client-side skriptni jezik. 
            JavaScript je široko korišten skriptni jezik na strani klijenta. Skripcije
            na strani klijenta odnose se na skripte koje se pokreću u vašem 
            web pretraživaču. JavaScript je dizajnirana za dodavanje 
            interaktivnosti i dinamičnih efekata na web stranice manipulacijom
            sadržajem vraćenim sa web servera.</p>
        </div>
    </div>
    <hr>
    <p class="text-info"><em>Kliknite na bilo koju drugu karticu da vidite kako to funkcioniše.</em></p>
    <p class="active-tab"><strong>Aktivna kartica</strong>: <span></span></p>
    <p class="previous-tab"><strong>Prethodna kartica</strong>: <span></span></p>
</div>
</body>
</html>