Bootstrap4 Tutoriales básicos

Bootstrap4 Forma de la imagen

Las imágenes son muy comunes en el diseño web moderno. Por lo tanto, establecer estilos para las imágenes y colocarlas correctamente en la página web es muy importante para mejorar la experiencia del usuario.

Con las clases integradas de Bootstrap, puedes configurar fácilmente el estilo de las imágenes, como crear imágenes redondas o de forma circular, o darles un efecto similar a las miniaturas.

imagen con bordes redondos

.rounded 类可以让图片显示圆角效果：

ejemplo

!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>imagen con bordes redondos</h2>
　　<p>.rounded　类可以让图片显示圆角效果：</p>　　　　　　　　　　　　
　　<img　src="https://es.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque　Terre" width="304" height="236">　
</div>
</body>
</html>

Prueba y observa ‹/›

imagen redonda

.rounded-circle 类可以设置椭圆形图片:

ejemplo

!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>imagen redonda</h2>
　　<p>.rounded-circle　类可以设置椭圆形图片:</p>　　　　　　　　　　　　
　　<img　src="https://es.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque　Terre">　
</div>
</body>
</html>

Prueba y observa ‹/›

miniatura

.img-thumbnail 类用于设置图片缩略图(图片有边框):

ejemplo

!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>miniatura</h2>
　　<p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>　　　　　　　　　　　　
　　<img　src="https://es.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque　Terre">
</div>
</body>
</html>

Prueba y observa ‹/›

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

ejemplo

!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>
　　<p>使用　.float-right　类来设置图片右对齐，使用　.float-left　类设置图片左对齐:</p>
　　<img　src="https://es.oldtoolbag.com/run/images/paris.jpg" class="float-left">　
　　<img　src="https://es.oldtoolbag.com/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>

Prueba y observa ‹/›

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 　标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

ejemplo

!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>Imágenes responsivas</h2>
　　<p>.img-fluid　clase puede configurar imágenes responsivas, ajuste el tamaño del navegador para ver el efecto:</p>
　　<img　src="https://es.oldtoolbag.com/run/images/paris.jpg"　class="img-fluid">
</div>
</body>
</html>

Prueba y observa ‹/›

Bootstrap4 Jumbotron Bootstrap4 Tabla