简要教程
这是一款基于Bootstrap4的materialdesign风格表单插件。该插件能够将bootstrap4的输入框和文本框转换为materialdesign风格的浮动标签效果。
使用方法
在HTML文件中引入。
<linkrel="stylesheet"type="text/css"href="../src/input-material.css">
<scripttype="text/javascript"src="../src/jquery.min.js"></script>
<scripttype="text/javascript"src="../src/boostrap.min.js"></script>
<scripttype="text/javascript"src="../src/input-material.js"></script>
HTML结构
<formid="contact-form">
<divclass="form-groupinput-material">
<inputtype="text"class="form-control"id="name-field"required>
<labelfor="name-field">Name</label>
</div>
<divclass="form-groupinput-material">
<inputtype="email"class="form-control"id="email-field"required>
<labelfor="email-field">Email</label>
</div>
<divclass="form-groupinput-material">
<textareaclass="form-control"id="textarea-field"rows="3"required></textarea>
<labelfor="textarea-field">YourMessage</label>
</div>
<divclass="text-center">
<buttontype="submit"class="btnbtn-primary">Send</button>
</div>
</form>
javascript
$('document').ready(function(){
//enablematerial-styleinputsinentirebody
$('body').materializeInputs();
});
或者你也可以为某个表单元素设置浮动标签效果。
$('document').ready(function(){
$('form').materializeInputs(".input-materialinput-1,.input-materialinput-2");
});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery