1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
دعونا نتحدث الآن عن مكون إضافي مفيد جدا في Bootstrap يسمى انهيار.

3
00:00:09,590 --> 00:00:14,110
لقد رأينا تطبيقه في شريط التنقل في وقت سابق.

4
00:00:14,110 --> 00:00:19,050
سنعيد النظر في هذا الرمز ونلقي نظرة سريعة عليه بمزيد من التفصيل.

5
00:00:19,050 --> 00:00:21,910
ويسمى عنصر ذات الصلة كما الأكورديون.

6
00:00:21,910 --> 00:00:26,310
الأكورديون يجعل من استخدام البرنامج المساعد انهيار لعملها.

7
00:00:26,310 --> 00:00:30,100
وسوف نرى ذلك بالتفصيل في التمرين الذي يلي.

8
00:00:31,740 --> 00:00:36,570
يوفر البرنامج المساعد طي وسيلة سهلة للكشف عن

9
00:00:36,570 --> 00:00:38,487
وإخفاء المحتوى على صفحة الويب الخاصة بك.

10
00:00:40,030 --> 00:00:45,307
عادة ما يتم تشغيل هذا الكشف عن المحتوى وإخفائه

11
00:00:45,307 --> 00:00:50,186
من قبل المستخدم بالنقر على زر أو رابط في صفحة الويب الخاصة بك.

12
00:00:50,186 --> 00:00:55,001
الآن سترى العديد من الأماكن حيث

13
00:00:55,001 --> 00:01:00,006
يتم الاستفادة من نوع انهيار السلوك بشكل جيد جدا لعرض المحتوى.

14
00:01:00,006 --> 00:01:04,760
سنقوم بإعادة النظر في شريط التنقل لدينا للنظر في البرنامج المساعد طي في العمل،

15
00:01:04,760 --> 00:01:07,590
وبعد ذلك سوف نرى أيضا مثال الأكورديون المقبل.

16
00:01:08,630 --> 00:01:14,381
بالعودة إلى صفحة الويب الخاصة بنا، ستتذكر أنه عندما أنشأنا شريط التنقل

17
00:01:14,381 --> 00:01:19,948
في صفحة الويب الخاصة بنا للشاشات الصغيرة جدًا، تم انهار شريط التنقل

18
00:01:19,948 --> 00:01:24,346
ثم تم الكشف عنه عندما ننقر على الزر هنا.

19
00:01:24,346 --> 00:01:29,670
الآن هذا هو مثال على استخدام البرنامج المساعد طي هنا.

20
00:01:29,670 --> 00:01:34,890
عندما ننظر إلى التعليمات البرمجية، سنرى أننا بالفعل تطبيق البرنامج المساعد طي إلى

21
00:01:34,890 --> 00:01:38,440
ديف الذي يحتوي على شريط التنقل هذا.

22
00:01:39,530 --> 00:01:41,534
إلقاء نظرة على رمز

23
00:01:41,534 --> 00:01:46,320
شريط التنقل لدينا الذي قمنا بتصميمه في وقت سابق، رأيت أنه هنا

24
00:01:46,320 --> 00:01:51,012
، داخل الحاوية، أنشأنا هذا الزر الذي يتم عرضه

25
00:01:51,012 --> 00:01:56,850
لأحجام الشاشة الصغيرة جدا باستخدام فئة نافبار تبديل.

26
00:01:56,850 --> 00:01:59,440
انظر إلى div الذي يتبع هذا الزر هنا.

27
00:01:59,440 --> 00:02:02,600
بالنسبة إلى div الذي يتبع هذا الزر، استخدمنا فئة الانهيار.

28
00:02:02,600 --> 00:02:06,495
لذلك هذا هو استخدام البرنامج المساعد طي في نافبار لدينا.

29
00:02:06,495 --> 00:02:10,627
لذلك ما يخلق هذا هو أن هذا المحتوى معين،

30
00:02:10,627 --> 00:02:15,095
لدينا نافبار التي هي محاطة داخل هذا ديف، سيتم انهار

31
00:02:15,095 --> 00:02:17,065
لأحجام الشاشة الصغيرة جدا.

32
00:02:17,065 --> 00:02:22,080
ثم جنبا إلى جنب مع البرنامج المساعد طي، وهذا الزر الذي يظهر

33
00:02:22,080 --> 00:02:26,589
هناك سيؤدي إلى إظهار وإخفاء هذا نافبار هنا.

34
00:02:26,589 --> 00:02:32,582
هذا هو السبب عندما تنظر إلى الزر، سترى أن هناك حق،

35
00:02:32,582 --> 00:02:38,171
ونحن توريد سمة تبديل البيانات مع انهيار في هنا،

36
00:02:38,171 --> 00:02:42,350
ثم الهدف البيانات كما #Navbar هنا.

37
00:02:42,350 --> 00:02:47,960
ولاحظ أن معرف هذا div الذي قمنا بتطبيقه هنا هو Navbar.

38
00:02:47,960 --> 00:02:53,030
لذلك نحن نحدد بشكل أساسي أن هذا الزر سيكون بمثابة

39
00:02:53,030 --> 00:02:59,460
آلية تشغيل لهذا البرنامج المساعد طي للعمل على هذا div هنا.

40
00:02:59,460 --> 00:03:03,387
لذلك هذا هو استخدام البرنامج المساعد طي في صفحة الويب الخاصة بك.

41
00:03:04,590 --> 00:03:10,840
أيضا، سننظر إلى المكون الآخر، وهو الأكورديون في Bootstrap.

42
00:03:10,840 --> 00:03:12,410
كيف يتصرف الأكورديون؟

43
00:03:12,410 --> 00:03:16,110
لذلك هذا مثال على الأكورديون الذي سنقوم ببنائه في التمرين

44
00:03:16,110 --> 00:03:16,928
التالي.

45
00:03:16,928 --> 00:03:21,520
حتى هنا، سترى أنني قد استبدلت الملاحة المبوبة التي

46
00:03:21,520 --> 00:03:25,846
فعلناها في التمرين السابق باستخدام الأكورديون هنا.

47
00:03:25,846 --> 00:03:30,480
الطريقة التي يعمل بها الأكورديون هي أن يتم الكشف عن جزء واحد من المحتوى

48
00:03:30,480 --> 00:03:32,020
والثلاثة المتبقية مخفية.

49
00:03:32,020 --> 00:03:35,640
لذلك يستخدم هذا البرنامج المساعد طي لهذا الغرض.

50
00:03:35,640 --> 00:03:41,920
لذلك عندما تنقر على أي اسم من هؤلاء القادة الآخرين،

51
00:03:41,920 --> 00:03:45,490
ثم يتم الكشف عن تفاصيل ذلك زعيم الشركة

52
00:03:45,490 --> 00:03:47,280
وسيتم إخفاء الثلاثة المتبقية.

53
00:03:47,280 --> 00:03:50,270
إذن هذا هو سلوك الأكورديون هنا

54
00:03:50,270 --> 00:03:52,700
إذا كنت معتادا على الأكورديون،

55
00:03:52,700 --> 00:03:57,000
الآلات الموسيقية، فأنت تعرف كيف يعمل منفاخ الأكورديون.

56
00:03:57,000 --> 00:04:02,530
إذا هذا، بمعنى ما، يتصرف مثل منفاخ الأكورديون.

57
00:04:02,530 --> 00:04:08,996
لذلك هذا هو السبب في أن هذا المكون يشار إليه باسم الأكورديون في Bootstrap.

58
00:04:08,996 --> 00:04:17,280
مثال آخر على البرنامج المساعد طي قيد الاستخدام هو على موقع الدورة الخاصة بك.

59
00:04:17,280 --> 00:04:19,350
لذلك إذا ذهبت إلى موقع الدورة التدريبية الخاص بك،

60
00:04:19,350 --> 00:04:23,360
ثم ذهبت إلى محتوى موقع الدورة الخاص بك

61
00:04:23,360 --> 00:04:28,730
والبدء في عرض المحتوى هنا، ستلاحظ أنه على الجانب الأيسر،

62
00:04:28,730 --> 00:04:32,940
لديك الملاحة التي تأتي في الصورة على الجانب الأيسر.

63
00:04:32,940 --> 00:04:35,390
لذلك هذا هو الملاحة هناك.

64
00:04:35,390 --> 00:04:40,510
لذلك عند النقر على كل واحد منهم، تلاحظ كيف

65
00:04:40,510 --> 00:04:45,980
يتم إخفاء المحتوى هنا والكشف عن طريق النقر على كل من هذه الروابط هناك.

66
00:04:45,980 --> 00:04:51,246
لذلك هذا هو مثل البرنامج المساعد الانهيار الذي رأيناه في Bootstrap.

67
00:04:51,246 --> 00:04:57,780
على الرغم من أن صفحة Coursera لا تستخدم في الواقع Bootstrap.

68
00:04:57,780 --> 00:05:02,306
سننتقل إلى التمرين التالي حيث سنرى كيف نبني

69
00:05:02,306 --> 00:05:07,010
الأكورديون لإظهار معلومات قيادتنا المؤسسية.

70
00:05:07,010 --> 00:05:13,120
[ موسيقى]