BS Form Input 크기
Input 높이 설정 클래스
Input 너비 설정 클래스 (※ Grid 클래스 사용)
- .col-lg-*
- .col-md-*
- .col-sm-*
- .col-xs-*
BS Form Input Height (높이) 방법1 - .form-group 클래스 경우
Label과 Input 수직정렬
<form>
<div class="form-group">
<label for="a">작은 입력창</label>
<input class="form-control input-sm" id="a" type="text">
</div>
<div class="form-group">
<label for="b">기본 입력창</label>
<input class="form-control" id="b" type="text">
</div>
<div class="form-group">
<label for="c">큰 입력창</label>
<input class="form-control input-lg" id="c" type="text">
</div>
</form>
Label과 Input 수평정렬
※ .form-group-* 클래스 : 수평폼에서 레이블 및 폼 컨트롤 요소의 크기를 빠르게 설정.
<div class="container">
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="a">form-group-lg</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="a">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="b">form-group-sm</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="b">
</div>
</div>
</form>
</div>
BS Form Input Height (높이) 방법2 - .input-group 클래스 경우
[큰 인풋창]
<div class="container">
<form>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
[작은 인풋창]
<div class="container">
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
BS Form Input Width (너비)
- .col-xs-열개수 : 768px 미만 화면너비 - 초소형기기 (Extra Small Device : 스마트폰)
- .col-sm-열개수 : 768px 이상 화면너비 - 소형기기 (Small Device : 태블릿)
- .col-md-열개수 : 992px 이상 화면너비 - 중형기기 (Middle Device : 소형노트북)
- .col-lg-열개수 : 1200px 이상 화면너비 - 대형기기 (Large Device : 노트북 및 데스크톱)
그리드 자세히 보기
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
[참고] .row 클래스
.row {
margin-right: -15px;
margin-left: -15px;
}
BS Input - Help Text (도움말)
<div class="form-group">
<label for="pwd">비밀번호:</label>
<input type="password" class="form-control" id="pwd" placeholder="password 입력">
<span class="help-block">도움말 텍스트</span>
</div>
[참고]
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
