Bootstrap - Slike


Stilizovanje slika pomoću Bootstrapa

Slike su vrlo česte u modernom web dizajnu. Dakle, oblikovanje slika i pravilno postavljanje na web stranice vrlo je važno za poboljšanje korisničkog iskustva. Korištenjem Bootstrap ugrađenih klasa možete jednostavno oblikovati slike, poput izrade zaobljenih, kružnih ili im dati efekt poput sličica.

<img src="img/avatar.svg" class="rounded" alt="Zaobljene slike">
<img src="img/avatar.svg" class="rounded-circle" alt="Okrugle slike">
<img src="img/avatar.svg" class="img-thumbnail" alt="Izgled slike">
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 Stilizovanje slike</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;        
    }
    img{
        margin-right: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <img src="/examples/img/avatar.svg" class="rounded" alt="Zaobljena slika">
    <img src="/examples/img/avatar.svg" class="rounded-circle" alt="Okrugla slika">
    <img src="/examples/img/avatar.svg" class="img-thumbnail" alt="Izgled slike">
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Zaobljena slika Okrugla slika Izgled slike


Stvaranje responzivnih slika i video zapisa

Pomoću Bootstrap-a možete i slike učiniti prilagodljivijim. Samo dodajte klasu .img-fluid u tag <img>. Ova klasa uglavnom primjenjuje stilove max-width: 100%; i height: auto; na sliku tako da se lijepo skalira tako da stane u element koji treba da sadrži sliku ili video, u slučaju da je širina slike veća od samog elementa koji sadrži. Pogledajmo sljedeći primjer da biste vidjeli kako to funkcioniše:

<img src="img/kites.jpg" class="img-fluid" alt="Leteći zmajevi">
<img src="img/sky.jpg" class="img-fluid" alt="Nebo">
<img src="img/balloons.jpg" class="img-fluid" alt="Balon">
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 Responzivne slike</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;        
    }
    .box{
        width: 400px;
        border: 4px solid #000;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Napomena!</strong> Promijenite veličinu prozora pretraživača da biste vidjeli 
        kako funkcioniše responzivna slika.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <h2>Ne-responzivna slika</h2>
    <div class="box">
        <img src="img/sky.jpg" alt="Nebo">
    </div>
    <hr>
    <h2>Responzivna slika</h2>
    <div class="box">
        <img src="img/sky.jpg" class="img-fluid" alt="Nebo">
    </div>
</div>
</body>
</html>

Možete i prilagoditi videozapis ili prezentaciju ugrađenu u web stranicu bez uticaja na izvorni omjer slike. Da biste to učinili, umotajte bilo koji ugrađeni element poput <iframe> ili <video> u element <div> i primijenite klasu .embed-responsive i klasu omjera stranica poput .embed-responsive-16by9. Po želji možete primijeniti eksplicitnu klasu potomka .embed-responsive-item na ugrađeni element kako bi odgovarao stilu za druge atribute. Pogledajmo primjer:

<!-- Omjer 21:9 -->
<div class="embed-responsive embed-responsive-21by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- Omjer 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- Omjer 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- Omjer 1:1 -->
<div class="embed-responsive embed-responsive-1by1">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</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, shrink-to-fit=no">
<title>Bootstrap 4 Responzivni videozapisi</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">
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Napomena!</strong> Promijenite veličinu prozora pretraživač da biste vidjeli 
		kako funkcioniše responzivni videozapisi.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    
    <h2 class="mt-4">Video je u omjeru 21:9</h2>
    <div class="embed-responsive embed-responsive-21by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
    
    <h2 class="mt-4">Video je u omjeru 16:9</h2>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
    
    <h2 class="mt-4">Video je u omjeru 4:3</h2>
	<div class="embed-responsive embed-responsive-4by3">
		<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
	</div>
    
    <h2 class="mt-4">Video je u omjeru 1:1</h2>
    <div class="embed-responsive embed-responsive-1by1">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
</div>
</body>
</html>

U primjeru smo stvorili 4 responzivna videozapisa s 4 različita omjera slike (21:9, 16:9, 4:3 i 1:1) pomoću klasa .embed-responsive-21by9, .embed- responsive-16by9, .embed-responsive-4by3, odnosno .embed-responsive-1by1.



Horizontalno poravnanje slika

Možete poravnati slike lijevo ili desno unutar većeg okvira pomoću klasa .pull-left ili .pull-right. Takođe možete koristiti klase poravnanja teksta, kao što su .text-left, .text-right i .text-center na roditeljskom elementu za poravnanje umetnutih slika vodoravno lijevo, desno i na sredinu. Međutim, za centriranje slika na nivou bloka trebate koristiti klasu uslužnog programa margine .mx-auto. Pogledajmo sljedeći primjer kako bismo vidjeli kako to funkcioniše:

<!-- Horizontalno poravnanje pomoću float klasa -->
<div class="box clearfix">
    <img src="img/avatar.svg" class="pull-left" alt="Obična slika">
    <img src="img/avatar.svg" class="pull-right" alt="Obična slika">
</div>

<!-- Lijevo poravnanje pomoću klasa poravnanja teksta -->
<div class="box text-left">
    <img src="img/avatar.svg" alt="Obična slika">
</div>

<!-- Desno poravnanje pomoću klasa poravnanja teksta -->
<div class="box text-right">
    <img src="img/avatar.svg" alt="Obična slika">
</div>

<!-- Centrirano poravnanja pomoću klasa poravnanja teksta -->
<div class="box text-center">
    <img src="img/avatar.svg" alt="Obična slika">
</div>

<!-- Poravnanje slike na nivou bloka pomoću automatske margine -->
<div class="box">
    <img src="img/avatar.svg" class="d-block mx-auto" alt="Obična slika">
</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, shrink-to-fit=no">
<title>Bootstrap 4 Poravnanje slike</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;        
    }
    .box{
        padding: 15px;        
        border: 4px solid #666;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h4> Horizontalno poravnanje pomoću float klasa </h4>
    <div class="box clearfix">
        <img src="img/avatar.svg" class="pull-left" alt="Obična slika">
        <img src="img/avatar.svg" class="pull-right" alt="Obična slika">
    </div>

    <h4> Lijevo poravnanje pomoću klasa poravnanja teksta </h4>
    <div class="box text-left">
        <img src="img/avatar.svg" alt="Obična slika">
    </div>

    <h4> Desno poravnanje pomoću klasa poravnanja teksta </h4>
    <div class="box text-right">
        <img src="img/avatar.svg" alt="Obična slika">
    </div>

    <h4> Centriralno poravnanja pomoću klasa poravnanja teksta </h4>
    <div class="box text-center">
        <img src="img/avatar.svg" alt="Obična slika">
    </div>

    <h4> Poravnanje slike na nivou bloka pomoću automatske margine </h4>
    <div class="box">
        <img src="img/avatar.svg" class="d-block mx-auto" alt="Obična slika">
    </div>
</div>
</body>
</html>