Đầu vào biểu mẫu Bootstrap (thêm)
Kiểm soát tĩnh
Nếu bạn cần chèn văn bản thuần túy bên cạnh nhãn biểu mẫu trong biểu mẫu nằm ngang, hãy sử dụng lớp .form-control-static trên phần tử <p> :
Ví dụ
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static"> [email protected] </p>
</div>
</div>
</form> Hãy tự mình thử »Nhóm đầu vào Bootstrap
Lớp .input-group là một thùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau nó dưới dạng "văn bản trợ giúp".
Lớp .input-group-addon đính kèm một biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập liệu.
Chữ
Ví dụ
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<input id="email"
type="email" 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> Hãy tự mình thử » .input-group-btn gắn một nút bên cạnh đầu vào. Điều này thường được sử dụng cùng với thanh tìm kiếm:
Ví dụ
<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> Hãy tự mình thử » Trạng thái kiểm soát biểu mẫu Bootstrap
- INPUT FOCUS - Đường viền của đầu vào bị xóa và bóng hộp được áp dụng trên tiêu điểm
- ĐẦU VÀO TẮT - Thêm thuộc tính
disabledđể tắt trường đầu vào - BỘ TRƯỜNG BỊ TẮT - Thêm thuộc tính
disabledvào bộ trường để tắt tất cả các điều khiển bên trong - ĐẦU VÀO ĐỌC - Thêm thuộc tính
readonlyvào đầu vào để ngăn người dùng nhập - TRẠNG THÁI XÁC NHẬN - Bootstrap bao gồm các kiểu xác thực cho các thông báo lỗi, cảnh báo và thành công. Để sử dụng, hãy thêm
.has-warning,.has-errorhoặc.has-successvào phần tử gốc - BIỂU TƯỢNG - Bạn có thể thêm biểu tượng phản hồi với lớp
.has-feedbackvà một biểu tượng - NHÃN ẨN - Thêm lớp
.sr-onlytrên các nhãn không hiển thị
Ví dụ sau đây minh họa một số trạng thái điều khiển biểu mẫu ở trên ở dạng Horizontal :
Ví dụ
<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> Hãy tự mình thử »Và đây là ví dụ về một số trạng thái điều khiển biểu mẫu ở dạng Nội tuyến :
Ví dụ
<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="inputPassword">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> Hãy tự mình thử »