Bootstrap - Grupne liste

Kreiranje grupnih listi pomoću Bootstrap-a

Grupne 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 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 element <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 ovako:

Početna Slike145 Muzika50 Video 8

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 ovako:

HTML5-CSS3

Objavljeno prije 1 dan

Na svijetu trenutno postoji više od milijardu web sajtova.

PHP-MySQL

Objavljeno prije 1 dan

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

JavaScript

Objavljeno prije 3 dan

Javascript je dinamički programski jezik koji se uglavnom koristi kao sastavni dio web pretraživača.

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 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 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