Bootstrap - Liste


Kreiranje listi pomoću Bootstrap-a

Možete stvoriti tri različite vrste HTML lista:

  • Neuređene liste (Unordered lists) - koristi se za kreiranje popisa povezanih stavki, neodređenim redosljedom.
  • Uređene liste (Ordered lists) - koristi se za kreiranje popisa povezanih stavki, određenim redoslijedom.
  • Lista opisa (Definition list) - koristi se za pravljenje liste pojmova i njihovih opisa.

Pogledajte lekciju HTML liste da biste saznali više o različitim vrstama listi.



Neuređene i uređene liste

Ponekad ćete možda trebati ukloniti zadani stil sa stavki liste. To možete učiniti jednostavnom primjenom klase .list-unstyled na odgovarajuće elemente <ul> ili <ol>.

<ul class="list-unstyled">
    <li>Početna</li>
    <li>Kursevi
        <ul>
            <li>Bootstrap</li>
            <li>HTML5-CSS3</li>
        </ul>
    </li>
    <li>O nama</li>
    <li>Kontakt</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 Unstyled Liste</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 class="mb-3">Unstyled neuređene liste</h2>
    <ul class="list-unstyled">
        <li>Početna</li>
        <li>Kursevi
            <ul>
                <li>Bootstrap</li>
                <li>HTML5-CSS3</li>
            </ul>
        </li>
        <li>O nama</li>
        <li>Kontakt</li>
    </ul>
    <hr>
    <h2 class="mb-3">Unstyled uređene liste</h2>
<ul class="list-unstyled">
    <li>Početna</li>
    <li>Kursevi
        <ul>
            <li>Bootstrap</li>
            <li>HTML5-CSS3</li>
        </ul>
    </li>
    <li>O nama</li>
    <li>Kontakt</li>
</ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Unstyled neuređene liste

  • Početna
  • Kursevi
    • Bootstrap
    • HTML5-CSS3
  • O nama
  • Kontakt

Unstyled uređene liste

  • Početna
  • Kursevi
    • Bootstrap
    • HTML5-CSS3
  • O nama
  • Kontakt



Pozicioniranje uređenih i neuređenih stavki na listi

Ako želite kreirati vodoravni meni pomoću uređene ili neuređene liste, morate sve smjestiti u jedan red, tj. jedan pored drugog. To možete učiniti jednostavnom primjenom klase u .list-inline na odgovarajuće <ul> ili <ol>, a klase .list-inline-item na elemente <li>.

<ul class="list-inline">
    <li class="list-inline-item">Početna</li>
    <li class="list-inline-item">O nama</li>
    <li class="list-inline-item">Kursevi</li>
    <li class="list-inline-item">Kontakt</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 Inline liste</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 class="mb-3">Inline neuređene liste</h2>
    <ul class="list-inline">
        <li class="list-inline-item">Početna</li>
        <li class="list-inline-item">O nama</li>
        <li class="list-inline-item">Kursevi</li>
        <li class="list-inline-item">Kontakt</li>
    </ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Inline neuređene liste

  • Početna
  • O nama
  • Kursevi
  • Kontakt


Kreiranje horizontalne opisne liste

Pojmovi i opisi na popisu mogu se takođe poravnati vodoravno, jedan pored drugoga (side-by-side) koristeći unaprijed definisane klase mrežnog sistema Bootstrap (Bootstrap grid system). Pogledajmo primjer:

<dl class="row">
    <dt class="col-sm-3">HTML5</dt>
    <dd class="col-sm-9">Na svijetu trenutno postoji više od milijardu web sajtova.</dd>
    <dt class="col-sm-3 text-truncate">PHP-MySQL</dt>
    <dd class="col-sm-9">PHP je jednostavan i istovremeno moćan Script programski jezik.</dd>
    <dt class="col-sm-3">JavaScript</dt>
    <dd class="col-sm-9">Javascript je dinamički programski jezik i sastavni je dio web pretraživača.</dd>
</dl>
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 Horizontalne opisne liste</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 class="mb-3">Horizontalne opisne liste</h2>
    <dl class="row">
        <dt class="col-sm-3">HTML5</dt>
        <dd class="col-sm-9">Na svijetu trenutno postoji više od milijardu web sajtova.</dd>
        <dt class="col-sm-3 text-truncate">PHP-MySQL</dt>
        <dd class="col-sm-9">PHP je jednostavan i istovremeno moćan Script programski jezik.</dd>
        <dt class="col-sm-3">JavaScript</dt>
        <dd class="col-sm-9">Javascript je dinamički programski jezik i sastavni je dio web pretraživača.</dd>
    </dl>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

HTML5
Na svijetu trenutno postoji više od milijardu web sajtova.
PHP-MySQL
PHP je jednostavan i istovremeno moćan Script programski jezik.
JavaScript
Javascript je dinamički programski jezik i sastavni je dio web pretraživača.