Bootstrap - Fixed Layout


Kreiranje Fixed Layout-a sa Bootstrap-om

Sa Bootstrap-om 4 i dalje možete da kreirate rasporede web stranica na osnovu fiksnog broja piksela, međutim širina kontejnera varira u zavisnosti od širine okvira za prikaz. Proces kreiranja fiksnog, ali odzivnog izgleda u osnovi započinje sa .container klasom.

Poslje toga možete stvoriti redove sa .row klasom da biste omotali horizontalne grupe kolona. Redovi moraju biti smješteni u .container radi pravilnog poravnanja i dodavanja. Dalje kolone mogu se kreirati unutar reda pomoću unaprijed definisanih klasa kao što su .col-*, .col-sm-*, .col-md-*, .col-lg-* i .col-xl-* gde * predstavljaju broj grid-a i trebalo bi da bude od 1 do 12. Pogledajte lekciju Grid System u Bootstrap-u da biste saznali više o Grid System-u.

Sljedeći primjer kreira raspored fiksne širine koja je 720px na srednjim uređajima koji imaju širinu ekrana veću ili jednaku 768px kao kod tableta, dok 960px na velikim uređajima koji imaju širinu ekrana veću ili jednaku 992px kao mali prenosni računari i 1140px za izuzetno velike uređae koji imaju širinu ekrana veću ili jednaku 1200px poput desktop računara. Međutim, ako je širina okvira za prikaz uređaja manja od 768px, ali veća ili jednaka 576px, izgled će biti širok 540px. Za širinu vidnog polja manju od 576px, izgled će pokriti 100% širine. Takođe, kolone će se slagati vertikalno, navigaciona traka će biti skupljena u oba slučaja.

<!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 Fixed Layout</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>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container">
        <a href="#" class="navbar-brand mr-3">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Informacije</a>
                <a href="#" class="nav-item nav-link">Kontakt</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Registracija</a>
                <a href="#" class="nav-item nav-link">Prijava</a>
            </div>
        </div>
    </div>    
</nav>
<div class="container">
    <div class="jumbotron">
        <h1>Nauči kako kreirati websites</h1>
        <p class="lead">U današnjem svetu Internet je najpopularniji način povezivanja sa ljudima. 
        Vi ćete naučiti osnovne tehnologije za web razvoj zajedno sa primjerima iz stvarnog života, 
        tako da možete da napravite sopstvenu web stranicu za povezivanje sa ljudima širom svijeta.</p>
        <p><a href="https://www.ittutorijali.net" target="_blank" class="btn btn-success btn-lg">
        Kreni sa učenjem</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML označava HyperText Markup Language. HTML jeosnovni blok World Wide Web-a. 
            HTML je glavni jezik za opis strukture web stranica.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/html5/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS je kratica za Cascading Style Sheets. CSS je standardni jezik stila koji se koristi za 
            opisivanje prezentacije (tj. izgleda i oblikovanja) web stranica. </p>
            <p><a href="https://www.ittutorijali.net/kursevi/html5/uvod-css3.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap je moćan front-end framework za brži i lakši web razvoj. Bootstrap uključuje dizajne 
            zasnovane na HTML-u i CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/bootstrap/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 IT TUTORIJALI</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Sva prava zadržana</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Uslovi korištenja</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>

----- Izgled gornjeg primera izgledaće otprilike ovako:



Klikni na sliku da vidiš primjer LIVE


Koristili smo klase korisnih margina kao što su: .mb-3, .ml-auto, mx-2 itd. za podešavanje razmaka između elemenata. Dok su klase .text-dark, .text-muted, .text-md-right klase pomoćnih programa za podešavanje boje i poravnanje teksta. O njima ćete saznati u narednim lekcijama.