Bootstrap 表单语法与案例

表单控件

添加.form-control样式即可将基本表单控件转化为Bootstrap样式

• .form-control 应用于表单控件
• .input-lg 大号控件
• .input-sm 小号控件

Bootstrap基本表单

<form><!--表单-->
    <div class="form-group"><!--一个控件组-->
        <label for="input-name">姓名：</label>
        <input type="text" required id="input-name" class="form-control">
    </div>
</form>

注意表单内先是控件组，且表单元素要采用class="from-control"样式

表单样式

<form> <!--Bootstrap中的默认表单是垂直样式的-->
<form class="form-horizontal"> <!--水平表单，控件组控件在一行内-->
<form class="form-inline"> <!--内联表单，表单元素全部排成一行-->

附加控件

通过附加控件可以实现神奇的效果，例如在表单一行内添加单选、复选按钮。

附加控件可以通过控件组内添加.input-group-addon类实现，例如：

<div class="input-group">
    <span class="input-group-addon"><!--显示在输入框之前的单选框-->
        <input type="radio">        
    </span> 
    <input type="text" class="form-control">
</div>

纯文本控件

有时候只需要显示文本，可以使用.form-control-static类，例如：

<div class="form-group">
<label class="col-sm-4 control-label">邮箱</label>
<div class="col-sm-8">
  <p class="form-control-static">[email protected]</p>
</div>
</div>

常用控件例子

静态文本框(仅显示，不可输入)

<div class="form-group">
    <label class="col-sm-4 control-label">邮箱：</label>
    <div class="col-sm-8">
      <p class="form-control-static">[email protected]</p>
    </div>
</div>

文本输入框

<div class="form-group">
    <label>姓名：</label>
    <input type="text" class="form-control" placeholder="请输入姓名">
</div>

多行文本输入框

<div class="form-group">
    <label>个人简介</label>
    <textarea class="form-control" rows="10"></textarea>
</div>

单选框

<label>选择性别</label>
<div class="radio">
   <label>
      <input type="radio" name="radioSex" id="radioMale" value="1" checked> 男
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="radioSex" id="radioFemale" value="2">女
   </label>
</div>

内联单选框(显示在单行内)

<label>选择性别</label>
<div>
   <label class="radio-inline">
      <input type="radio" name="radioSex" id="radioMale"
         value="1" checked> 男
   </label>
   <label class="radio-inline">
      <input type="radio" name="radioSex" id="radioFemale"
         value="2"> 女
   </label>
</div>

复选框

<label>爱好</label>
<div class="checkbox">
   <label><input type="checkbox" value="1">篮球</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="2">足球</label>
</div>

内联复选框(显示在单行内)

<label>爱好</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" value="1">篮球
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="2"> 足球
    </label>
</div>

下拉选择框(单选、多选)

<div class="form-group">
  <label>单选</label>
  <select class="form-control">
     <option>男</option>
     <option>女</option>
  </select>

  <label for="name">多选</label>
  <select multiple class="form-control">
     <option>篮球</option>
     <option>足球</option>
     <option>乒乓球</option>
  </select>
</div>