搜索

HTML 代码 <p> <input type="text" placeholder="输入搜索关键词" value="" class="border pd-5 btn-lr-7 f-l" style="width:300px; height:25px;" /> <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:300px; height:25px;" /></p> <p><input type="text" placeholder="圆角" value="" class="border pd-5 radius-7" style="width:300px; height:25px;" /></p> <p><textarea placeholder="textarea" class="textarea" style="width:300px; height:125px;" /></textarea></p>

表单加强效果

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

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> <div class="clear"></div> <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>