Static Control (정적 제어요소 = 일반텍스트 추가)
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<p class="form-control-static "></p>
</div>
</div>
</form>
예제보기
Input Group (인풋그룹) + 입력창 앞 아이콘 + 입력창 뒤 아이콘
Input 앞 에 아이콘 배치 : .input-group-addon 클래스 이용.
<form>
<div class="input-group ">
<span class="input-group-addon "
<input id="email " type="text" class="form-control" name="email " placeholder="Email ">
</div>
<div class="input-group ">
<span class="input-group-addon "><i class="glyphicon glyphicon-lock"></i></span>
<input id="password " type="password" class="form-control" name="password " placeholder="Password ">
</div>
<div class="input-group ">
<span class="input-group-addon ">Text</span>
<input id="msg " type="text" class="form-control" name="msg " placeholder="Additional Info ">
</div>
</form>
예제보기
Input 뒤 에 아이콘 배치 : .input-group-btn 클래스 이용.
<form>
<div class="input-group ">
<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>
예제보기
BS Form Control State (폼제어상태 ) - 수평폼 경우
<form class="form-horizontal ">
<div class="form-group">
<label class="col-sm-2 control-label">Focused </label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<div class="form-group">
<label for="disabledInput " class="col-sm-2 control-label">Disabled </label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput " type="text" disabled >
</div>
</div>
<fieldset disabled >
<div class="form-group">
<label for="disabledTextInput " class="col-sm-2 control-label">Fieldset disabled </label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput " class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect " class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect " class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback ">
<label class="col-sm-2 control-label" for="inputSuccess ">
Input with success and icon </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess ">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback ">
<label class="col-sm-2 control-label" for="inputWarning">
Input with warning and icon </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback ">
<label class="col-sm-2 control-label" for="inputError">
Input with error and icon </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
예제보기
BS Form Control State (폼제어상태 ) - 인라인폼 경우
<form class="form-inline ">
<div class="form-group">
<label for="focusedInput ">Focused </label>
<input class="form-control" id="focusedInput " type="text">
</div>
<div class="form-group">
<label for="disabledInput ">Disabled </label>
<input class="form-control" id="disabledInput " type="text" disabled >
</div>
<div class="form-group has-success has-feedback ">
<label for="inputSuccess2 ">Input with success </label>
<input type="text" class="form-control" id="inputSuccess2 ">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback ">
<label for="inputWarning2 ">Input with warning </label>
<input type="text" class="form-control" id="inputWarning2 ">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback ">
<label for="inputError2 ">Input with error </label>
<input type="text" class="form-control" id="inputError2 ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
예제보기
[참고]
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.has-feedback {
position: relative;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
