Bootstrap Modal Window: الغرض والاستخدام

جدول المحتويات:

Bootstrap Modal Window: الغرض والاستخدام
Bootstrap Modal Window: الغرض والاستخدام
Anonim

ما هو مشروط Bootstrap وما الغرض منه؟ ما هي مكوناته وميزاته ومزاياه وعيوبه؟ يتم استخدام مفهوم "النافذة المشروطة" في الواجهة الرسومية. غالبًا بمساعدتها يمكنك لفت الانتباه إلى بعض الأحداث المهمة. تُستخدم النوافذ المشروطة لإدخال بعض المعلومات والبيانات وتغيير الإعدادات. يحظرون سير عمل المستخدم حتى اكتمال المشكلة أو الإجراء. يستخدم Windows أيضًا لتطوير صفحات الويب.

نافذة مشروط التمهيد
نافذة مشروط التمهيد

ما هذا

تصميم سهل التخصيص وسريع الاستجابة ، هذا ما يقدمه Bootstrap اليوم. تساعد النافذة المشروطة ، وهي نموذج يمكن استخدامه لإنشاء مواقع ويب ، على عرض الصور ومقاطع الفيديو والعناصر الأخرى. تتكون النافذة المنبثقة من الأجزاء المميزة للتنزيل: العنوان والنص الأساسي وتذييل. كل عنصر من هذه العناصر له معناه الخاص. الغرض الرئيسي من نافذة Bootstrap المشروطة هو أن يستخدمها المصممون المبتدئون لإنشاء صفحات ويب دون كتابة أكواد إضافية. النافذة المشروطة هي نوع من الحاوية التي يتم فيها عرض المحتوى المكتوب. المكون النموذجي يحل مجموعة واسعة من الأهداف.

إغلاق مشروط التمهيد
إغلاق مشروط التمهيد

كيف نفعل

يتم إنشاء النافذة المشروطة والتحكم فيها باستخدام أساليب JavaScript والبيانات و css. تحتاج أولاً إلى عمل ترميز. يتكون من إطار ورأس ومحتوى رئيسي وتذييل. العناصر الإلزامية هنا هي الطابق السفلي (الكتلة) والإطار. بعد الترميز ، تحتاج إلى الانتقال إلى تنفيذ استدعاء النافذة المشروطة. غالبًا ما يتم استدعاؤه بعد تحميل صفحة الويب والضغط على الزر المقابل. يتم إجراء المكالمة باستخدام البيانات وجافا سكريبت. إغلاق مشروط Bootstrap يغلق المهام التي تم إنشاؤها وحفظها مسبقًا.

ضع في اعتبارك أن النافذة المشروطة لها خصائصها الخاصة. لفتح عدة نوافذ مشروطة ، تحتاج إلى كتابة رمز إضافي. من الأفضل وضع كود html في أعلى المستند ، بعد علامة النص الأساسي. يساعد هذا في الحفاظ على وظيفة النافذة ومظهرها. على الأجهزة المحمولة ، توجد محاذير تتعلق باستخدام مكون النافذة المشروطة. يحدون من استخدامه الكامل. يسمح Bootstrap 3 بأحجام النوافذ المخصصة بالإضافة إلى الشبكات.

التمهيد 3 نافذة مشروطة
التمهيد 3 نافذة مشروطة

المكونات

من قبللبدء العمل مع Bootstrap ، عليك معرفة مكوناته. يشتمل البرنامج على مجموعة من الأدوات الجاهزة التي تستخدم في إنشاء مواقع الويب. تعمل أنماط JavaScript و CSS و HTML الجاهزة على إنشاء شبكة قابلة للتكيف وأزرار عرض وقوائم وأيقونات وتلميحات أدوات والمزيد. أنماط البرامج الأساسية مطلوبة للتخطيط. يتيح لك وجود أنماط للطباعة والنص إعداد المتصفح لطباعة الصفحة وعمل تصميم لمحتوى نص الموقع. باستخدام مكونات Bootstrap ، يمكنك إنشاء نماذج وأزرار وعناصر أخرى. يحتوي البرنامج على مجموعة كاملة من الأدوات التي تشكل الصفحات بسرعة وسهولة للأجهزة المحمولة. يتكون Bootstrap من العديد من التفاصيل الأخرى بالإضافة إلى JavaScript. إنها سهلة بما يكفي لإتقانها حتى بالنسبة للمبتدئين. من الناحية النظرية ، فإن فهم أساسيات برنامج Bootstrap ليس بالأمر السهل. من الناحية العملية ، يبسط هذا التطوير عمل المصمم ومصمم التخطيط نظرًا لوجود العديد من المكونات الجاهزة.

تمهيد نموذج مشروط
تمهيد نموذج مشروط

الميزات

مشروط Bootstrap له بعض المزايا الخاصة. بفضل مساعدتها ، يتم تطوير تخطيطات الصفحات لمواقع الويب بسرعة عالية. تحتوي النافذة على مجموعة كبيرة من العناصر والحلول الجاهزة. يجعل Bootstrap موقع الويب الخاص بك أكثر استجابة. إطار العمل (البرنامج) مناسب لجميع المتصفحات ويتم عرضه بشكل صحيح فيها. هذه النافذة المشروطة سهلة الاستخدام. يسمح لك Bootstrap بإنشاء صفحات ويب حتى للمبتدئين الذين لديهم معرفة أساسية بـ CSS و HTML.

خصوصية النافذة المشروطة هي أنالتي يمكن للمستخدمين التكيف معها بسهولة. الكثير من أمثلة التعليمات البرمجية الجاهزة والوثائق الرائعة تجعل من السهل الحصول على السرعة مع Bootstrap. حول جودته يمكن أن يكون جوهر مجموعة كبيرة من الموضوعات للتصميم. تم تطوير Wordpress و CMS و Joomla باستخدام هذه النافذة المشروطة. Bootstrap هو إطار عمل ويب يحتوي على المكونات الضرورية ويتم تزويده بخط الرمز الخاص به. يتضمن أكثر من مائتي أيقونة ، بما في ذلك الرموز الأساسية.

سلبيات

مشروط Bootstrap له عيوبه.

  • المواقع التي تستخدمها تفقد أسلوبها الفردي. لم تعد فريدة من نوعها ، لأنها متشابهة في المظهر والبنية مع بعضها البعض.
  • الافتقار إلى المرونة ؛ يتطلب غالبًا إنشاء أنماط خاصة بك والقيام بعمل إضافي.
  • يمكن أن يؤدي تغيير الكود المحمل إلى ساعات من العمل.
  • غالبًا ما يسيء المستخدمون استخدام مكونات Bootstrap.

استخدم هذه الأداة أيضًا لتطوير الواجهة الأمامية. على الرغم من أوجه القصور التي ستكون واضحة لمستخدمي إطار العمل ، فإن التخطيط باستخدام Bootstrap يعد حلاً رائعًا لمطوري الويب. يسمح لك بإنشاء واجهة بسيطة وبديهية في فترة زمنية قصيرة وبدون بذل الكثير من الجهد.

تمهيد فتح نافذة مشروطة
تمهيد فتح نافذة مشروطة

تصميم مستجيب

أحد أكثر الأطر شيوعًا التي تسمح للمصمم بإنشاء مواقع ويب وتطبيقات عالية الجودة دون إضاعة الوقت والجهد في ذلك هو Bootstrap 3. توفر النافذة المشروطة للمستخدم مجموعة أساسية من الأدوات مجانًا.باستخدامه ، يمكنك استخدام JavaScript و CSS و html. تم إنشاء هذا البرنامج بواسطة Twitter وله عدد من الميزات والفوائد. تم إنشاء إطار العمل للأجهزة المحمولة ، لذلك تم تصميم شبكته للشاشات الصغيرة. اليوم ، يتم استخدام Bootstrap 3 أيضًا للأجهزة ذات الشاشات العريضة. لا يوجد سوى نظام شبكة واحد متجاوب في البرنامج ، والذي تم تمديده من قبل الشركات المصنعة.

يأتي الإطار مع الخطوط. يتم استخدامها كرموز. في هذا البرنامج ، يتعامل المصممون بالفعل مع الخطوط المتجهة والصور ، والتي يمكن تغييرها حسب الرغبة. تكمن خصوصية Bootstrap 3 في أنه لا يدعم المتصفحات القديمة. مفهوم التصميم سريع الاستجابة بسيط: يتكيف الموقع تلقائيًا مع حجم الشاشة ، بغض النظر عن الجهاز الذي وصل منه المستخدم. يتطلب التصميم سريع الاستجابة معرفة ومهارات متخصصة.

العمل مع Bootstrap

قبل أن تبدأ في استكشاف Bootstrap ، قم بتنزيله مجانًا. بعد التنزيل والتفريغ اللاحق ، سيتلقى المستخدم ثلاثة مجلدات تحتوي على أنماط ونصوص وخطوط أيقونات. كل هذا هو Bootstrap. يمكنك فتح نافذة مشروطة بعد إنشاء مجلد باسم إطار العمل. في ذلك ، تحتاج إلى إنشاء ملف فارغ "ndex.html". في البرنامج الذي تم تنزيله ، حدد مجلد "الخطوط" بالكامل ونمط "bookstrap.css" من المجلد المناسب. لا تنس البرنامج النصي "bootstrap.js" أيضًا. أنشئ مجلدًا مشابهًا باسم "css" في المجلد الحالي ، ضع "bootstrap.min.css" فيه.أنشئ ملف "css" آخر بملف "style.css" فارغ. سوف تحتاجه لإضافة الأنماط الخاصة بك.

عندما يتم إنشاء كل ما هو مطلوب ، سيتم عمل المزيد فقط مع "ndex.html". إذا كنت لا ترغب في كتابة الرموز يدويًا ، فارجع إلى هيكل مستند html الجاهز. انسخ الكود والصقه في الملف. سيتم ربط الأنماط والمكتبة والنصوص في الهيكل العظمي الذي تم إنشاؤه. قبل وسم النص الأساسي ، لا تنس تضمين مكتبة "jQuery" ، وبعدها - النص البرمجي "js".

مشروط تمهيد متعددة
مشروط تمهيد متعددة

الشبكة

يتم استخدام نافذة Bootstrap المشروطة لإنشاء تخطيط موقع كلاسيكي. وهو يتألف من رأس ونص وعمود جانبي وتذييل. لكي يتم عرض كل شيء بشكل صحيح ، من الضروري حساب عرض كل عنصر كنسبة مئوية مع التفاف فردي. يجب أن يكون عرض تذييل ورأس الموقع 100٪ ، ويمكن أن يكون النص الأساسي والأعمدة الجانبية أصغر.

شبكة Bootstrap مطلوبة فقط لتعيين العرض المطلوب للكتل. يتم عمل الشبكة بمساعدة جدول يحتوي على أعمدة وصفوف. يمكن إنشاء شبكة داخل شبكة أخرى بعدد غير محدود من المرات. إذا تم إنشاء أجزاء من الموقع باستخدامه ، فلا داعي لكتابة استعلامات تكيفية بنفسك. بالإضافة إلى الشبكة ، تحتوي النافذة المشروطة على العديد من المكونات الإضافية (قوائم ، جداول ، علامات تبويب ، تلميحات أدوات).

مشروط التمهيد لا يعمل
مشروط التمهيد لا يعمل

أخطاء

في بعض الأحيان ، يمكن أن تتسبب عدة وسائط Bootstrap المفتوحة في نفس الوقت في حدوث خطأ. هذا ممكن إذا كان Windows غير قادر علىتحميل ملف html بشكل صحيح. يشير وجود خطأ إلى أن الملف مصاب ببرامج ضارة أو فيروس. غالبًا ما تحدث أخطاء Bootstrap أثناء تحميل البرامج أو الكمبيوتر أو بعد تنفيذ بعض الإجراءات. أكثرها شيوعًا هي تلك المرتبطة بالنافذة المشروطة: "خطأ في الملف" ، "ملف مفقود" ، "غير موجود" ، "تعذر التحميل" ، "فشل التسجيل" ، "خطأ في التنفيذ والتحميل". يمكن أن تظهر عندما يقوم المستخدم بتثبيت برنامج أو أنه قيد التشغيل بالفعل ، أو عند تشغيل الكمبيوتر وإيقاف تشغيله. من المهم أن تراقب عن كثب ظهور الأخطاء ، حيث يساعد ذلك على التخلص بشكل صحيح من سبب حدوثها في Bootstrap. لا تعمل النافذة المشروطة أحيانًا بسبب مكالمة خاطئة لا تعتمد على أخطاء داخلية.

موصى به: