[MUSIC]
دعونا نحاول الآن فهم عدة آليات لتمكيننا من
عرض المعلومات للمستخدمين الذين يتراكبون محتوى صفحة الويب الخاصة بك.
لذا سنلقي نظرة على ثلاثة بنيات مختلفة متوفرة في Bootstrap
تسمى تلميحات الأدوات و popovers و modals.
إذن ما هي تلميحات الأدوات، popovers و modals وكيف تكون مفيدة؟
سنلقي نظرة على بعض الأفكار الأساسية أولاً، ثم سننظر في بعض الأمثلة.
في التمرين التالي، سنستخدم تلميحات الأدوات
والشروط في صفحة الويب الخاصة بنا، وسننظر إلى مثال على popovers.
لذلك، كما ذكرت، تلميحات الأدوات، popovers، و modals هي وسيلة للكشف عن المحتوى
للمستخدمين، عندما يتفاعل المستخدم مع عناصر معينة على صفحة الويب الخاصة بك.
قل على سبيل المثال عندما
ينقر ماوس المستخدم على زر، أو يمرر فوق زر، أو ينقر على رابط،
أو يصل إلى نقطة معينة على صفحة الويب الخاصة بك.
لذلك كل هذه سوف تؤدي إلى عرض المعلومات للمستخدمين.
لذلك في هذه الحالة،
يتم عرض المعلومات كتراكب أعلى صفحة الويب الخاصة بك.
لذا فإن المحتوى الأساسي لصفحة الويب لا يزال موجودًا، ولكن
يتم وضع هذا أعلى المحتوى الأساسي.
لذلك من حيث المرونة، تلميحات الأدوات هي أبسط لتنفيذ، ولكن
في الوقت نفسه لديها مرونة محدودة في كيفية عرض المعلومات.
Popovers هي أكثر مرونة من تلميحات الأدوات، ولكن لديهم أيضا قيود خاصة بهم.
تعطيك الوسائط الدعم الأكثر شمولا
لعرض المحتوى في مجموعة واسعة من الطرق.
على سبيل المثال، دعونا نذهب إلى صفحة الويب الخاصة بنا التي كنا نعمل عليها.
ترى ذلك عندما نحوم مؤشر الماوس لدينا على هذا الزر.
ترى هذه الرسالة ظهرت على الشاشة هنا،
مع بعض المعلومات الإضافية.
هذا مثال على تلميح الأدوات.
هذا يسمح لك لعرض كميات أصغر من المعلومات للمستخدمين.
على سبيل المثال، إذا كنت تحاول توجيه المستخدمين من خلال موقع الويب الخاص بك
وتريد لهم أن يعرفوا ما يحدث عند النقر فوق مواقع مختلفة أي صفحة ويب،
ربما هذه طريقة جيدة لتذكيرهم بما هو متوقع.
لذلك يمكنك بسهولة تصميم على سبيل المثال،
تجول من موقع الويب الخاص بك باستخدام هذه تلميحات الأدوات للإشارة إلى المستخدمين.
إذا كنت تريد معلومات أكثر تفصيلاً،
فسيكون popovers أكثر فائدة.
في نفس المثال، سيبدو تنفيذ واستخدام popover هكذا.
الآن في هذه الحالة،
سيكون عليك النقر بشكل صريح على الزر لإظهار popover.
لذلك في هذه الحالة، يتم عرض popover مع بعض معلومات العنوان،
ثم المحتوى الفعلي في الجزء السفلي في ذلك popover.
الآن، فإن رفض popover يتطلب منك مرة أخرى النقر على الجزء السفلي هناك.
لذلك هذا هو سلوك popover.
في بعض الظروف، تكون popovers أكثر فائدة من تلميحات الأدوات.
لدينا النوع الثالث من تراكب البيانات هو مشروط.
يسمح لك مشروط بتقديم
معلومات أكثر تفصيلاً للمستخدمين من تلميح الأدوات و popover.
ينقسم محتوى المشروط نفسه إلى رأس وجسم وتذييل الصفحة.
ويمكن أن تحتوي الوسائط نفسها على الكثير من المعلومات التفصيلية.
ويمكنك استخدام شبكة Bootstrap بأكملها،
داخل الجسم المشروط، لتنظيم المحتوى الفعلي.
ونحن ننظر إلى اثنين من الأمثلة على استخدام الوسائط بعد ذلك.
الذهاب إلى صفحة الويب الخاصة بنا، سترى أنه على الجانب الأيمن،
هنا لدينا رابط هنا يسمى تسجيل الدخول.
لذلك عند النقر على هذا الرابط، ستلاحظ أن هذا المشروط
مع نموذج تسجيل الدخول الخاص بهم برزت على الشاشة.
لذلك هذا هو السلوك النموذجي لمشروط.
وهكذا هنا يمكنك كتابة المعلومات،
ثم انقر على زر تسجيل الدخول لتسجيل الدخول إلى موقع الويب الخاص بك.
الذهاب إلى صفحة Coursera الخاصة بك، هنا مثال حقيقي على استخدام مشروط.
على سبيل المثال، إذا قمت بالنقر فوق زر تسجيل الدخول هنا،
يمكنك أن ترى أنه على Coursera، يظهر نموذج على الشاشة.
لذلك هذا هو استخدام آخر من مشروط في صفحة الويب الخاصة بك.
الآن بعد أن رأيت أمثلة من تلميحات الأدوات، popovers، و modals،
دعنا نذهب إلى التمرين التالي، حيث سنقوم بإنشاء تلميح على صفحة index.html الخاصة بنا.
سنقوم أيضا بإنشاء مشروط يسمح للمستخدم بكتابة المعلومات
لتسجيل الدخول إلى صفحة الويب الخاصة بنا.
[ موسيقى]