Bootstrap - Grupne liste


Kreiranje grupa listi pomoću Bootstrapa

Grupe listi su vrlo korisna i fleksibilna komponenta za lijep prikaz popisa elemenata. U najosnovnijem obliku grupna lista je jednostavna neuređena lista s klasom .list-group, dok stavke popisa imaju klasu .list-group-item.

<ul class="list-group">
    <li class="list-group-item">Slike</li>
    <li class="list-group-item">Dokumenti</li>        
    <li class="list-group-item">Muzika</li>
    <li class="list-group-item">Video</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 Grupne 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">    
    <ul class="list-group">
        <li class="list-group-item">Slike</li>
        <li class="list-group-item">Dokumenti</li>        
        <li class="list-group-item">Muzika</li>
        <li class="list-group-item">Video</li>
    </ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

  • Slike
  • Dokumenti
  • Muzika
  • Video


Grupna lista sa povezanim stavkama

Takođe možete popisati i hiperveze u grupne liste s malim promjenama u HTML elemtima. Samo zamijenite <li> s <a> oznakom i koristite <div> element kao roditelj umjesto <ul>. U ovu grupu možete dodati ikone i značke kako biste je učinili elegantnijom. Pogledajmo primjer:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
        <i class="fa fa-home"></i> Početna
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-camera"></i> Slike<span class="badge badge-pill badge-primary pull-right">145</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-music"></i> Muzika<span class="badge badge-pill badge-primary pull-right">50</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-film"></i> Video <span class="badge badge-pill badge-primary pull-right">8</span>
    </a>
</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 Grupna lista sa povezanim stavkama</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="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
        <i class="fa fa-home"></i> Početna
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-camera"></i> Slike<span class="badge badge-pill badge-primary pull-right">145</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-music"></i> Muzika<span class="badge badge-pill badge-primary pull-right">50</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-film"></i> Video <span class="badge badge-pill badge-primary pull-right">8</span>
    </a>
</div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


U ove grupne liste možete dodati i druge HTML elemente poput zaglavlja i pasusa.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>HTML5-CSS3</h4>
            <small>Objavljeno prije 1 dan</small>
        </div>        
        <p>Na svijetu trenutno postoji više od milijardu web sajtova.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <h4>PHP-MySQL</h4>
            <small>Objavljeno prije 1 dan</small>
        </div>
        <p>PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>JavaScript</h4>
            <small>Objavljeno prije 3 dan</small>
        </div>        
        <p>Javascript je dinamički programski jezik koji se uglavnom koristi kao sastavni dio web pretraživača.</p>
    </a>
</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 Povezani grupni popis sa prilagođenim sadržajem</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="list-group">
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>HTML5-CSS3</h4>
            <small>Objavljeno prije 1 dan</small>
        </div>        
        <p>Na svijetu trenutno postoji više od milijardu web sajtova.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <h4>PHP-MySQL</h4>
            <small>Objavljeno prije 1 dan</small>
        </div>
        <p>PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>JavaScript</h4>
            <small>Objavljeno prije 3 dan</small>
        </div>        
        <p>Javascript je dinamički programski jezik koji se uglavnom koristi kao sastavni dio web pretraživača.</p>
    </a>
</div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Grupne liste sa kontekstualnim stanjima

Kao i većina ostalih komponenati, takođe možete koristiti kontekstualne klase na stavkama grupne liste da biste na njih dodali dodatni naglasak. Pogledajmo primjer:

<ul class="list-group">
    <li class="list-group-item">Jednostavna default grupna lista</li>
    <li class="list-group-item list-group-item-primary">Jednostavna primary grupna lista</li>
    <li class="list-group-item list-group-item-secondary">Jednostavna secondary grupna lista</li>
    <li class="list-group-item list-group-item-success">Jednostavna success grupna lista</li>
    <li class="list-group-item list-group-item-danger">Jednostavna danger grupna lista</li>
    <li class="list-group-item list-group-item-warning">Jednostavna warning grupna lista</li>
    <li class="list-group-item list-group-item-info">Jednostavna info grupna lista</li>
    <li class="list-group-item list-group-item-light">Jednostavna light grupna lista</li>
    <li class="list-group-item list-group-item-dark">Jednostavna dark grupna lista</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 Grupna lista sa kontekstualnim stanjima</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="list-group">
    <li class="list-group-item">Jednostavna default grupna lista</li>
    <li class="list-group-item list-group-item-primary">Jednostavna primary grupna lista</li>
    <li class="list-group-item list-group-item-secondary">Jednostavna secondary grupna lista</li>
    <li class="list-group-item list-group-item-success">Jednostavna success grupna lista</li>
    <li class="list-group-item list-group-item-danger">Jednostavna danger grupna lista</li>
    <li class="list-group-item list-group-item-warning">Jednostavna warning grupna lista</li>
    <li class="list-group-item list-group-item-info">Jednostavna info grupna lista</li>
    <li class="list-group-item list-group-item-light">Jednostavna light grupna lista</li>
    <li class="list-group-item list-group-item-dark">Jednostavna dark grupna lista</li>
</ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

  • Jednostavna default grupna lista
  • Jednostavna primary grupna lista
  • Jednostavna secondary grupna lista
  • Jednostavna success grupna lista
  • Jednostavna danger grupna lista
  • Jednostavna warning grupna lista
  • Jednostavna info grupna lista
  • Jednostavna light grupna lista
  • Jednostavna dark grupna lista

Slično tome, ove kontekstualne klase možete koristiti za povezane stavke grupnih listi. Takođe možete koristiti klasu .active da odredite aktivnu stavku liste. Pogledajmo primjer:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Jednostavna default grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Jednostavna primary grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Jednostavna secondary grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Jednostavna success grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Jednostavna danger grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Jednostavna warning grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Jednostavna info grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Jednostavna light grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Jednostavna dark grupna lista</a>
</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 Povezani grupne liste sa kontekstualnim stanjima</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="list-group">
    <a href="#" class="list-group-item list-group-item-action">Jednostavna default grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Jednostavna primary grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Jednostavna secondary grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Jednostavna success grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Jednostavna danger grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Jednostavna warning grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Jednostavna info grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Jednostavna light grupna lista</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Jednostavna dark grupna lista</a>
</div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: