搜索

<p>

  <input type="text" placeholder="输入搜索关键词" class="border pd-5 btn-lr-7 f-l w30" style="height:39px;" />
  <input class="btn btn-danger pd-10 f-l btn-rr-7 w10" type="button" value="搜索" >
    
</p>
        

表单效果

<p><input type="text" placeholder="默认" class="border pd-5 w50" style="height:35px;" /></p>
<p><input type="text" placeholder="圆角" class="border pd-5 radius-7 w50" style="height:35px;" /></p>
<p><textarea placeholder="textarea" class="textarea w50" style="height:100px;" /></textarea></p>
        

表单增强效果（鼠标经过）

<p><input type="text" placeholder="默认" class="border pd-5 w50 inputhover" style="height:35px;" /></p>
        

表单布局效果

<div class="border w50" style="height:45px;">
<div class="f-l text-c w10" style="height:40px; line-height:40px; color:#333">姓名</div>
<div class="f-l"><input type="text" placeholder="输入内容" class="pl-15 w80" style="height:40px; border:none" /></div>
</div>

<div class="border radius-5 mt-20 w50" style="height:40px;">
<div class="f-l text-c w10" style="height:40px; line-height:40px; color:#333">电话</div>
<div class="f-l "><input type="text" placeholder="输入内容" class="pl-15 w80" style="height:40px; border:none" /></div>
</div>
        

SELECT效果

HTML 代码
<span class="select">
  <select class="" size="1" name="demo1">
    <option value="" selected>默认select</option>
    <option value="1">菜单一</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>
        

radio,checkbox 单选 多选

使用icheck插件进行美化。

须单独引用YIQI-UI-icheck.css，YIQI-UI-icheck.min.js两个文件。

<script src="YIQI-UI/icheck/YIQI-UI-icheck.min.js"></script>
<link href="YIQI-UI/icheck/YIQI-UI-icheck.css" rel="stylesheet">

<script>
$(function(){
  $('.skin-minimal input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
  });
});
</script>
        

复选框
复选框 checked状态
Disabled
Disabled & checked
单选按钮
单选按钮 checked状态
Disabled
Disabled & checked

HTML 代码
<div class="skin-minimal">
  <div class="check-box">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">复选框</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-2" checked>
    <label for="checkbox-2">复选框 checked状态</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled" disabled>
    <label for="checkbox-disabled">Disabled</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
    <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>
<div class="mt-20 skin-minimal">
  <div class="radio-box">
    <input type="radio" id="radio-1" name="demo-radio1">
    <label for="radio-1">单选按钮</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-2" name="demo-radio1" checked>
    <label for="radio-2">单选按钮 checked状态</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled" disabled>
    <label for="radio-disabled">Disabled</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled-checked" checked disabled>
    <label for="radio-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>
      

Switch 效果

必须先引入2个文件即：
<script src="YIQI-UI/switch/YIQI-UI-bootstrapSwitch.js"></script>
<link href="YIQI-UI/switch/YIQI-UI-bootstrapSwitch.css" rel="stylesheet">
      

HTML 代码
<div class="switch" data-on="primary" data-off="info">
  <input type="checkbox" checked />
</div>
<div class="switch" data-on="info" data-off="success">
  <input type="checkbox" checked />
</div>
<div class="switch" data-on="success" data-off="warning">
  <input type="checkbox" checked />
</div>
<div class="switch" data-on="warning" data-off="danger">
  <input type="checkbox" checked />
</div>
<div class="switch" data-on="danger" data-off="primary">
  <input type="checkbox" checked />
</div>
        

文件上传

        HTML 代码
        
        <span class="btn-upload">
          <a href="javascript:void();" class="btn btn-primary radius-5 f-14" style="width:100px; height:36px; line-height:36px;"><i class="YIQI-UI-iconfont">&#xe642;</i> 浏览文件</a>
          <input type="file" multiple name="file_0" class="input-file">
        </span>

        
        <span class="btn-upload form-group mt-30">
          <input class="input-text upload-url radius-6 border mr-10" style="width:300px; height:34px; line-height:34px;" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius-5 f-14"  style="width:100px; height:36px; line-height:36px;"><i class="YIQI-UI-iconfont">&#xe642;</i> 浏览文件</a>
          <input type="file" multiple name="file-1" class="input-file">
        </span>