English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico Bootstrap

Plugins Bootstrap

Miniatura Bootstrap

Este capítulo explicará o Bootstrap Thumbnail. A maioria dos sites precisa alinhar imagens, vídeos, texto etc. em uma grade. O Bootstrap oferece uma maneira conveniente para isso com thumbnails. Os passos para criar thumbnails com Bootstrap são os seguintes:

  • Adicionar uma classe ao redor da imagem com class .thumbnail da tag <a>.

  • Isso adiciona uma margem interna (padding) de quatro pixels e uma borda cinza.

  • Quando o mouse passar sobre a imagem, uma animação mostrará o contorno da imagem.

Abaixo está um exemplo de thumbnail padrão:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Exemplo Bootstrap　-　Thumbnail</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Adicionar conteúdo personalizado

Agora temos uma thumbnail básica, podemos adicionar vários tipos de conteúdo HTML à thumbnail, como títulos, parágrafos ou botões. Os passos são os seguintes:

  • Com a classe .thumbnail do <a> tag para <div>.

  • Dentro deste <div>, você pode adicionar o que quiser. Como é um <div>, podemos usar as regras de nomeação baseadas em span para ajustar o tamanho.

  • Se você quiser agrupar várias imagens, coloque-as em uma lista não ordenada e cada item da lista flutuando para a esquerda.

Abaixo está um exemplo que demonstra isso:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Exemplo Bootstrap　-　Thumbnail personalizada</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Tag de Miniatura</h2>
　　　　　　　　　　　　　　　　<p>Alguns exemplos de texto. Alguns exemplos de texto.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Tag de Miniatura</h2>
　　　　　　　　　　　　　　　　<p>Alguns exemplos de texto. Alguns exemplos de texto.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Tag de Miniatura</h2>
　　　　　　　　　　　　　　　　<p>Alguns exemplos de texto. Alguns exemplos de texto.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/correr/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Geral placeholder thumbnail">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Tag de Miniatura</h2>
　　　　　　　　　　　　　　　　<p>Alguns exemplos de texto. Alguns exemplos de texto.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　botão
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Aviso BootstrapTítulo da Página Bootstrap