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

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 입력 그룹

이 장에서는 Bootstrap가 지원하는 또 다른 기능인 입력 창 그룹에 대해 설명합니다. 입력 창 그룹은 폼 컨트롤입력 창 그룹을 사용하면 텍스트 기반 입력 창에 프리픽스와 스타일을 추가할 수 있게 됩니다.

프리픽스와 슬립을 추가하여 사용자 입력에 공통 요소를 추가할 수 있습니다. 예를 들어, 달러 기호를 추가하거나 Twitter 사용자 이름 앞에 @를 추가하거나, 애플리케이션 인터페이스가 필요로 하는 다른 공통 요소를 추가할 수 있습니다。

를 통해 .form-control 의 단계를 추가하세요：

  • 프리픽스 또는 슬립 인터널을 class가 .input-group 의 <div> 내에.

  • 의 class가 .input-group-addon 의 <span> 내에 추가적인 내용을 배치하세요.

  • 를 <input> 요소 앞 또는 뒤에 배치하세요.

브라우저 간의 호환성을 유지하기 위해 <select> 요소를 사용하지 마세요. 왜냐하면 WebKit 브라우저에서 완전히 렌더링되지 않기 때문입니다. 또한 입력 상자 그룹의 class를 직접 양식 그룹에 적용하지 마세요. 입력 상자 그룹은 독립적인 컴포넌트입니다.

기본 입력 상자 그룹

다음 예제에서 기본 입력 상자 그룹을 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　예제　-　기본 입력 상자 그룹</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="input-group">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="twitterhandle">
		</div>
		<br>
		<div　class="input-group">
			<input　type="text"　class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
		<br>
		<div　class="input-group">
			<span　class="input-group-addon">$</span>
			<input　type="text"　class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

입력 상자 그룹의 크기

를 통해 .input-group 상대적인 양식 크기의 class를 추가하세요（예를 들어 .input-group-lg、input-group-sm）를 사용하여 입력 상자 그룹의 크기를 변경할 수 있습니다. 입력 상자 내의 내용은 자동으로 크기를 조정됩니다.

다음 예제에서 이 점을 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　예제　-　입력 상자 그룹의 크기</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="input-group　input-group-lg">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div　class="input-group">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div　class="input-group　input-group-sm">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

체크박스와 라디오 플러그인

체크박스와 라디오 플러그인을 입력 상자 그룹의 프리픽스 또는 슬립 인터널로 사용할 수 있습니다. 다음 예제에서 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　입력 상자 그룹의 체크박스와 라디오 플러그인</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-addon">
						<input　type="checkbox">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-addon">
						<input　type="radio">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

버튼 플러그인

또한 버튼을 입력 상자 그룹의 프리픽스 또는 슬립 인터널로 사용할 수 있습니다. 이 경우, 버튼 플러그인을 추가하는 것이 아닙니다. .input-group-addon class를 사용해야 합니다. .input-group-btn 버튼을 감싸. 이것은 필수적입니다. 왜냐하면 기본 브라우저 스타일은 재구성되지 않기 때문입니다. 다음 예제에서 이 점을 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　입력 상자 그룹의 버튼 플러그인</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

下拉 메뉴를 포함한 버튼

입력 상자 그룹에下拉 메뉴를 포함한 버튼을 추가하세요. 간단하게 하나의 .input-group-btn class 　에서 버튼과下拉 메뉴를 포함하면 됩니다，다음 예제와 같이 사용할 수 있습니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　입력 필드 그룹의下拉 메뉴 버튼</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
							下拉 메뉴　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">기능</a></li>
							<li><a　href="#">다른 기능</a></li>
							<li><a　href="#">기타</a></li>
							<li　class="divider"></li>
							<li><a　href="#">분리된 링크</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
							下拉 메뉴　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">기능</a></li>
							<li><a　href="#">다른 기능</a></li>
							<li><a　href="#">기타</a></li>
							<li　class="divider"></li>
							<li><a　href="#">분리된 링크</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

분할된下拉 메뉴 버튼

입력 필드 그룹에下拉 메뉴를 포함한 분할 버튼을 추가하여,下拉 메뉴 버튼과 유사한 스타일을 사용하지만,下拉 메뉴에 주요 기능을 추가하여 다음 예제와 같이 사용할 수 있습니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　<title>입력 필드 그룹에서 분할된下拉 메뉴 버튼</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　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">下拉 메뉴<
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">下拉 메뉴 전환</span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">기능</a></li>
							<li><a　href="#">다른 기능</a></li>
							<li><a　href="#">기타</a></li>
							<li　class="divider"></li>
							<li><a　href="#">분리된 링크</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">下拉 메뉴<
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">下拉 메뉴 전환</span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">기능</a></li>
							<li><a　href="#">다른 기능</a></li>
							<li><a　href="#">기타</a></li>
							<li　class="divider"></li>
							<li><a　href="#">분리된 링크</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
테스트를 보세요.‹/›

결과는 다음과 같습니다:

Bootstrap nawig레이션 요소Bootstrap 버튼 드롭다운 메뉴