Đầ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 .form-control-staticlớp trên một <p>phần tử:
Thí 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>
Nhóm đầu vào Bootstrap
Lớp .input-grouplà một vùng chứa để nâng cao đầu vào bằng cách thêm một biểu tượng, văn bản hoặc một nút vào 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.
Chữ
Thí dụ
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<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>
Nút .input-group-btnđính kèm 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:
Thí 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>
Các 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à áp dụng bóng hộp trên tiêu điểm
- ĐẦU VÀO BỊ TẮT - Thêm
disabledthuộc tính để tắt trường nhập - FIELDSETS BỊ TẮT - Thêm một
disabledthuộc tính vào một tập trường để tắt tất cả các điều khiển bên trong - ĐẦU VÀO SN SÀNG - Thêm
readonlythuộc tính vào đầu vào để ngăn người dùng nhập - CÁC TRẠNG THÁI HỢP LỆ - 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, thêm
.has-warninghoặc.has-errorvào.has-successphần tử mẹ - BIỂU TƯỢNG - Bạn có thể thêm các biểu tượng phản hồi với
.has-feedbacklớp và một biểu tượng - NHÃN HIDDEN - Thêm một
.sr-onlylớp trên các nhãn không hiển thị
Ví dụ sau minh họa một số trạng thái điều khiển biểu mẫu ở trên trong biểu mẫu Ngang :
Thí 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>
Và đây là ví dụ về một số trạng thái điều khiển biểu mẫu trong biểu mẫu Nội tuyến :
Thí 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>