จาก Bootstrap ปลั๊กอินรูปแบบการออกแบบวัสดุจะถูกนำมาใช้กับการดาวน์โหลดซอร์สโค้ด

ปลั๊กอินฟอร์มวัสดุ jQuery เป็นปลั๊กอินรูปแบบการออกแบบวัสดุ jQuery ตาม bootstrap แบบฟอร์มนี้เปลี่ยนรูปแบบของ Bootstrap เป็นรูปแบบแบนผ่านสไตล์ที่กำหนดเองและ jQuery ด้วยเอฟเฟกต์แท็กลอยตัว

ดาวน์โหลดซอร์สโค้ดตัวอย่างออนไลน์

วิธีใช้

การใช้แบบฟอร์มรูปแบบการออกแบบวัสดุนี้จำเป็นต้องมีการแนะนำ jQuery, ไฟล์ที่เกี่ยวข้องกับ bootstrap, FiticalFormstyles.css, ไฟล์ materialform.js ลงในหน้า

 <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" src = "js/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> </script> <script src = "js/materialform.js"> </script>

โครงสร้าง HTML

โครงสร้าง HTML ของแบบฟอร์มรูปแบบการออกแบบวัสดุได้รับการแก้ไขคุณสามารถคัดลอกรหัสต่อไปนี้

 <div id = "formoutterwrapper"> <div id = "forminnerWrapper"> <form id = "materialform" method = "post" action = "" role = "form" autocomplete = "ปิด"> <div> <div> <label for = "firstName"> ชื่อผู้ใช้ สำหรับ = "LastName"> NickName </label> <input type = "text" id = "LastName" name = "LastName"> </div> </div> <div> <div> <div> <label for = "email"> อีเมล </label> <อินพุต type = "text" id = "อีเมล" name = "phone"> </div> </div> <div> <div> <label for = "คำอธิบาย"> คำอธิบายโครงการ </label> <อินพุต type = "text" id = "คำอธิบาย" name = "คำอธิบาย"> </div> </div> <div> <div>

ที่อยู่ gitHub ของปลั๊กอินฟอร์มนี้คือ: https://github.com/ch0chi/jquery-material-form-plugin