ما هو bootstrap؟
Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
تاريخ
تم تطوير Bootstrap بواسطة Mark Otto من Twitter و Jacob Thornton. Bootstrap هو منتج مفتوح المصدر صدر على Github في أغسطس 2011.
محتويات حزمة bootstrap
الهيكل الأساسي: يوفر Bootstrap بنية أساسية مع نظام الشبكة وأسلوب الارتباط والخلفية. سيتم شرح ذلك بالتفصيل في قسم الهيكل الأساسي bootstrap.
CSS: يأتي Bootstrap مع الميزات التالية: إعدادات CSS العالمية ، تعريف أنماط العناصر HTML الأساسية ، فئة قابلة للتمديد ، ونظام الشبكة المتقدمة. سيتم شرح ذلك بالتفصيل في قسم Bootstrap CSS.
المكونات: يحتوي Bootstrap على أكثر من عشرة مكونات قابلة لإعادة الاستخدام لإنشاء الصور ، والقوائم المنسدلة ، والملاحة ، وصناديق التحذير ، وصناديق منبثقة ، وأكثر من ذلك. سيتم شرح ذلك بالتفصيل في قسم مكونات التصميم.
المكون الإضافي JavaScript: يحتوي Bootstrap على أكثر من عشرة مكونات مكونة من jQuery مخصص. يمكنك تضمين جميع الإضافات مباشرة أو واحدة تلو الأخرى. سيتم شرح ذلك بالتفصيل في قسم المكونات الإضافية.
التخصيص: يمكنك تخصيص مكونات 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: لمعرف النموذج ، تضييق نطاق البحث ، اختياري
يتمثل مبدأ هذا المكون الإضافي في تحميل الصورة إلى الخادم ، ثم يقوم الخادم بإرجاع المسار إلى تخزين الصورة. أخيرًا ، عند إرسال النموذج ، المسار إلى تخزين الخادم ، وصف المعلمة:
معرف: "يمكن إعطاء الإرادة ، بشكل رئيسي للتمييز"
مضاعف: "صحيح" ، سواء تم السماح بملفات التحديد المتعددة أثناء التحميل
الاسم: المفتاح الذي يجب إرساله عند تحميل ملف
extedattr:
الحقل: عند حفظ النموذج ، تم إرسال اسم المفتاح: اختياري [Single | Moutiple | NULL] إذا كان عازبًا ، فهذا يعني أن الصورة التي تم تحميلها ستحل محل الصورة الموجودة ، وإلا سيتم إلحاقها بالصورة الحالية.
عنوان URL: عنوان URL المقدم عن طريق تحميل الصورة ، يمكنك أيضًا تعديل القيمة الافتراضية في Global.fn.inituploadimage في ملف Global.js
ملاحظة: تنسيق JSON الذي تم إرجاعه افتراضيًا هو: {النتيجة: 200 ، imgurl: '......'} ، النتيجة: 200 يعني أن تحميل الصورة ناجح!
تشغيل لقطة الشاشة:
ما سبق هو الوصف الكامل لدعم سلسلة BootStrap Smart Form (9) تحميل الصورة الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!