Bootstrap - Navigacija


Bootstrap navigacijske komponente

Bootstrap pruža jednostavan i brz način za stvaranje osnovnih navigacijskih komponenti poput kartica i tableta koje su vrlo fleksibilne i elegantne. Sve navigacijske komponente Bootstrap-a dijele iste osnovne oznake i stilove kroz osnovnu .nav klasu.



Kreiranje osnovne navigacije pomoću Bootstrap-a

Bootstrap klasu .nav možete koristiti za stvaranje osnovnog navigacijskog menija, poput idućeg primjera:

<nav class="nav">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">Kursevi</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 Navigacija</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 class="nav">
        <a href="#" class="nav-item nav-link active">Početna</a>
        <a href="#" class="nav-item nav-link">Kursevi</a>
        <a href="#" class="nav-item nav-link">O nama</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:




Poravnanje navigacijskih elemenata

Prema zadanim postavkama navigacijski elementi su poravnati lijevo, ali ih možete lako poravnati prema sredini ili desno pomoću flexbox-a. Sljedeći primjer koristi klasu .justify-content-center za poravnanje stavki navigacije prema centru.

<nav class="nav justify-content-center">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">Kursevi</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 Centriranje stavki navigacije</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 class="nav justify-content-center">
        <a href="#" class="nav-item nav-link active">Početna</a>
        <a href="#" class="nav-item nav-link">Kursevi</a>
        <a href="#" class="nav-item nav-link">O nama</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Takođe možete i vertikalno slagati svoje navigacijske stavke mijenjanjem smjera stavki navigacije pomoću klase .flex-column, kao što je pokazano u sljedećem primjeru:

<nav class="nav flex-column">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">Kursevo</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje osnovnih tabova

Jednostavno dodajte klasu .nav-tabs u osnovnu navigaciju kako biste generisali navigaciju s tabovima, poput idućeg primjera:

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">Kursevi</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 Navigacijski tabovi</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 class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">Početna</a>
        <a href="#" class="nav-item nav-link">Kursevi</a>
        <a href="#" class="nav-item nav-link">O nama</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Takođe možete dodati ikone za stavkama na kartici kako biste je učinili atraktivnijom, kao što je prikazano u sljedećem primjeru:

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">
        <i class="fa fa-home"></i> Početna
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-code"></i> Kursevi
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-line-chart"></i> O nama
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="fa fa-envelope"></i> Kontakt
    </a>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje navigacijskih tableta

Slično tome, možete kreirati navigaciju zasnovanu na tabletama dodavanjem klase .nav-pills na osnovnu navigaciju umjesto klase .nav-tabs, kao što je prikazano u sljedećem primjeru:

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">Kursevi</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 Navigacijske tabele</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 class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">Početna</a>
        <a href="#" class="nav-item nav-link">Kursevi</a>
        <a href="#" class="nav-item nav-link">O nama</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Poput navigacijskih kartica, navigacijskim tabletama možete dodati ikone kako biste ih učinili atraktivnijim:

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">
        <i class="fa fa-home"></i> Početna
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-code"></i> Kursevi
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-line-chart"></i> O nama
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="fa fa-envelope"></i> Kursevi
    </a>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Pored ovoga, možete primijeniti klasu .flex-column na .nav element da bi tablete navigacije izgledale vertikalno složene, kao što je prikazano u sljedećem primjeru:

<nav class="nav nav-pills flex-column">
    <a href="#" class="nav-item nav-link active">
        <i class="fa fa-home"></i> Početna
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-code"></i> Kursevi
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="fa fa-line-chart"></i> O nama
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="fa fa-envelope"></i> Kontakt
    </a>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kartice i tablete Bootstrap navigaacije s padajućim stavkama

Možete dodati padajuće stavke na link unutar tabova i tableta navigacije s malo dodatnih oznaka. Četiri CSS klase .dropdown, .dropdown-toggle, .dropdown-menu i .dropdown-item su potrebne uz klase .nav, .nav-tabs ili .nav-pills da bi se stvorio jednostavan padajuće meni unutar navigacije, koristeći bilo koji JavaScript kod.



Kreiranje tabova sa padajućim menijima

Sljedeći primjer će vam pokazati kako dodati jednostavne padajuće stavke na tabove.

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5-CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <a href="#" class="dropdown-item">Bootstrap 4</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 Tabovi padajućeg 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">
    <nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5-CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <a href="#" class="dropdown-item">Bootstrap 4</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje navigacije sa tabovima tabele

Sljedeći primjer će vam pokazati kako dodati jednostavne padajuće stavke u navigaciju tableta.

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5-CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</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 5 Tabovi sa padajućim menijem</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 class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5-CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
</nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Poravnanje navigacijskih stavki

Možete prisiliti svoje navigacijske stavke da se proširuju i proporcionalno popune svu dostupnu širinu pomoću klase .nav-fill na .nav elementu. U sljedećem primjeru sav vodoravni prostor zauzimaju navigacijske stavke, ali svaka navigacijska stavka nema istu širinu.

<nav class="nav nav-pills nav-fill">
    <a href="#" class="nav-item nav-link">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link active">Dostupni kursevi</a>
    <a href="#" class="nav-item nav-link">Kontakt</a>
</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 Navigacija</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 class="nav nav-pills nav-fill">
      <a href="#" class="nav-item nav-link">Početna</a>
      <a href="#" class="nav-item nav-link">O nama</a>
      <a href="#" class="nav-item nav-link active">Dostupni kursevi</a>
      <a href="#" class="nav-item nav-link">Kontakt</a>
  </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Takođe možete koristiti klasu .nav-justified umjesto klase .nav-fill, ako želite da navigacija ispunjava sav vodoravni prostor, kao i da svaka stavka ima istu širinu.

<nav class="nav nav-pills nav-justified">
    <a href="#" class="nav-item nav-link">Početna</a>
    <a href="#" class="nav-item nav-link">O nama</a>
    <a href="#" class="nav-item nav-link active">Dostupni kursevi</a>
    <a href="#" class="nav-item nav-link">Kontakt</a>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: