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

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 양식

이 장에서는 Bootstrap를 사용하여 양식을 생성하는 방법을 배울 것입니다. Bootstrap는 간단한 HTML 태그와 확장된 클래스를 통해 다양한 스타일의 양식을 생성할 수 있습니다。

양식 레이아웃

Bootstrap는 다음과 같은 유형의 양식 레이아웃을 제공합니다：

  • 직사각형 양식(기본)

  • 내리막 표单

  • 수평 표单

직사각형 또는 기본 양식

기본 양식 구조는 Bootstrap가 기본적으로 제공하며, 개별 양식 컨트롤러는 일부 전역 스타일을 자동으로 받아들입니다. 기본 양식을 생성하는 단계를 다음에列出합니다：

  • 부모 <form> 요소에 추가합니다 role="form"。

  • 레이블과 컨트롤을 class가 있는 하나의 div에 넣습니다 .form-group 의 <div>에 추가합니다. 이는 최적의 간격을 얻는 것이 필수적입니다。

  • 모든 텍스트 요소 <input>、<textarea> 및 <select>에 class ="form-control" 。

온라인 예제

<!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>
<form　role="form">
	<div　class="form-group">
		<label for="name">이름</label>
		<input　type="text"　class="form-control"　id="name"　
			　　　placeholder="이름을 입력하십시오">
	</div>
	<div　class="form-group">
		<label for="inputfile">파일 입력</label>
		<input　type="file"　id="inputfile">
		<p　class="help"-block">이것은 블록 정렬 도움말 텍스트의 예입니다.</p>
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　체크하십시오
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">제출</button>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

내리막 표单

모든 요소가 내리막이고 왼쪽 정렬되며 레이블이 가로로 배치된 표单을 만들려면, <form> 태그에 class를 추가하십시오 .form-inline。

온라인 예제

<!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>
<form　class="form-inline"　role="form">
	<div　class="form-group">
		<label　class="sr-only"　for="name">이름</label>
		<input　type="text"　class="form-control"　id="name"　
			　　　placeholder="이름을 입력하십시오">
	</div>
	<div　class="form-group">
		<label　class="sr-only"　for="inputfile">파일 입력</label>
		<input　type="file"　id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　체크하십시오
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">제출</button>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

  • 기본적으로, Bootstrap의 input, select 및 textarea는 100% 너비입니다. 내리막 표单을 사용할 때, 표单 컨트롤에 너비를 설정해야 합니다.

  • class를 사용하여 .sr-only으로, 내리막 표单의 레이블을 숨길 수 있습니다.

수평 표单

수평 표单은 표单의 태그 수뿐만 아니라 표单의 표시 형식도 다릅니다. 수평 레이아웃 표单을 만들기 위해 다음 단계를 따르십시오:

  • 부모 <form> 요소에 class를 추가하십시오 .form-horizontal。

  • 레이블과 컨트롤을 class가 있는 하나의 div에 넣습니다 .form-group 의 <div>에 있습니다.

  • 레이블에 class를 추가하십시오 .control-label。

온라인 예제

<!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>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　for="firstname"　class="col-sm-2　control-label">이름</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="firstname"　
				　　　placeholder="이름을 입력하십시오">
		</div>
	</div>
	<div　class="form-group">
		<label　for="lastname"　class="col-sm-2　control-label">이름</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="lastname"　
				　　　placeholder="이름을 입력하십시오">
		</div>
	</div>
	<div　class="form-group">
		<div　class="col-sm-offset-2　col-sm-10">
			<div class="checkbox">
				<label>
					<input　type="checkbox">　메모하십시오
				</label>
			</div>
		</div>
	</div>
	<div　class="form-group">
		<div　class="col-sm-offset-2　col-sm-10">
			<button　type="submit"　class="btn　btn-default">로그인</button>
		</div>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

지원되는 표单 컨트롤

Bootstrap는 가장 일반적인 표单 컨트롤을 지원하며, 주로 input, textarea, checkbox, radio 및 select。

输入框(Input)

입력 상자(Input)5 가장 일반적인 폼 텍스트 필드는 입력 상자 input입니다. 사용자는 거의 모든 필수 폼 데이터를 입력할 수 있습니다. Bootstrap는 모든 원시 HTML의 input 유형 지원, 포함됩니다:-text, password, datetime, datetime 과 local, date, month, time, week, number, email, url, search, tel를 설정할 수 있습니다. type 宣言은 필수적이며, 이를 통해 input 완전한 스타일을 얻을 수 있습니다.

온라인 예제

<!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>
<form　role="form">
	<div　class="form-group">
		<label for="name">라벨</label>
		<input　type="text"　class="form-control" placeholder="텍스트 입력">
	</div>
　</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

텍스트 박스(Textarea)

다중 행 입력이 필요할 때, 텍스트 박스 textarea를 사용할 수 있습니다. 필요에 따라 변경할 수 있습니다 rows 속성(행 수가 적으면 작은 박스, 행 수가 많으면 큰 박스).

온라인 예제

<!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>
<form　role="form">
	<div　class="form-group">
		<label for="name">텍스트 박스</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

체크박스(Checkbox)와 라디오 버튼(Radio)

체크박스와 라디오 버튼은 사용자가 예약된 선택 사항 중에서 선택할 수 있도록 도와줍니다.

  • 폼을 생성할 때, 사용자가 목록에서 여러 옵션을 선택할 수 있도록 하려면 사용하세요 checkbox만약 사용자가 하나의 옵션만 선택할 수 있도록 제한하고 싶다면 사용하세요 radio。

  • 시리즈의 체크박스와 라디오 버튼에 사용합니다 .checkbox-inline 또는 .radio-inline 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>
<label for="name">기본적인 체크박스와 라디오 버튼 예제</label>
<div class="checkbox">
	<label><input type="checkbox" value="">옵션　1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">옵션　2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1"　value="선택 사항1"　checked>　선택 사항　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2"　value="선택 사항2">옵션　2　-　선택하면 선택 옵션을 취소합니다　1
	</label>
</div>
<label for="name">inline의 체크박스와 라디오 버튼 예제</label>
<div>
	<label class="checkbox-inline">
		<input　type="checkbox"　id="inlineCheckbox"}1"　value="선택 사항1">　선택 사항　1
	</label>
	<label class="checkbox-inline">
		<input　type="checkbox"　id="inlineCheckbox"}2"　value="선택 사항2">　선택 사항　2
	</label>
	<label class="checkbox-inline">
		<input　type="checkbox"　id="inlineCheckbox"}3"　value="선택 사항3">　선택 사항　3
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios3"　value="선택 사항1"　checked>　선택 사항　1
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios4"　value="선택 사항2">　선택 사항　2
	</label>
</div>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

셀렉트 박스(Select)

사용자가 여러 개의 옵션 중 하나를 선택할 수 있도록 하고자 할 때, 선택 박스를 사용합니다.

  • <select>를 사용하여 목록 옵션을 표시하면, 보통 사용자가 잘 알고 있는 선택 목록입니다. 예를 들어, 주나 숫자와 같은 것입니다.

  • 사용 multiple="multiple" 사용자가 여러 개의 선택 사항을 선택할 수 있도록 합니다.

아래의 예제는 이 두 가지 유형(select와 multiple)을 보여줍니다:

온라인 예제

<!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>
<form　role="form">
	<div　class="form-group">
		<label　for="name">선택 목록</label>
		<select　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label　for="name">다중 선택 선택 목록</label>
		<select　multiple　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

정적 컨트롤

레이아웃에서 수평 양식 내의 텍스트를 포함하려면, <p>에 class를 사용하십시오 .form-control-static。

온라인 예제

<!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>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　class="col-sm-2　control-label">이메일</label>
		<div　class="col-sm-10">
			<p　class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div　class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">암호</label>
		<div　class="col-sm-10">
			<input　type="password"　class="form-control"　id="inputPassword"　
				　　　placeholder="암호를 입력하세요">
		</div>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

양식 컨트롤 상태

뿐만 아니라 :focus 상태(즉, 사용자가 input을 클릭하거나 tab 키를 사용하여 input에 포커스를 맞추면)에 대해 Bootstrap는 비활성화된 입력 창의 스타일을 정의하고, 양식 검증 클래스를 제공합니다.

입력 창 포커스

입력 창 input이 :focus 의 경우, 입력 창의 테두리는 제거되고 동시에 적용됩니다 box-shadow。

사용할 수 없는 입력 창 input

입력 창(input)을 비활성화하려면 간단히 추가하면 됩니다 disabled 이 표현은 입력 창을 비활성화하는 것뿐만 아니라, 입력 창의 스타일과 마우스 포인터가 요소에��러 있을 때의 마우스 포인터 스타일도 변경합니다.

사용할 수 없는 필드셋 fieldset

<fieldset>에 disabled 속성을 추가하여 <fieldset> 내의 모든 컨트롤을 비활성화합니다。

검증 상태

Bootstrap는 오류, 경고 및 성공 메시지의 검증 스타일을 포함하고 있습니다. 단순히 부모 요소에 적절한 class를 추가하면 됩니다（.has-warning、 .has-error 또는 .has-success）를 사용하여 검증 상태를 설정할 수 있습니다。

아래의 예제는 모든 컨트롤 상태를 보여줍니다：

온라인 예제

<!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>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　class="col-sm-2　control-label">포커스</label>
		<div　class="col-sm-10">
			<input class="form-control"　id="focusedInput"　type="text"　　value="이 입력 필드는 포커스를 받았습니다...">
		</div>
	</div>
	<div　class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			금지
		</label>
		<div　class="col-sm-10">
			<input class="form-control"　id="disabledInput"　type="text"　placeholder="이 입력 필드는 입력 금지..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div　class="form-group">
			<label　for="disabledTextInput"　　class="col-sm-2　control-label">선택 금지 입력（Fieldset disabled）
			</label>
			<div　class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　　placeholder="선택 금지 입력">
			</div>
		</div>
		<div　class="form-group">
			<label　for="disabledSelect"　　class="col-sm-2　control-label">선택 금지 메뉴（Fieldset disabled）
			</label>
			<div　class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>선택 금지</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div　class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			입력 성공
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div　class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			입력 경고
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputWarning">
		</div>
	</div>
	<div　class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			입력 오류
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputError">
		</div>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

양식 컨트롤 크기

를 각각 사용하여 .input-lg 과 .col-lg-* 로 양식의 높이와 너비를 설정할 수 있습니다. 아래의 예제는 이를 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　양식 컨트롤 크기</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<input class="form-control　input-lg"　type="text"　placeholder=".input-lg">
	</div>
	<div　class="form-group">
		<input class="form-control"　type="text"　placeholder="기본 입력">
	</div>
	<div　class="form-group">
		<input class="form-control　input-sm"　type="text"　placeholder=".input-sm">
	</div>
	<div　class="form-group">
	</div>
	<div　class="form-group">
		<select　class="form-control　input-lg">
			<option　value="">.input-lg</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control">
			<option　value="">기본 선택</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control　input-sm">
			<option　value="">.input-sm</option>
		</select>
	</div>
	<div　class="row">
		<div　class="col-lg-2">
			<input　type="text"　class="form-control"　placeholder=".col-lg-2">
		</div>
		<div　class="col-lg-3">
			<input　type="text"　class="form-control"　placeholder=".col-lg-3">
		</div>
		<div　class="col-lg-4">
			<input　type="text"　class="form-control"　placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

양식 도움말 텍스트

Bootstrap 양식 컨트롤은 입력 필드 input에 블록형 도움말 텍스트를 가질 수 있습니다. 전체 너비를 차지하는 내용 블록을 추가하려면 <input> 뒤에 .help-block。아래의 예제는 이를 보여줍니다：

온라인 예제

<!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>
<form　role="form">
	<span>도움말 텍스트 예제</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">긴 도움말 텍스트 블록, 한 행을 초과하면,
		다음 행으로 확장되어야 합니다. 이 예제의 도움말 텍스트는 두 행입니다.</span>
</form>
</body>
</html>
테스트해보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 버튼Bootstrap 테이블