Bootstrap - Responsive Layout


Šta je Responsive Web Design?

Prilagodljivi web dizajn (Responsive Web Design) je postupak dizajniranja i izrade web stranica kako bi se korisnicima omogućila bolja dostupnost i optimalno iskustvo posjetitelja na različitim uređajima. Sa rastućim trendom pametnih telefona i tableta, postalo je gotovo neizbežno ignorisanje optimizacije web lokacija za mobilne uređaje. Prilagodljivi web dizajn je poželjnija alternativa i efikasan način za ciljanje širokog spektra uređaja sa mnogo manje napora. Prilagodljivi rasporedi se automatski prilagođavaju bilo kojoj veličini ekrana uređaja, bilo da se radi o desktop računaru, prenosnom računaru, tabletu ili mobilnom telefonu. Pogledajte sljedeću ilustraciju.




Kreiranje Responsive Layout-a sa Bootstrap-om

Sa Bootstrap 4 stvaranje responzivnih i prilagođenih web lokacija i aplikacija postalo je mnogo lakše. Bootstrap 4 je prilagodljiv i prilagođen mobilnim uređajima od samog početka. Njegove klase u pet nivoa pružaju bolju kontrolu nad rasporedom, kao i nad načinom na koji će se prikazivati na različitim vrstama uređaja kao što su mobilni telefoni, tableti, prenosni računari i računari, uređaji sa velikim ekranom itd.

Sljedeći primjer će stvoriti responzivan izgled koji se prikazuje kao raspored sa 4 kolone na izuzetno velikim uređajima (veličine ≥ 1200px) i raspored sa 3 kolone na velikim uređajima (992px ≤ do < 1200px), dok raspored 2 kolone na srednjim uređajima (768px ≤ do < 992px) i 1 raspored kolona na malim i izuzetno malim uređajima (veličine < 768px). Pogledajmo kako ovo funkcioniše:

<!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 Responsive 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-fluid">
        <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-6 col-lg-4 col-xl-3">
            <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-6 col-lg-4 col-xl-3">
            <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-6 col-lg-4 col-xl-3">
            <h2>JavaScript</h2>
            <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.</p>
            <p><a href="https:https://www.ittutorijali.net/kursevi/javascript/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <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 class="col-md-6 col-lg-4 col-xl-3">
            <h2>PHP</h2>
            <p>PHP označava Hypertext Preprocessor. PHP je vrlo popularan i široko korišten skriptni jezik
            otvorenog koda na serveru za pisanje dinamički generisanih web stranica. </p>
            <p><a href="https://www.ittutorijali.net/kursevi/php7/uvod.php" 
                  target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <h2>SQL</h2>
            <p>SQL znači strukturisani jezik upita. SQL je standardni programski jezik posebno dizajniran za
            spremanje, preuzimanje, upravljanje ili manipulisanje podacima unutar sistema za upravljanje
            relacijskim bazama podataka (RDBMS). </p>
            <p><a href="https://www.ittutorijali.net/kursevi/sql/uvod.php" 
                  target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <h2>Java</h2>
            <p>Java je jedan od najpopularnijih programskih jezika, zbog svoje svestranosti i kompatibilnosti.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/java/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <h2>Python</h2>
            <p>Njegova sintaksa je dizajnirana da bude čitljiva i jednostavna
            i dosta liči na običan engleski jezik.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/python/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>

Pogledaj izgelde primjer LIVE