[TOC] ## 水平排列的表單模版 <details> <summary>index.html</summary> ``` <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <!-- 通過 offset-2 去對齊 input表單--> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <!-- 通過 offset-2 去對齊 input表單--> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> ``` </details> <br/> ## 多選和單選框 > [參考](https://v3.bootcss.com/css/#%E5%A4%9A%E9%80%89%E5%92%8C%E5%8D%95%E9%80%89%E6%A1%86) ### 縱向添加 ``` <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <!--縱向添加--> <div class="checkbox"> <label> <input type="checkbox" value=""> 多個checkbox 進行堆疊 </label> </div> </div> </div> ``` > radio 同理 只是把`.checkbox` 換成 `.radio` 但其實他們只是互為別名,樣式相同 ### 橫向添加 橫向只需要把 `.checkbox` 改為 `.checkbox-inline` ``` <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox-inline"> <label> <input type="checkbox"> Remember me </label> </div> <!--縱向添加--> <div class="checkbox-inline"> <label> <input type="checkbox" value="">多個checkbox 進行堆疊 </label> </div> </div> </div> ``` > radio 同理 只是把`.checkbox-inline` 換成 `.radio-inline` 但其實他們只是互為別名,樣式相同 ## 下拉列表（select） ``` <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> ``` ## 修飾控件 ### 對控件的提示文字 - help-block  <br/> ``` <div class="form-group"> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="passwd" name="passwd"> <span class="help-block">這是測試的提示文字</span> </div> </div> ``` ### 校驗狀態-顏色  <br/> - `.has-warning`、`.has-error`或`.has-success`類到這些控件的父元素即可。 - 任何包含在此元素之內的`.control-label`、`.form-control`和`.help-block`元素都將接受這些校驗狀態的樣式 - 對所有空間生效 ``` <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> </div> ``` ### 校驗狀態-圖標  <br/> - 在`hs-*` 后添加 `has-feedback` - `glyphicon-*-*` 前一個"*"可選擇顏色和后一個"*"可選擇形狀 ``` <div class="form-group has-success has-feedback"> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="passwd" name="passwd"> <span class="help-block">這是測試的提示文字</span> <span class="glyphicon glyphicon-ok-sign form-control-feedback" aria-hidden="true"></span> </div> </div> ``` ### 控件前后修飾文字  - 使用 `input-group` 包裹 空間 - 使用 `input-group-addon` 添加文字 ``` <div class="form-group "> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <div class="input-group"> <!-- @ 在 input 前--> <span class="input-group-addon">@</span> <input type="text" class="form-control" id="passwd" name="passwd"> </div> <!-- 由于 input-group 看為一個input 整體 修飾在 input-group 外--> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> ```