Bootstrap - Breadcrumbs


Kreiranje Breadcrumbs pomoću Bootstrap-a

Breadcrumbs je navigacijska šema koja korisniku pokazuje trenutno mjesto stranice unutar web sajta ili aplikacije. Breadcrumbs navigacija može uvelike poboljšati dostupnost web stranice koja ima velik broj stranica ili složenu navigacijsku hijerarhiju. Pomoću Bootstrapa možete stvoriti statične izglede koristeći klasu .breadcrumb na uređenim listama, kao što je prikazano u sljedećem primjeru:

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Početna</a></li>
        <li class="breadcrumb-item"><a href="#">Kursevi</a></li>
        <li class="breadcrumb-item active">Bootstrap 4</li>
    </ol>
</nav>
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 Breadcrumb</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">
<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Početna</a></li>
        <li class="breadcrumb-item"><a href="#">Kursevi</a></li>
        <li class="breadcrumb-item active">Bootstrap 4</li>
    </ol>
</nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Zadani separator breadcrumbs je /, ali možete ga promijeniti s malo prilagođenog CSS-a, na primjer, ako želite koristiti > kao separator, možete primijeniti sljedeća pravila stila:

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}
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 breadcrumb</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;        
    }
    /* Stil koji mjenja separatora */
    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Početna</a></li>
            <li class="breadcrumb-item"><a href="#">Kursevi</a></li>
            <li class="breadcrumb-item active">Bootstrap 4</li>
        </ol>
    </nav>
</div>
</body>
</html>