English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Corso di base Bootstrap4

Bootstrap4 列表組

I gruppi di elenco sono componenti molto utili e flessibili, utilizzati per visualizzare in modo elegante elenchi di elementi. Nella forma più semplice, i gruppi di elenco sono elenchi non ordinati con la classe .list-group, mentre gli elementi di elenco hanno la classe .list-group-item.

La maggior parte dei gruppi di elenco di base sono elenchi non ordinati.

Per creare un elenco di gruppi, aggiungi la classe .list-group agli elementi <ul>, in Aggiungi la classe .list-group agli elementi <li>:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Gruppo di elenco di base</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">Primo elemento</li>
　　　　<li class="list-group-item">Secondo elemento</li>
　　　　<li class="list-group-item">Terzo elemento</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

L'effetto dopo l'esecuzione è il seguente:

Elementi di elenco attivi

Per impostare gli elementi di elenco attivi, aggiungi la classe .active:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elementi di elenco attivi</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Elemento attivo</li>
　　　　<li class="list-group-item">Secondo elemento</li>
　　　　<li class="list-group-item">Terzo elemento</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Elementi di elenco disabilitati

.disabled classe viene utilizzata per impostare gli elementi di elenco disabilitati:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elementi di elenco disabilitati</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Elemento disabilitato</li>
　　　　<li class="list-group-item">Secondo elemento</li>
　　　　<li class="list-group-item">Terzo elemento</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Elemento di elenco di collegamento

Per creare un elenco di elementi di collegamento, sostituisci <ul> con <div> ， <a> sostituisci <li>。Se desideri visualizzare lo sfondo grigio quando il mouse è sopra, aggiungi la classe .list-group-item-action:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Articoli elencati con link</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">Primo elemento</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Secondo elemento</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Terzo elemento</a>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

Articoli dell'elenco multicolori

Il colore degli articoli dell'elenco può essere impostato dalle seguenti colonne: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark e list-group-item-light:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elementi elenco a diverse colori</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item list-group-item-success">Articolo di successo dell'elenco</li>
　　　　<li class="list-group-item list-group-item-secondary">Articolo secondario dell'elenco</li>
　　　　<li class="list-group-item list-group-item-info">Articolo informativo dell'elenco</li>
　　　　<li class="list-group-item list-group-item-warning">Articolo di avviso dell'elenco</li>
　　　　<li class="list-group-item list-group-item-danger">Articolo pericolo dell'elenco</li>
　　　　<li class="list-group-item list-group-item-primary">Articolo principale dell'elenco</li>
　　　　<li class="list-group-item list-group-item-dark">Grigio scuro elenco dell'articolo</li>
　　　　<li class="list-group-item list-group-item-light">Elemento elenco chiaro</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Elementi elenco a diverse colori collegati

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elementi elenco a diverse colori</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">Elemento elenco attivato</a>
　　　　<a href="#" class="list-group-item list-group-item-success">Elemento elenco di successo</a>
　　　　<a href="#" class="list-group-item list-group-item-secondary">Elemento elenco secondario</a>
　　　　<a href="#" class="list-group-item list-group-item-info">Elemento elenco informativo</a>
　　　　<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
　　　　<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
　　　　<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
　　　　<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
　　　　<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4 卡片Bootstrap4 分頁