회원가입 페이지나 로그인 페이지 같은 입력양식이라고 보면 된다.
콤포넌트 · 부트스트랩
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
bootstrapk.com
"입력 그룹" 부분을 찾아서 참고하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>폼</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
li { margin-top:20px; }
</style>
</head>
<body>
<ul>
<li class="form-inline">
<label for="">아이디 :</label>
<input type="text" class="form-control">
</li>
<li class="form-inline">
<label for="">비밀번호 :</label>
<input type="password" class="form-control">
</li>
<li class="form-inline">
<label for="">생년월일 :</label>
<select name="" id="" class="form-control">
<option value="">년도</option>
<option value="">1995</option>
<option value="">1994</option>
</select>
-
<select name="" id="" class="form-control">
<option value="">월</option>
<option value="">01</option>
<option value="">02</option>
</select>
-
<select name="" id="" class="form-control">
<option value="">일</option>
<option value="">30</option>
<option value="">31</option>
</select>
</li>
<li class="">
<input type="checkbox">
<label for="">약관에 동의 하시겠습니까?</label>
</li>
</ul>
</body>
</html>body부분 일부 소스코드 해석:
바디태그 상단에 style요소가 들어가 있는데 만약 li태그에 margin이 없으면 너무 다닥다닥 붙어서 출력이 되기때문에 거리를 두게 만든것이다.
만약에 input태그에서 class="form-control"이 없으면 입력창이 굉장히 작게 나온다. 하지만 label태그에 "아이디: "텍스트에 다음줄에 나올정도로 너무 불필요하게 커지게 되는데, 이것을 방지하기 위해서 li태그 클래스에 "form-inline" 요소를 추가하는것이다. 이렇게 하면 보기 좋게 된다.
select태그 자식요소인 option태그를 보면 1995와 1994를 보게 될건데, 선택할 년도 범위를 정해주는곳이다.
select태그사이에 대쉬 기호가 있는데 생략해도 작동하는데 지장이 없다.
'부트스트랩 > 컴포넌트' 카테고리의 다른 글
| 컴포넌트 - 네비게이션 (jQuery cnd + Bootstrap Legacy + 부트스트랩 컴포넌트) (0) | 2021.01.18 |
|---|---|
| 컴포넌트 - 패널 (0) | 2021.01.18 |
| 컴포넌트 - 테이블 (0) | 2021.01.18 |
| 컴포넌트 - 버튼 (0) | 2021.01.18 |