Bootstrap4 Tutoriales básicos

Bootstrap4 Menú desplegable Bootstrap4 Grupo de lista

Bootstrap4 Tarjeta (Card)

Bootstrap4Se ha introducido un nuevo componente de contenedor de contenido flexible y expandible llamado card para reemplazar los componentes antiguos como panel, well y thumbnail. Incluye opciones de encabezado y pie, varios tipos de contenido, colores de fondo de contexto y opciones de visualización potentes. En la parte siguiente, verá cómo utilizar el componente card.

Tarjetas simples

Podemos usar Bootstrap4 La clase .card y .card-body 类来创建一个简单的卡片，示例如下:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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="card">
　　　　<div class="card-body">简单的卡片</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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="card">
　　　　<div class="card-header">头部</div>
　　　　<div class="card-body">内容</div>　
　　　　<div class="card-footer">底部</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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="card">
　　　　<div class="card-body">Basic　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-primary　text-white">
　　　　<div class="card-body">Primary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-success　text-white">
　　　　<div class="card-body">Success　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-info　text-white">
　　　　<div class="card-body">Info　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-warning　text-white">
　　　　<div class="card-body">Warning　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-danger　text-white">
　　　　<div class="card-body">Danger　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-secondary　text-white">
　　　　<div class="card-body">Secondary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-dark　text-white">
　　　　<div class="card-body">Dark　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-light　text-dark">
　　　　<div class="card-body">Light　card</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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="card">
　　　　<div class="card-cuerpo">
　　　　　　<h4　class="card-title">Card　title</h4>
　　　　　　<p class="card-text">Some　example　text.　Some　example　text.</p>
　　　　　　<a　href="#"　class="card-link">Card　link</a>
　　　　　　<a　href="#"　class="card-link">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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>tarjeta de imagen</h2>
　　<p>La imagen está en la parte superior (card-img-arriba):</p>
　　<div　class="card"　style="width:400px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/imagenes/mezcla/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div class="card-cuerpo">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-texto">Alguno texto de ejemplo, otro texto de ejemplo. John Doe es un arquitecto e ingeniero</p>
　　　　　　<a href="#" class="btn btn-primary">Ver perfil</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>La imagen está en la parte inferior (card-img-abajo):</p>
　　<div　class="card"　style="width:400px">
　　　　<div class="card-cuerpo">
　　　　　　<h4　class="card-texto">Jane Doe</h4>
　　　　　　<p class="card-texto">Alguno texto de ejemplo, otro texto de ejemplo. Jane Doe es un arquitecto e ingeniero</p>
　　　　　　<a href="#" class="btn btn-primary">Ver perfil</a>
　　　　</div>
　　　　<img　class="card-img-abajo"　src="https://static.oldtoolbag.com/imagenes/mezcla/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Si se desea configurar la imagen como fondo, se puede usar .card-img-clase de superposición de imagen:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</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>superposición de texto sobre la imagen</h2>
　　<p>Si se desea configurar la imagen como fondo, se puede usar　.card-img-superposición　de　imagen　clase:</p>
　　<div　class="card　img-fluid"　style="width:500px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/imagenes/mezcla/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Algunos ejemplos de texto algunos ejemplos de texto. Algunos ejemplos de texto algunos ejemplos de texto. Algunos ejemplos de texto algunos ejemplos de texto.</p>
　　　　　　<a href="#" class="btn btn-primary">Ver perfil</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Menú desplegable Bootstrap4 Grupo de lista