부트스트랩 웰


Well은 콘텐츠에 움푹 들어간 표시나 일러스트레이션 효과를 주는 컨테이너 <div>입니다. Well을 만들려면 클래스가 .well인 <div> 안에 콘텐츠를 배치하세요. 다음 예는 기본 Well을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的 Well</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="well">您好，我在 Well 中！</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요.

Size

옵션 클래스 well을 사용할 수 있습니다. lg 또는 well-sm을 사용하여 Well의 크기를 변경하세요. 이 두 클래스는 .well 클래스와 함께 사용됩니다. 이 두 클래스는 패딩에 영향을 미치므로 사용된 클래스에 따라 Well이 더 크거나 작게 표시됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - Well 的尺寸大小</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요