搜索

HTML 代码
<p>

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

表单效果

HTML 代码
<p><input type="text" placeholder="默认" value="" class="border pd-5" style="width:70%; height:25px;" /></p>
<p><input type="text" placeholder="圆角" value="" class="border pd-5 radius-7" style="width:70%; height:25px;" /></p>
<p><textarea placeholder="textarea" class="textarea" style="width:71%; height:100px;" /></textarea></p>
        

表单加强效果

姓名
电话
HTML 代码
<div class="border" style="width:300px; height:40px;">
<div class="f-l text-c" style="width:60px; height:40px; line-height:40px; color:#333">姓名</div>
<div class="f-l"><input type="text" placeholder="输入内容" class="pl-15" style="width:225px; height:40px; border:none" /></div>
</div>

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

SELECT效果

HTML 代码
<span class="select-box">
  <select class="select" 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>
        
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>