Bootstrap4 기본 튜토리얼

Bootstrap4 양식 컨트롤 Bootstrap4 크로스 탐색 네비게이션

Bootstrap4 양식

HTML 양식은 웹 페이지와 애플리케이션의 불가분의 일부이지만, CSS를 사용하여 하나씩 수동으로 양식 레이아웃을 생성하거나 양식 컨트롤러의 스타일을 설정하는 것은 보통 지루합니다. Bootstrap는 사전 정의된 클래스 그룹을 통해 양식 컨트롤러(태그, 입력 필드, 선택 상자, 텍스트 영역, 버튼 등)의 스타일과 정렬 과정을 크게 간소화합니다.

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

표单 요소 <input>, <textarea>, 和 <select> 요소 在使用 .form-control 클래스의 경우, 너비는 모두 100%。

Bootstrap4 표单 레이아웃

스타일 표单 (전체 화면 너비): 수직 방향
인라인 표单: 수평 방향

Bootstrap는 두 가지 유형의 표单 레이아웃을 제공합니다:

스타일 표单

다음 예제에서는 두 개의 입력 필드, 하나의 체크 박스, 하나의 제출 버튼을 사용하여 스타일 표单을 만듭니다：

예제

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>스타일 표单</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">이메일:</label>/label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="이메일 입력">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">비밀번호:</label>/label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="비밀번호 입력">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> 기억해 주세요
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행된 결과는 다음과 같습니다:

인라인 표单

모든 인라인 표单 요소는 왼쪽 정렬됩니다.

주의: 화면 너비가 576px 일 때 수직으로 쌓여 나타납니다. 화면 너비가576px 일 때 표单 요소가 동일한 수평선에 표시됩니다.

인라인 표单은 <form> 요소에 　.form-inline 클래스를 사용합니다.

다음 예제에서는 두 개의 입력 필드, 하나의 체크 박스, 하나의 제출 버튼을 사용하여 인라인 표单을 만듭니다：

예제

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>인라인 표单</h2>
　　<p>화면 너비가　576px 일 때 수평으로 표시됩니다. 만약　576px 여러 표单이 쌓여 나타납니다.</p>
　　<form class="form-inline">
　　　　<label for="email">이메일:</label>/label>
　　　　<input type="email" class="form-control" id="email" placeholder="이메일 입력">
　　　　<label for="pwd">비밀번호 입력:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="비밀번호 입력">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> 기억해 주세요
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">제출</button>
　　</form>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행된 결과는 다음과 같습니다:

Bootstrap4 양식 컨트롤 Bootstrap4 크로스 탐색 네비게이션