Bootstrap - Typography


Rad sa naslovima (Heading)

Možete definisati sve HTML naslove, od <h1> do <h6> - Na isti način kao što definišete u jednostavnom HTML dokumentu. Klase naslova možete koristiti i od .h1 do .h6 na drugim elementima ako želite da primjenite stil na tekst elementa isto kao i naslovi.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
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 Headings</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">
    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
</div>
</body>
</html>


Prilagođavanje naslova

Dodatno možete da koristite tag <small> sa klasom .text-muted za prikaz sekundarnog teksta bilo kog naslova u manjoj i lakšoj varijaciji. Evo primjera:

<h2>
    Naš naslov
    <small class="text-muted"> sa nekim sekundarnim tekstom</small>
</h2>
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 Naslov sa sekundarnim tekstom</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">
    <h2>
        Naš naslov
        <small class="text-muted">sa nekim sekundarnim tekstom</small>
    </h2>
</div>
</body>
</html>


Prikazivanje naslova

Bootstrap 4 predstavlja naslove koji se mogu koristiti kada vam je potreban naslov da biste nešto istakli. Naslovi se prikazuju u većoj veličini fonta. Dostupna su četiri različita prikaza naslova. Evo primjera:

<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>
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 Prikazivanje naslova</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">
    <h1 class="display-1">Display Heading 1</h1>
    <h1 class="display-2">Display Heading 2</h1>
    <h1 class="display-3">Display Heading 3</h1>
    <h1 class="display-4">Display Heading 4</h1>
</div>
</body>
</html>


Rad sa paragrafima

Globalna podrazumevana veličina slova Bootstrap-a je 1rem (obično 16px), sa visinom linije 1,5. Ovo se odnosi na <body> i sve pasuse. Pored toga, donja margina od polovine njihove visine linije (podrazumevano 10px) primenjuje se na sve pasuse, tj. na elemente <p>. Takođe možete da istaknete pasus dodavanjem klase .lead na njega.

<p>Ovako izgleda normalan paragraf u Bootstrap-u.</p>
<p class="lead">Ovako se paragraf ističe u Bootstrap-u.</p>
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 Paragrafi</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">
    <p>Ovako izgleda normalan paragraf u Bootstrap-u.</p>
    <p class="lead">Ovako se paragraf ističe u Bootstrap-u.</p>
</div>
</body>
</html>

Pomoću klasa poravnanja teksta možete lako poravnati tekst lijevo, desno i centrirati ga unutar pasusa.

<p class="text-left">Lijevo poravnanje teksta.</p>
<p class="text-center">Centriranje teksta.</p>
<p class="text-right">Desno poravnanje teksta.</p>
<p class="text-justify">Razvučeni tekst preko cijele stranice.</p>

Takođe možete poravnati tekst na osnovu veličine ekrana pomoću klasa prilagodljivog poravnanja teksta. Ove klase koriste iste tačke prekida širine vidnog polja kao i grid system.

<p class="text-sm-left">Tekst poravnat ulijevo na malim ili širim okvirima prikaza.</p>
<p class="text-md-left">Tekst poravnat ulijevo na srednjim ili širokim okvirima prikaza.</p>
<p class="text-lg-left">Tekst poravnat ulijevo na velikim ili širim okvirima prikaza.</p>
<p class="text-xl-left">Tekst poravnat ulijevo na izuzetno velikim ili širim okvirima prikaza.</p>


Formatiranje teksta

Možete slobodno da koristite oznake za formatiranje teksta kao što su: <strong>, <i>, <small> da biste tekst učinili podebljanim, kurzivnim, malim i tako dalje, na isti način kao što to radite u HTML-u.

<p><b>Ovaj tekst je bold.</b></p>
<p><code>Ovo je computer code.</code></p>
<p><em>Ovo je naglašen tekst</em></p>
<p><i>Ovo je italic tekst</i></p>
<p><mark>Ovo je instaknuti tekst</mark></p>
<p><small>Ovo je mail tekst</small></p>
<p><strong>Ovo je jako naglašen tekst</strong></p>
<p>Ovo je <sub>subscript</sub> i<sup>superscript</sup></p>
<p><ins>Ovaj tekst je umetnut u dokument</ins></p>
<p><del>Ovaj tekst se briše iz dokumenta</del></p>
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 Formatiranje teksta</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">
    <p><b>Ovaj tekst je bold.</b></p>
    <p><code>Ovo je computer code.</code></p>
    <p><em>Ovo je naglašen tekst</em></p>
    <p><i>Ovo je italic tekst</i></p>
    <p><mark>Ovo je instaknuti tekst</mark></p>
    <p><small>Ovo je mail tekst</small></p>
    <p><strong>Ovo je jako naglašen tekst</strong></p>
    <p>Ovo je <sub>subscript</sub> i<sup>superscript</sup></p>
    <p><ins>Ovaj tekst je umetnut u dokument</ins></p>
    <p><del>Ovaj tekst se briše iz dokumenta</del></p>
</div>
</body>
</html>


Transformacija teksta

Tekst takođe možete transformisati u mala ili velika slova ili ih možete ispisati velikim slovima.

<p class="text-lowercase">Ovo je običan paragraf.</p>
<p class="text-uppercase">Ovo je običan paragraf.</p>
<p class="text-capitalize">Ovo je običan paragraf.</p>
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 Transformacija teksta</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">
    <p class="text-lowercase">Ovo je običan paragraf.</p>
    <p class="text-uppercase">Ovo je običan paragraf.</p>
    <p class="text-capitalize">Ovo je običan paragraf.</p>
</div>
</body>
</html>


Boja teksta

Boje su moćan metod prenošenja važnih informacija u dizajnu web stranica. Bootstrap ima nekoliko klasa koje se mogu koristiti u tu svrhu, poput prikazivanja poruke o uspehu u zelenoj boji, upozorenja narandžastom bojom ili poruke o grešci u crvenom bojom itd.

<p class="text-primary">Primary: Molimo vas da pažljivo pročitate uputstva prije nego što nastavite.</p>
<p class="text-secondary">Secondary: Ovo je istaknuto i uklonjeno je iz najnovije verzije.</p>
<p class="text-success">Success: Vaša poruka je uspešno poslata.</p>
<p class="text-info">Info: Morate se složiti da biste dovršili postupak registracije.</p>
<p class="text-warning">Warning: Došlo je do problema sa vezom.</p>
<p class="text-danger">Danger: Došlo je do greške prilikom slanja podataka.</p>
<p class="text-muted">Muted: Ovaj paragraf teksta je siv.</p>
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 Naglašavanje teksta</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">
    <p class="text-primary">Primary: Molimo vas da pažljivo pročitate uputstva prije nego što nastavite.</p>
    <p class="text-secondary">Secondary: Ovo je istaknuto i uklonjeno je iz najnovije verzije.</p>
    <p class="text-success">Success: Vaša poruka je uspešno poslata.</p>
    <p class="text-info">Info: Morate se složiti da biste dovršili postupak registracije.</p>
    <p class="text-warning">Warning: Došlo je do problema sa vezom.</p>
    <p class="text-danger">Danger: Došlo je do greške prilikom slanja podataka.</p>
    <p class="text-muted">Muted: Ovaj paragraf teksta je siv.</p>
</div>
</body>
</html>


Stilizovanje Blockquotes

Takođe možete dati lep izgled svojim blok citatima - Samo definišite blok kotacije koristeći standardni element <blockquote>, a ostalo će uraditi tabela stilova bootstrap-a. Za identifikovanje izvora možete dodati element <footer> sa klasom .blockquote-footer i obmotati ime izvornog dela u tag <cite>, ovako:

<blockquote class="blockquote">
    <p class="mb-0">Obrazovanje, to je ono što ostane nakon što zaboravite sve što ste naučili u školi.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>
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 blockquotes</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">
    <blockquote class="blockquote">
    <p class="mb-0">Obrazovanje, to je ono što ostane nakon što zaboravite sve što ste naučili u školi.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>
</div>
</body>
</html>

Blok-citate takođe možete poravnati udesno ili postaviti na centr jednostavnim primjenama klasa poravnanja teksta .text-right ili .text-center na elementu <blockkuote>.