Bootstrap 表單輸入框 (更多)
靜態控制元件
如果您需要在水平表單中將純文字插入表單標籤旁邊，請在 <p> 元素上使用 .form-control-static 類
示例
<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">someone@example.com</p>
</div>
</div>
</form>
自己動手試一試 »
Bootstrap 輸入組
.input-group 類是一個容器，可以透過在輸入框前面或後面新增圖示、文字或按鈕作為“幫助文字”來增強輸入框。
.input-group-addon 類將圖示或幫助文字附加到輸入欄位旁邊。
文字
示例
<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>
自己動手試一試 »
.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>
自己動手試一試 »
Bootstrap 表單控制元件狀態
- 輸入框焦點 - 輸入框的輪廓被移除，並在焦點時應用 box-shadow
- 停用的輸入框 - 新增
disabled屬性來停用輸入欄位 - 停用的 fieldset - 在 fieldset 上新增
disabled屬性以停用其中的所有控制元件 - 只讀輸入框 - 為輸入框新增
readonly屬性以防止使用者輸入 - 驗證狀態 - Bootstrap 為錯誤、警告和成功訊息提供了驗證樣式。要使用，請將
.has-warning、.has-error或.has-success新增到父元素 - 圖示 - 您可以使用
.has-feedback類和圖示新增反饋圖示 - 隱藏標籤 - 在不可見的標籤上新增
.sr-only類
以下示例在水平表單中演示了一些表單控制元件狀態
示例
<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">
成功且帶圖示的輸入框</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">
帶警告和圖示的輸入框</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">
帶錯誤和圖示的輸入框</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>
自己動手試一試 »
以下示例在內聯表單中演示了一些表單控制元件狀態
示例
<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>
自己動手試一試 »
