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

Tutorial básico Bootstrap

Plugins Bootstrap

Well Bootstrap

O Well é um contêiner que cria um efeito de cavidade ou ilustração para o conteúdo <div>. Para criar um Well, é necessário simplesmente colocar o conteúdo dentro de um elemento .well no <div>. Abaixo está um exemplo de um Well padrão:

exemplo online

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap exemplo　-　Well padrão</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="well">Olá，estou no Well!<!/div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

tamanho

Você pode usar classes opcionais well-lg ou well-sm para alterar o tamanho do Well. Essas classes são usadas com .well As classes combinadas afetam o preenchimento interno (padding), dependendo da classe usada, o Well se mostrará maior ou menor.

exemplo online

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap exemplo　-　Well do tamanho</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="well well-lg">Olá, estou no grande Well! </div>
<div class="well well-sm">Olá, estou no pequeno Well! </div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Criar uma Página Web com BootstrapPainel Bootstrap