Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 웰

Well은 내용이 내려다보이거나 그래픽 효과를 일으키는 컨테이너 <div>입니다. Well을 만들기 위해 내용을 class를 가진 .well 의 <div> 안에 넣으면 됩니다. 아래 예제는 기본 Well을 보여줍니다：

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　기본 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에서입니다! </div>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다:

크기

선택 클래스를 사용할 수 있습니다. well-lg 또는 well-sm 을 사용하여 Well의 크기를 변경합니다. 이 두 개의 클래스는 .well 이 두 개의 클래스는 내간격(padding)에 영향을 미칩니다. 사용하는 클래스에 따라 Well이 더 크거나 더 작게 표시됩니다.

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　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 패널