Основной курс Bootstrap4

Карточки Bootstrap4 Страницация Bootstrap4

Группы списков Bootstrap4

Группы списков - это очень полезные и гибкие компоненты, предназначенные для красивого отображения списков элементов. В наиболее простом виде, группа списков - это просто список с классом .list-group, а элементы списка имеют класс .list-group-item.

Большинство основных групп списков являются неупорядоченными.

Чтобы создать группу списков, добавить класс .list-group к элементу <ul>, в Элементу <li> добавить класс .list-group-item:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Основные группы списков</h2>
　　<ul　class="list-group">
　　　　<li class="list-group-item">First item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>

Проверьте, пожалуйста, ‹/›

Эффект после выполнения будет следующим:

Активированные элементы списка

Для установки активированных элементов списка можно добавить класс .active:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Активированные элементы списка</h2>
　　<ul　class="list-group">
　　　　<li class="list-group-item active">Active item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>

Проверьте, пожалуйста, ‹/›

Запрещенные элементы списка

.disabled класс используется для установки запрещенных элементов списка:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Запрещенные элементы списка</h2>
　　<ul　class="list-group">
　　　　<li class="list-group-item disabled">Disabled item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>

Проверьте, пожалуйста, ‹/›

Элементы ссылок в списке

Чтобы создать список элементов ссылок, можно заменить <ul> на <div> ， <a> заменить <li>。Если вы хотите, чтобы при наведении мыши показывался серый фон, добавьте класс .list-group-item-action:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Список с ссылками</h2>
　　<div class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Первый элемент</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Второй элемент</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Третий элемент</a>
　　</div>
</div>
</body>
</html>

Проверьте, пожалуйста, ‹/›

Список с несколькими цветами

Цвет элементов списка можно установить следующим образом: .list-group-item-success, list-group-item-secondary, list-group-item-info,, list-group-item-warning, .list-group-item-danger, list-group-item-dark и list-group-item-light:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Список элементов с различными цветами</h2>
　　<ul　class="list-group">
　　　　<li　class="list-group-item　list-group-item-success">Успешный список</li>
　　　　<li　class="list-group-item　list-group-item-secondary">Второстепенный список</li>
　　　　<li　class="list-group-item　list-group-item-info">Информационный список</li>
　　　　<li　class="list-group-item　list-group-item-warning">Предупредительный список</li>
　　　　<li　class="list-group-item　list-group-item-danger">Опасный список</li>
　　　　<li　class="list-group-item　list-group-item-primary">Основной список</li>
　　　　<li　class="list-group-item　list-group-item-dark">Серый список</li>
　　　　<li class="list-group-item list-group-item-light">Светлый список</li>
　　</ul>
</div>
</body>
</html>

Проверьте, пожалуйста, ‹/›

Элементы списка с различными цветами ссылок

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример 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>Список элементов с различными цветами</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">Активированный список</a>
　　　　<a href="#" class="list-group-item list-group-item-success">Успешный список</a>
　　　　<a href="#" class="list-group-item list-group-item-secondary">Второстепенный список</a>
　　　　<a href="#" class="list-group-item list-group-item-info">Информационный список</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