Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ของ Twitter Bootstrap เป็นผลิตภัณฑ์โอเพ่นซอร์สที่วางจำหน่ายใน GitHub ในเดือนสิงหาคม 2011
เนื้อหาของแพ็คเกจ bootstrap
โครงสร้างพื้นฐาน: Bootstrap จัดเตรียมโครงสร้างพื้นฐานด้วยระบบกริดสไตล์การเชื่อมโยงและพื้นหลัง สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วนโครงสร้างพื้นฐาน bootstrap
CSS: Bootstrap มาพร้อมกับคุณสมบัติดังต่อไปนี้: การตั้งค่า CSS ทั่วโลก, คำจำกัดความของรูปแบบองค์ประกอบ HTML พื้นฐาน, คลาสที่ขยายได้และระบบกริดขั้นสูง สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วน Bootstrap CSS
ส่วนประกอบ: Bootstrap มีส่วนประกอบที่นำกลับมาใช้ใหม่ได้มากกว่าหนึ่งโหลสำหรับการสร้างภาพเมนูแบบเลื่อนลงการนำทางกล่องเตือนกล่องป๊อปอัพและอื่น ๆ สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วนองค์ประกอบเลย์เอาต์
ปลั๊กอิน JavaScript: Bootstrap มีปลั๊กอิน jQuery ที่กำหนดเองมากกว่าหนึ่งโหล คุณสามารถรวมปลั๊กอินทั้งหมดโดยตรงหรือทีละตัว สิ่งนี้จะอธิบายอย่างละเอียดในส่วนปลั๊กอิน bootstrap
การปรับแต่ง: คุณสามารถปรับแต่งส่วนประกอบ bootstrap ตัวแปรน้อยลงและปลั๊กอิน jQuery เพื่อรับเวอร์ชันของคุณเอง
สิ่งที่แนะนำข้างต้นไม่ใช่จุดสนใจของบทความนี้ นี่คือ วิธีการอัปโหลดรูปภาพหลังจากสร้างแบบฟอร์มคุณสามารถดูตัวอย่างภาพได้ทันเวลา
รหัสมีดังนี้ (ที่อยู่การเชื่อมต่อ: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form3-ele-img.html):
•อาศัยปลั๊กอิน jQuery-file-upload คุณต้องอ้างอิง jQuery.ui.widget.js, jQuery.iframe-transport.js และ jQuery.fileload.js
•โทร global.fn.initplugin ('img', 'formContainer'); formContainer: สำหรับ ID แบบฟอร์ม, แคบช่วงการค้นหา, ไม่บังคับ
หลักการของปลั๊กอินนี้คือการอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์จากนั้นเซิร์ฟเวอร์จะส่งคืนพา ธ ไปยังที่เก็บอิมเมจ สุดท้ายเมื่อส่งแบบฟอร์มพา ธ ไปยังที่เก็บข้อมูลเซิร์ฟเวอร์ คำอธิบายพารามิเตอร์:
ID: 'สามารถให้ได้ตามต้องการส่วนใหญ่ใช้เพื่อแยกความแตกต่าง'
หลาย: 'จริง' ไม่ว่าจะอนุญาตให้เลือกไฟล์หลายไฟล์ในระหว่างการอัปโหลด
ชื่อ: คีย์ที่จะส่งเมื่ออัปโหลดไฟล์
Extendattr:
ฟิลด์: เมื่อบันทึกแบบฟอร์มชื่อคีย์ที่ส่ง: ตัวเลือก [Single | Mutiple | null] ถ้าเป็นเดี่ยวหมายความว่าภาพที่อัปโหลดจะแทนที่ภาพที่มีอยู่มิฉะนั้นจะถูกผนวกเข้ากับภาพปัจจุบัน
URL: URL ที่ส่งโดยการอัปโหลดภาพคุณยังสามารถแก้ไขค่าเริ่มต้นใน global.fn.inituploadimage ในไฟล์ global.js
หมายเหตุ: รูปแบบ JSON ที่ส่งคืนโดยค่าเริ่มต้นคือ: {ผลลัพธ์: 200, imgurl: '...... '}, ผลลัพธ์: 200 หมายความว่าการอัปโหลดรูปภาพสำเร็จ!
กำลังใช้งานภาพหน้าจอ:
ข้างต้นเป็นคำอธิบายแบบเต็มของการสนับสนุนสำหรับการอัพโหลดรูปแบบฟอร์ม Smart Smart Smart (9) การอัปโหลดรูปแบบที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!