Bootstrap - Badges


Kreiranje bedževa pomoću Bootstrapa

Bedževi se obično koriste za označavanje nekih dragocjenih informacija na web stranicama kao što su važani naslovi, poruke upozorenja, brojač obavijesti itd. Sljedeći primjer će vam pokazati kako stvoriti ugrađene bedževe pomoću Bootstrapa.

<h1>Bootstrap heading <span class="badge badge-secondary">New</span></h1>
<h2>Bootstrap heading <span class="badge badge-secondary">New</span></h2>
<h3>Bootstrap heading <span class="badge badge-secondary">New</span></h3>
<h4>Bootstrap heading <span class="badge badge-secondary">New</span></h4>
<h5>Bootstrap heading <span class="badge badge-secondary">New</span></h5>
<h6>Bootstrap heading <span class="badge badge-secondary">New</span></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 4 Badges</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>Bootstrap heading <span class="badge badge-secondary">New</span></h1>
    <h2>Bootstrap heading <span class="badge badge-secondary">New</span></h2>
    <h3>Bootstrap heading <span class="badge badge-secondary">New</span></h3>
    <h4>Bootstrap heading <span class="badge badge-secondary">New</span></h4>
    <h5>Bootstrap heading <span class="badge badge-secondary">New</span></h5>
    <h6>Bootstrap heading <span class="badge badge-secondary">New</span></h6>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New
Bootstrap heading New


Kontekstualna klase za bedževe

Postoje neke kontekstualne ili modifikacijske klase za promjenu izgleda bedževa.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-light">Light</span>
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šene klase za bedževe</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">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-dark">Dark</span>
    <span class="badge badge-light">Light</span>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary Secondary Success Danger Warning Info Dark Light

Kreiranje zaobljenih bedževe

Takođe možete stvoriti zaobljene bedževe (tj. bedževe sa zaobljenijim uglovima) pomoću klase modifikatora .badge-pill, kao što je prikazano u sljedećem primjeru:

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-dark">Dark</span>
<span class="badge badge-pill badge-light">Light</span>
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 Kreiranje zaobljenih beževa</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">
    <span class="badge badge-pill badge-primary">Primary</span>
    <span class="badge badge-pill badge-secondary">Secondary</span>
    <span class="badge badge-pill badge-success">Success</span>
    <span class="badge badge-pill badge-danger">Danger</span>
    <span class="badge badge-pill badge-warning">Warning</span>
    <span class="badge badge-pill badge-info">Info</span>
    <span class="badge badge-pill badge-dark">Dark</span>
    <span class="badge badge-pill badge-light">Light</span>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary Secondary Success Danger Warning Info Dark Light

Prikazivanje bedževa sa brojačem

Bedževe možete koristiti i kao dio linka ili tipki za pružanje brojača, kao što su broj primljenih ili nepročitanih poruka, broj obavijesti itd. Najčešće se nalaze u e-pošte, aplikacijama, web lokacijama društvenih mreža itd. Pogledajmo primjer:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link">Početna</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profil</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link active">Poruke <span class="badge badge-light">24</span></a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Obaještenja <span class="badge badge-primary">5</span></a>
    </li>
</ul>
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 Bedževi unutar 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">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a href="#" class="nav-link">Početna</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profil</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link active">Poruke <span class="badge badge-light">24</span></a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Obavještenja <span class="badge badge-primary">5</span></a>
        </li>
    </ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: