Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 인라인 입력폼(form-inline)

Tags:

입력폼은 기본적으로 세로로 정렬되어 있다. 그러나, 입력 항목이 그정도로 많지 않은 경우는 가로로 표시했으면 하는 경우도 있다.

그런 경우는 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>

가로폭을 넓혀 보면 가로 정렬되지만, 좁히면 세로로 바뀐다.