부트스트랩의 폼양식적용폼
부트스트랩을 통해 폼에 여러가지 양식을 적용하고자한다.
form-group
입력받는 양식을 div로 묶어준다
class="form-group"
form-group을 적용하는것은
.form-group{
margin-bottom: 15px;
}
와 같은 효과를 준다
예시)
<div class="form-group">
<label for="name">이름</label>
<input type="text" name="name" class="form-control" placeholder="이름">
</div>
<div class="form-group">
<label for="emailaddress">이메일</label>
<input type="email" name="emailaddress" class="form-control" placeholder="이메일">
</div>form-control
입력받는 양식에 적용 (input태그에)
class="form-control"
form-control을 적용하면
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px; /*상하 6px 좌우 12px*/
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /*테두리 설정됨*/
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
의 효과를 부여한다
예시) 위에 예시에 이미 나왔지만 이렇게 입력 받는 태그에 적용한다.
<div class="form-group">
<label for="name">이름</label>
<input type="text" name="name" class="form-control" placeholder="이름">
</div>
<div class="form-group">
<label for="emailaddress">이메일</label>
<input type="email" name="emailaddress" class="form-control" placeholder="이메일">
</div>
form-inline
인라인폼: 브라우저의 폭에 따라서 배치방법이 변경 (폼태그 안에쓴다)
1)폭이 넓으면 가로로 정렬
2)폭이 줄어들면 세로로 정렬
인라인 폼을 쓰면
@media (min-width: 768px) { 768px이상이면 가로정렬
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
의 효과를 적용한다.
예시)
<form role="form" class="form-inline">
<div class="form-group">
<label for="name" class="sr-only">이름</label>
<input type="text" name="name" class="form-control" placeholder="이름">
</div>
<div class="form-group">
<label for="emailaddress" class="sr-only">이메일</label>
<input type="email" name="emailaddress" class="form-control" placeholder="이메일">
</div>
<div class="form-group">
<button type="submit">확인</button>
</div>
</form>
.sr-only 클래스 선택자(화면에 안보이게 설정)(label을 감출목적)
예시는 위의 예시에 적용
form-horizontal
폼양식을 수평으로 정렬
label,input에 적용(그리드 시스템과 혼합)
=>모바일(col-xs-n(1~12)), pc(col-md-n or col-lg-n)
입력양식은 div로 묶어줘야 된다.
<h4 class="text-primary text-center">부트스트랩의 수평폼</h4>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 col-lg-2 control-label">이름</label>
<div class="col-xs-10 col-lg-10">
<input type="text" name="name" class="form-control" placeholder="이름">
</div>
</div>
<div class="form-group">
<label for="emailaddress" class="col-xs-2 col-lg-2 control-label">이메일</label>
<div class="col-xs-10 col-lg-10">
<input type="email" name="emailaddress" class="form-control" placeholder="이메일">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10 col-lg-offset-2 col-lg-10"> <!-- 버튼은 하나라서 하나에 12개를 넣어야되서 여백 설정 -->
<button type="submit">확인</button>
</div>
</div>
</form>
checkbox
div 태그로 묶어주고 label로 감싸준다.
checkbox에 부트스트랩을 적용해준다
<h5 class="text-success">input type="checkbox"</h5>
<div class="checkbox">
<label>
<input type="checkbox" value="">여기는 체크박스사용
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">체크박스는 다중선택
</label>
</div>
radio
div 태그로 묶어주고 label로 감싸준다.
radio에 부트스트랩을 적용해준다
<h5 class="text-info text-center">input type="radio"</h5>
<div class="radio">
<label>
<input type="radio" name="optionRadios" id="optionRadios" value="option1" checked>여기는 라디오박스 사용
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionRadios" id="optionRadios2" value="option2" checked>여기는 라디오박스 사용2
</label>
</div>
checkbox-inline(수평정렬)
label로 묶어주고 클래스선택자부여 ->수평정렬 (checkbox-inline) 또는 (radio-inline)
<h5 class="text-primary text-center">checkbox-inline</h5>
<label class="checkbox-inline">
<input type="checkbox" value="option1">1.회원가입
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">2.회원로그인
</label>
2022-08-09
