Tutoriales básicos Bootstrap

Plugins Bootstrap

Bootstrap Well

Well es un contenedor <div> que produce un efecto de hundimiento del contenido o de ilustración. Para crear Well, simplemente coloque el contenido en un elemento con la clase .well dentro del <div>. A continuación se muestra un ejemplo de un Well predeterminado:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Well predeterminado</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">¡Hola, estoy en el Well! </div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

tamaño

Puede usar las clases opcionales well-lg o well-sm para cambiar el tamaño de Well. Estas clases son combinadas con .well Estas clases afectan el relleno (padding) interno, dependiendo de la clase utilizada, Well se mostrará más grande o más pequeño.

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Tamaño y dimensiones de Well</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">您好，我在大的　Well　中！</div>
<div　class="well　well-sm">您好，我在小的　Well　中！</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 创建一个网页 Bootstrap 面板