Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 인라인 입력폼(form-inline)
입력폼은 기본적으로 세로로 정렬되어 있다. 그러나, 입력 항목이 그정도로 많지 않은 경우는 가로로 표시했으면 하는 경우도 있다.
그런 경우는 Bootstrap에는 “인라인 입력폼"이라는 것을 사용할 수 있다. 이것은 매우 간단하고 <form>
태그에 다음과 같이 클래스 설정을 할뿐이다.
<form class="form-inline">
이것으로 입력폼의 입력 항목이 가로로 표시되게 된다. 입력폼에 포함된 컨트롤 종류의 작성은 일반 방식과 동일하다. <div class="form-group">
태그 및 입력 태그의 class="form-control"
지정도 변함이 없다.
매우 독특한 것은, 옆에 표시되는 것은 가로폭이 충분히 있을 때에 가로폭이 어느 정도 더 좁아지면 자동으로 세워 배치되게 된다. 즉, 가로 배치 및 세로 배치는 Bootstrap을 관리해 준다.
아래에 간단한 사용 예제를 올려 두었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>컨텐츠 표시</h1>
<h2>form</h2>
</div>
<form class="form-inline">
<div class="form-group">
<label for="txt1">Text:</label>
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<label for="pw1">Password:</label>
<input type="password" class="form-control" id="pw1">
</div>
<div class="form-group">
<input type="button" class="btn" value="Click">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
가로폭을 넓혀 보면 가로 정렬되지만, 좁히면 세로로 바뀐다.