Bootstrap4 Tutoriales básicos

Bootstrap4 Tarjetas Bootstrap4 Páginas de navegación

Bootstrap4 Grupo de lista

Los grupos de lista son componentes muy útiles y flexibles, utilizados para mostrar listas de elementos de manera atractiva. En su forma más básica, el grupo de lista solo tiene .list-la lista desordenada de la clase group, mientras que los elementos de la lista tienen .list-group-clase item.

La mayoría de los grupos de listas básicas son desordenados.

Para crear un grupo de lista, agrega .list al elemento <ul>-clase group, en Agrega .list al elemento <li>-group-clase 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>Grupo de lista básica</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">Primer artículo</li>
　　　　<li class="list-group-item">Segundo artículo</li>
　　　　<li class="list-group-item">Tercer artículo</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

El efecto después de ejecutar se verá así:

Artículos en estado activo

Para configurar artículos en estado activo, agrega la clase .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>Artículo en estado activo</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Artículo activo</li>
　　　　<li class="list-group-item">Segundo artículo</li>
　　　　<li class="list-group-item">Tercer artículo</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Artículos deshabilitados

La clase .disabled se utiliza para configurar artículos deshabilitados:

示例

<!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>Artículo deshabilitado</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Artículo deshabilitado</li>
　　　　<li class="list-group-item">Segundo artículo</li>
　　　　<li class="list-group-item">Tercer artículo</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Artículos de lista de enlaces

Para crear un artículo de lista de enlaces, puedes reemplazar <ul> con <div> ， <a> reemplaza <li>. Si quieres que se muestre un fondo gris al pasar el ratón, agrega .list-group-item-clase 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>Artículos de lista de enlaces</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-ítem lista-group-item-action">Primer artículo</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-action">Segundo artículo</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-action">Tercer artículo</a>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

多种颜色列表项

El color de los elementos de la lista se puede configurar mediante las siguientes columnas: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark y 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>Ítems de lista de varios colores</h2>
　　<ul class="list-group">
　　　　<li class="list-group-ítem lista-group-item-success">Ítem de lista de éxito</li>
　　　　<li class="list-group-ítem lista-group-item-secondary">Ítem de lista secundario</li>
　　　　<li class="list-group-ítem lista-group-item-info">Ítem de lista de información</li>
　　　　<li class="list-group-ítem lista-group-item-warning">Ítem de lista de advertencia</li>
　　　　<li class="list-group-ítem lista-group-item-danger">Ítem de lista peligrosa</li>
　　　　<li class="list-group-ítem lista-group-item-primary">Ítem de lista principal</li>
　　　　<li class="list-group-ítem lista-group-item-dark">Ítem de lista gris oscuro</li>
　　　　<li class="list-group-ítem lista-group-item-light">Ítem de lista claro</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

链接的多种颜色列表项

示例

<!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>Ítems de lista de varios colores</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-ítem lista-group-item-action">Ítem de lista activo</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-success">Ítem de lista de éxito</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-secondary">Ítem de lista secundario</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-info">Ítem de lista de información</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-warning">Ítem de lista de advertencia</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-danger">Ítem de lista peligrosa</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-primary">Ítem de lista principal</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-dark">Ítem de lista gris oscuro</a>
　　　　<a href="#" class="list-group-ítem lista-group-item-light">Ítem de lista claro</a>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Tarjetas Bootstrap4 Páginas de navegación