Bootstrap4 Tutoriais Básicos

Bootstrap4 Forma da imagem

As imagens são extremamente comuns no design de páginas da web modernas. Portanto, configurar o estilo das imagens e colocá-las corretamente na página da web é muito importante para melhorar a experiência do usuário.

Utilizando as classes internas do Bootstrap, você pode facilmente configurar o estilo das imagens, por exemplo, criar imagens arredondadas ou redondas, ou dar-lhes um efeito semelhante a miniaturas.

Imagem arredondada

.arredondada classe permite que a imagem mostre efeitos arredondados:

exemplo

!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>Imagem arredondada</h2>
　　<p>.arredondada classe permite que a imagem mostre efeitos arredondados:</p>　　　　　　　　　　　　
　　<img　src="https://pt.oldtoolbag.com/run/images/cinqueterre.jpg" class="arredondada" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Teste e Veja ‹/›

Imagem circular

.arredondada-circulo classe pode definir imagens em forma circular:

exemplo

!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>Imagem circular</h2>
　　<p>.arredondada-circulo classe pode definir imagens em forma circular:</p>　　　　　　　　　　　　
　　<img　src="https://pt.oldtoolbag.com/run/images/cinqueterre.jpg" class="arredondada-circulo" alt="Cinque Terre">　
</div>
</body>
</html>

Teste e Veja ‹/›

Miniatura

.img-miniatura classe é usada para definir miniaturas de imagem (a imagem tem borda):

exemplo

!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-miniatura classe é usada para definir miniaturas de imagem (a imagem tem borda):</p>　　　　　　　　　　　　
　　<img　src="https://pt.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-miniatura" alt="Cinque Terre">
</div>
</body>
</html>

Teste e Veja ‹/›

Modo de alinhamento de imagem

Usando .flutuante-direita classe para alinhar a imagem para a direita, usando .flutuante-esquerda classe alinha a imagem para a esquerda:

exemplo

!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>Modo de alinhamento de imagem</h2>
　　<p>Usando .flutuante-direita classe para alinhar a imagem para a direita, usando .flutuante-esquerda classe alinha a imagem para a esquerda:</p>
　　<img　src="https://pt.oldtoolbag.com/run/images/paris.jpg" class="flutuante-esquerda">　
　　<img　src="https://pt.oldtoolbag.com/run/images/cinqueterre.jpg" class="flutuante-direita">
</div>
</body>
</html>

Teste e Veja ‹/›

Imagem responsiva

As imagens vêm em vários tamanhos, precisamos que se adaptem automaticamente ao tamanho da tela.

Podemos adicionar .img-fluid classe para definir imagens responsivas.

.img-fluid classe define max-width: 100%; 、 height: auto; :

exemplo

!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>Imagem Responsiva</h2>
　　<p>.img-fluid　classe pode definir imagens responsivas, ajuste o tamanho do navegador para ver o efeito:</p>
　　<img　src="https://pt.oldtoolbag.com/run/images/paris.jpg"　class="img-fluid">
</div>
</body>
</html>

Teste e Veja ‹/›

Bootstrap4 Jumbotron Bootstrap4 Tabela