في العمل اليومي ، تعد وظيفة تحميل الملف والتنزيل جزءًا لا غنى عنه. يتم استخدام أطر عمل الأسلوب الأمامية Bootstrap أيضًا في كثير من الأحيان. الآن ، استنادًا إلى قوالب النمط القوية لـ Bootstrap ، قم بتخصيص نمط لتنزيل الملفات.
في المستقبل ، سوف نستخدم إطار عمل الربيع MVC لتنفيذ جميع التعليمات البرمجية التي تم تحميلها بواسطة الملف ، لذلك ترقبوا.
دعنا نلقي نظرة على مثال الصورة أولاً: يتضمن هذا المثال تنزيل أنماط الملفات وأنماط تحميل الملفات.
فقط قم بتحميل الكود أولاً ، وشرح أخيرًا:
<div id = "file"> <label for = ""> حدد ملف: </label> <iv> <input id = "lefile" type = "file" style = "display: none"> <span onClick = "$ ('input [id = lefile]). click () ؛" style = "cursor: pointer ؛ background-color: #e7e7e7"> <i> </i> تصفح </span> <input id = "photoCover" type = "text"> <span style = "cursor: pointer ؛ pointer-events: auto ؛"> </div> </div>التقنيات الرئيسية المعنية هي: bootstrap ؛ مؤشر أحداث CSS3 ؛ HTML5
1. نمط تحميل الملف الأساسي لـ HTML5
<type type = "file" name = "file">
سيعرض النمط تأثيرات مختلفة وفقًا لمتصفحات مختلفة.
2. أيقونات الخط
يمكنك استخدام أيقونة الخط الغليفيكونز المدمجة في bootstrap ، أو الرموز الخطية الرائعة. للحصول على دروس تعليمية محددة ، يرجى الرجوع إلى الموقع الرسمي:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
الخط رائع: http://fontawesome.io/
في هذا المثال ، يتم استخدام اثنين من الرموز ، <i> <i>
أو <i> <i>
3. CSS3: أحداث المؤشر
في bootstrap ، يتم تعيين أحداث مؤشر.
القواعد:
أحداث المؤشر: Auto | لا شيء | مرئيات | Visiberfill | VisiBlestroke | مرئي | رسمت | ملء | السكتة الدماغية | الجميع
القيمة الافتراضية: Auto
ينطبق على: جميع العناصر
الميراث: نعم
الرسوم المتحركة: لا
حساب القيمة: حدد القيمة
قيمة:
Auto: لم يتم تحديد نفس الأداء الذي تم تحديده في الأداء المؤشر. نفس قيمة المرئيات على محتوى SVG
لا شيء: لن يصبح العنصر هدفًا لأحداث الماوس . ومع ذلك ، عندما تحدد خاصية مؤشرات المؤشر لعنصر سليلها القيم الأخرى ، يمكن أن يشير حدث الماوس إلى عنصر سليل ، وفي هذه الحالة سيؤدي حدث الماوس إلى قيام مستمع حدث العنصر الأصل بترتيب التقاط أو الفقاعات.
لا يمكن تطبيق القيم الأخرى إلا على SVG.
4. الزر لتحميل ملف ------- استخدام مربع التحرير والسرد bootstrap
استخدام. في مجموعة.
لتقديم CSS محدد ، تحقق من رمز مصدر bootstrap بنفسك.
5. تنفيذ زر تنزيل نموذج --- الرجوع إلى نمط موجه خطأ في نموذج Bootstrap
استخدام .has-feedback و .form-control-feedback
إذا لم تكن قد تعلمت ما يكفي ، فيمكنك النقر هنا للتعلم ثم إرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع تعلم برمجة bootstrap.