input, checkbox, radio

  1. 首頁
  2. 示範Demo

Input樣式


<div class="form-group">
<label class="col-sm-3 control-label input-label">目標名稱</label>
<div class="col-sm-9">
<input type="text" class="form-control form-white" />
</div>
</div>

select樣式


<div class="form-group">
<label class="col-sm-3 control-label input-label">目標名稱</label>
<div class="col-sm-9">
<select class="form-control form-white" id="" runat="server">
<option value="">請選擇</option>
</select>
</div>
</div>

Checkbox & Radio


顏色列表

  • default
  • red
  • green
  • blue
  • aero
  • grey
  • orange
  • pink
  • purple

Checkbox List

Inline Checkboxes

依照上方顏色名稱可於data-checkbox屬性名稱的最後更換想要的顏色

(default為空值即可 例: data-checkbox="icheckbox_square")

<input type="checkbox" data-checkbox="icheckbox_square-blue">

如果想使checkbox橫向排列，將class屬性中的"icheck-list"改成"icheck-inline"即可

<div class="icheck-list">
<label><input type="checkbox" data-checkbox="icheckbox_square-blue"> Checkbox 1</label>
<label><input type="checkbox" data-checkbox="icheckbox_square-blue" checked> Checkbox 2</label>
<label><input type="checkbox" data-checkbox="icheckbox_square-blue"> Checkbox 3</label>
</div>

Radio List

Inline Radios

顏色更換方式與上方checkbox相同

<input type="radio" name="radio1" data-radio="iradio_square-blue">

橫向排列換法也與上方相同

<div class="icheck-list">
<label><input type="radio" name="radio1" data-radio="iradio_square-blue"> Radio Button 1</label>
<label><input type="radio" name="radio1" data-radio="iradio_square-blue" checked> Radio Button 2</label>
<label><input type="radio" name="radio1" data-radio="iradio_square-blue"> Radio Button 3</label>
</div>