1
00:00:00,000 --> 00:00:04,432
[MUSIC]

2
00:00:04,432 --> 00:00:09,439
دعونا نحاول الآن فهم عدة آليات لتمكيننا من

3
00:00:09,439 --> 00:00:16,100
عرض المعلومات للمستخدمين الذين يتراكبون محتوى صفحة الويب الخاصة بك.

4
00:00:16,100 --> 00:00:21,040
لذا سنلقي نظرة على ثلاثة بنيات مختلفة متوفرة في Bootstrap

5
00:00:21,040 --> 00:00:24,230
تسمى تلميحات الأدوات و popovers و modals.

6
00:00:25,570 --> 00:00:30,760
إذن ما هي تلميحات الأدوات، popovers و modals وكيف تكون مفيدة؟

7
00:00:30,760 --> 00:00:36,090
سنلقي نظرة على بعض الأفكار الأساسية أولاً، ثم سننظر في بعض الأمثلة.

8
00:00:36,090 --> 00:00:39,844
في التمرين التالي، سنستخدم تلميحات الأدوات

9
00:00:39,844 --> 00:00:45,130
والشروط في صفحة الويب الخاصة بنا، وسننظر إلى مثال على popovers.

10
00:00:45,130 --> 00:00:51,610
لذلك، كما ذكرت، تلميحات الأدوات، popovers، و modals هي وسيلة للكشف عن المحتوى

11
00:00:51,610 --> 00:00:56,090
للمستخدمين، عندما يتفاعل المستخدم مع عناصر معينة على صفحة الويب الخاصة بك.

12
00:00:56,090 --> 00:01:01,280
قل على سبيل المثال عندما

13
00:01:01,280 --> 00:01:06,640
ينقر ماوس المستخدم على زر، أو يمرر فوق زر، أو ينقر على رابط،

14
00:01:06,640 --> 00:01:11,830
أو يصل إلى نقطة معينة على صفحة الويب الخاصة بك.

15
00:01:11,830 --> 00:01:16,170
لذلك كل هذه سوف تؤدي إلى عرض المعلومات للمستخدمين.

16
00:01:16,170 --> 00:01:17,470
لذلك في هذه الحالة،

17
00:01:17,470 --> 00:01:22,970
يتم عرض المعلومات كتراكب أعلى صفحة الويب الخاصة بك.

18
00:01:22,970 --> 00:01:25,700
لذا فإن المحتوى الأساسي لصفحة الويب لا يزال موجودًا، ولكن

19
00:01:25,700 --> 00:01:30,280
يتم وضع هذا أعلى المحتوى الأساسي.

20
00:01:30,280 --> 00:01:35,750
لذلك من حيث المرونة، تلميحات الأدوات هي أبسط لتنفيذ، ولكن

21
00:01:35,750 --> 00:01:40,160
في الوقت نفسه لديها مرونة محدودة في كيفية عرض المعلومات.

22
00:01:40,160 --> 00:01:46,610
Popovers هي أكثر مرونة من تلميحات الأدوات، ولكن لديهم أيضا قيود خاصة بهم.

23
00:01:46,610 --> 00:01:50,110
تعطيك الوسائط الدعم الأكثر شمولا

24
00:01:50,110 --> 00:01:54,980
لعرض المحتوى في مجموعة واسعة من الطرق.

25
00:01:56,250 --> 00:02:02,600
على سبيل المثال، دعونا نذهب إلى صفحة الويب الخاصة بنا التي كنا نعمل عليها.

26
00:02:02,600 --> 00:02:09,970
ترى ذلك عندما نحوم مؤشر الماوس لدينا على هذا الزر.

27
00:02:09,970 --> 00:02:14,560
ترى هذه الرسالة ظهرت على الشاشة هنا،

28
00:02:14,560 --> 00:02:16,930
مع بعض المعلومات الإضافية.

29
00:02:16,930 --> 00:02:18,975
هذا مثال على تلميح الأدوات.

30
00:02:20,290 --> 00:02:24,210
هذا يسمح لك لعرض كميات أصغر من المعلومات للمستخدمين.

31
00:02:24,210 --> 00:02:29,340
على سبيل المثال، إذا كنت تحاول توجيه المستخدمين من خلال موقع الويب الخاص بك

32
00:02:29,340 --> 00:02:33,740
وتريد لهم أن يعرفوا ما يحدث عند النقر فوق مواقع مختلفة أي صفحة ويب،

33
00:02:33,740 --> 00:02:38,240
ربما هذه طريقة جيدة لتذكيرهم بما هو متوقع.

34
00:02:38,240 --> 00:02:40,870
لذلك يمكنك بسهولة تصميم على سبيل المثال،

35
00:02:40,870 --> 00:02:46,250
تجول من موقع الويب الخاص بك باستخدام هذه تلميحات الأدوات للإشارة إلى المستخدمين.

36
00:02:46,250 --> 00:02:49,130
إذا كنت تريد معلومات أكثر تفصيلاً،

37
00:02:49,130 --> 00:02:51,300
فسيكون popovers أكثر فائدة.

38
00:02:52,305 --> 00:02:56,920
في نفس المثال، سيبدو تنفيذ واستخدام popover هكذا.

39
00:02:56,920 --> 00:02:58,040
الآن في هذه الحالة،

40
00:02:58,040 --> 00:03:02,040
سيكون عليك النقر بشكل صريح على الزر لإظهار popover.

41
00:03:02,040 --> 00:03:06,670
لذلك في هذه الحالة، يتم عرض popover مع بعض معلومات العنوان،

42
00:03:06,670 --> 00:03:12,210
ثم المحتوى الفعلي في الجزء السفلي في ذلك popover.

43
00:03:12,210 --> 00:03:17,200
الآن، فإن رفض popover يتطلب منك مرة أخرى النقر على الجزء السفلي هناك.

44
00:03:17,200 --> 00:03:19,640
لذلك هذا هو سلوك popover.

45
00:03:19,640 --> 00:03:26,420
في بعض الظروف، تكون popovers أكثر فائدة من تلميحات الأدوات.

46
00:03:26,420 --> 00:03:29,990
لدينا النوع الثالث من تراكب البيانات هو مشروط.

47
00:03:29,990 --> 00:03:33,140
يسمح لك مشروط بتقديم

48
00:03:33,140 --> 00:03:37,410
معلومات أكثر تفصيلاً للمستخدمين من تلميح الأدوات و popover.

49
00:03:37,410 --> 00:03:44,060
ينقسم محتوى المشروط نفسه إلى رأس وجسم وتذييل الصفحة.

50
00:03:44,060 --> 00:03:49,700
ويمكن أن تحتوي الوسائط نفسها على الكثير من المعلومات التفصيلية.

51
00:03:49,700 --> 00:03:52,740
ويمكنك استخدام شبكة Bootstrap بأكملها،

52
00:03:52,740 --> 00:03:57,630
داخل الجسم المشروط، لتنظيم المحتوى الفعلي.

53
00:03:57,630 --> 00:04:02,860
ونحن ننظر إلى اثنين من الأمثلة على استخدام الوسائط بعد ذلك.

54
00:04:02,860 --> 00:04:06,220
الذهاب إلى صفحة الويب الخاصة بنا، سترى أنه على الجانب الأيمن،

55
00:04:06,220 --> 00:04:09,400
هنا لدينا رابط هنا يسمى تسجيل الدخول.

56
00:04:09,400 --> 00:04:13,890
لذلك عند النقر على هذا الرابط، ستلاحظ أن هذا المشروط

57
00:04:13,890 --> 00:04:17,600
مع نموذج تسجيل الدخول الخاص بهم برزت على الشاشة.

58
00:04:17,600 --> 00:04:21,060
لذلك هذا هو السلوك النموذجي لمشروط.

59
00:04:21,060 --> 00:04:23,420
وهكذا هنا يمكنك كتابة المعلومات،

60
00:04:23,420 --> 00:04:28,070
ثم انقر على زر تسجيل الدخول لتسجيل الدخول إلى موقع الويب الخاص بك.

61
00:04:29,190 --> 00:04:34,890
الذهاب إلى صفحة Coursera الخاصة بك، هنا مثال حقيقي على استخدام مشروط.

62
00:04:34,890 --> 00:04:38,430
على سبيل المثال، إذا قمت بالنقر فوق زر تسجيل الدخول هنا،

63
00:04:38,430 --> 00:04:43,190
يمكنك أن ترى أنه على Coursera، يظهر نموذج على الشاشة.

64
00:04:43,190 --> 00:04:47,720
لذلك هذا هو استخدام آخر من مشروط في صفحة الويب الخاصة بك.

65
00:04:49,060 --> 00:04:53,252
الآن بعد أن رأيت أمثلة من تلميحات الأدوات، popovers، و modals،

66
00:04:53,252 --> 00:04:58,522
دعنا نذهب إلى التمرين التالي، حيث سنقوم بإنشاء تلميح على صفحة index.html الخاصة بنا.

67
00:04:58,522 --> 00:05:04,379
سنقوم أيضا بإنشاء مشروط يسمح للمستخدم بكتابة المعلومات

68
00:05:04,379 --> 00:05:06,787
لتسجيل الدخول إلى صفحة الويب الخاصة بنا.

69
00:05:06,787 --> 00:05:10,269
[ موسيقى]