1
00:00:03,460 --> 00:00:11,430
الأكورديون هي واحدة من تلك الأدوات المزعجة التي قد يكون البعض منكم قد شاهدها بالفعل.

2
00:00:11,430 --> 00:00:16,020
لديها واحدة من تلك المنفاخ مع لوحة المفاتيح أسفل

3
00:00:16,020 --> 00:00:20,940
هنا وبعد ذلك كنت ضربة ثم تشغيل الموسيقى مع المفاتيح هناك.

4
00:00:20,940 --> 00:00:23,645
وليس الجميع يستمتع بها.

5
00:00:23,645 --> 00:00:28,740
أنا متأكد جداً ولكن لا إهانة للاعبين الأكورديون.

6
00:00:28,740 --> 00:00:34,650
الأكورديون في بوتستراب مثيرة جدا للاهتمام بالتأكيد.

7
00:00:34,650 --> 00:00:39,380
سننظر في كيفية تطبيق الأكورديون لتكون قادرة على الكشف عن

8
00:00:39,380 --> 00:00:44,580
وإخفاء المحتوى في صفحة الويب الخاصة بنا في هذا التمرين.

9
00:00:44,580 --> 00:00:51,300
العودة إلى معلومات عنا في صفحة HTML حيث كان لدينا معلومات القيادة المؤسسية.

10
00:00:51,300 --> 00:00:56,960
الآن، أنا ذاهب لاستبدال الملاحة العليا مع الملاحة على أساس الأكورديون.

11
00:00:56,960 --> 00:01:03,175
سأقوم بإزالة هذا UL الذي يحدد مصطلح التنقل تمامًا.

12
00:01:03,175 --> 00:01:08,320
ثم سنقوم بتصميم الأكورديون حول المحتوى الذي لدينا بالفعل.

13
00:01:08,320 --> 00:01:13,700
لذلك، دعونا حذف هذا UL الذي يحتوي على علامة التبويب التنقل بحيث يتم تركها

14
00:01:13,700 --> 00:01:20,160
مع هذا الجزء فقط الذي يتم تضمينه داخل اللوحة العلوية والمحتوى العلوي.

15
00:01:20,160 --> 00:01:22,115
لذا، نحن ذاهبون إلى الذهاب وتعديل هذا.

16
00:01:22,115 --> 00:01:23,740
الذهاب إلى هذا ديف هنا،

17
00:01:23,740 --> 00:01:33,225
وأنا ذاهب لإزالة هذه الفئة من هناك ومن ثم تطبيق معرف كما الأكورديون.

18
00:01:33,225 --> 00:01:40,060
نحن بحاجة إلى هذا المعرف لاحقًا لتكون قادرة على إنشاء الأكورديون التي div،

19
00:01:40,060 --> 00:01:43,175
التي تحتوي على هذا المحتوى لا تزال موجودة هناك.

20
00:01:43,175 --> 00:01:46,545
لذلك، يتم تغيير المحتوى العلوي الآن إلى الأكورديون.

21
00:01:46,545 --> 00:01:49,745
الآن، كل من هذا المحتوى هنا،

22
00:01:49,745 --> 00:01:53,460
سنقوم بتحويل ذلك إلى

23
00:01:53,460 --> 00:01:59,080
بنية قائمة على البطاقة هناك حتى يتمكنوا من الكشف عن المحتوى في

24
00:01:59,080 --> 00:02:02,360
كل من تلك البطاقات حتى تراني أستخدم البطاقة

25
00:02:02,360 --> 00:02:09,220
وفصول جسم البطاقة هناك لإرفق هذا المحتوى.

26
00:02:09,220 --> 00:02:12,595
الآن، الذهاب إلى المحتوى الفعلي هنا،

27
00:02:12,595 --> 00:02:16,905
سأبدأ في تطبيق فئة البطاقة هنا مع div هناك.

28
00:02:16,905 --> 00:02:21,900
لذا، سنقول، «بطاقة فئة div»

29
00:02:21,900 --> 00:02:29,890
ثم أغلق div هناك ثم ينتقل هذا المحتوى إلى div هناك.

30
00:02:29,890 --> 00:02:34,110
الآن، هنا، نحن ذاهبون للذهاب في

31
00:02:34,110 --> 00:02:41,610
وإنشاء ديف مع فئة «رأس بطاقة».

32
00:02:42,030 --> 00:02:45,280
أنا ذاهب إلى تظهر لكم لواحد منهم وبعد ذلك نحن ذاهبون إلى

33
00:02:45,280 --> 00:02:48,425
تكرار هذه العملية للثلاثة المتبقية أيضا.

34
00:02:48,425 --> 00:02:57,480
لذلك، سوف نقول، «بطاقة رأس لفة التبويب» ثم «معرف بيترهيد».

35
00:02:57,480 --> 00:03:04,335
أنا ذاهب لاتخاذ هذا H3 من أسفل هنا،

36
00:03:04,335 --> 00:03:10,265
وقطع بها ومن ثم لصقه في لوحة بطاقة.

37
00:03:10,265 --> 00:03:14,815
لذلك،

38
00:03:14,815 --> 00:03:18,945
يتم قطع هذا h3 الذي يحدد اسم الشخص قيادة الشركات

39
00:03:18,945 --> 00:03:24,310
من داخل لوحة التبويب ثم انتقل إلى رأس البطاقة هنا.

40
00:03:24,310 --> 00:03:29,060
هذا سيكون بمثابة مساعدة الملاحة بلدي.

41
00:03:29,060 --> 00:03:35,425
الآن، إلى هذا H3، سأقوم بتطبيق فئة تسمى mb-0.

42
00:03:35,425 --> 00:03:37,920
لذا، هذا هو mb-0 هنا.

43
00:03:37,920 --> 00:03:41,260
الآن، هذا الاسم نفسه،

44
00:03:41,260 --> 00:03:44,840
سأرفق هذا في الداخل و a،

45
00:03:44,840 --> 00:03:49,300
لذلك سأذهب إلى السطر التالي ثم أقول،

46
00:03:49,300 --> 00:03:56,650
«تبديل البيانات»

47
00:03:56,650 --> 00:04:00,845
وسيقول تبديل البيانات، «انهيار».

48
00:04:00,845 --> 00:04:06,025
لذلك، الآن، ترى أنك تستخدم البرنامج المساعد الانهيار.

49
00:04:06,025 --> 00:04:09,440
لذا، لدينا هذا الإغلاق H3 هناك.

50
00:04:09,440 --> 00:04:12,630
لذا، سأقوم بتحويله إلى السطر التالي

51
00:04:12,630 --> 00:04:17,400
هنا ثم سأقوم بإغلاق العلامة هناك.

52
00:04:17,400 --> 00:04:25,265
لذلك، مع هذا العلامة الآن يرفق اسم الرئيس التنفيذي هنا.

53
00:04:25,265 --> 00:04:31,285
ثم تغلق العلامة h3 بالطبع h3 في الأعلى ثم هذا

54
00:04:31,285 --> 00:04:37,525
داخل div وهو رأس بطاقة الفئة.

55
00:04:37,525 --> 00:04:43,950
لذلك، وهذا يشكل هيكل رأس لبلدي الأكورديون ديف.

56
00:04:43,950 --> 00:04:46,915
الذهاب الآن إلى لوحة التبويب أدناه،

57
00:04:46,915 --> 00:04:54,050
وأنا ذاهب لتغيير هذه الفئة من علامة التبويب لوحة تتلاشى إلى الانهيار.

58
00:04:54,050 --> 00:05:01,455
لذلك هذا سيكون البرنامج المساعد الانهيار الذي سيكون مفيدا لدينا

59
00:05:01,455 --> 00:05:05,680
الأكورديون وأيضا سوف إزالة هذه الفئة النشطة

60
00:05:05,680 --> 00:05:10,075
لهذا وسيتم ترك معرف كما بيتر لهذا.

61
00:05:10,075 --> 00:05:18,375
وبعد ذلك سوف تقول، «الأم البيانات» وكنت تحديد الأكورديون.

62
00:05:18,375 --> 00:05:24,960
ترى لماذا أعطينا معرف الأكورديون إلى div الذي يرفق كل هذه المحتويات.

63
00:05:24,960 --> 00:05:28,010
لذلك، هذه هي الطريقة لتحديد أن هذا سوف

64
00:05:28,010 --> 00:05:31,720
يشكل جزءا من الأكورديون التي تقوم ببنائها هناك.

65
00:05:31,720 --> 00:05:34,420
لذلك، هذا هو السبب في البيانات الأصل الأكورديون.

66
00:05:34,420 --> 00:05:37,930
الآن، المحتوى داخل لوحة علامة التبويب هذه،

67
00:05:37,930 --> 00:05:42,340
سأقوم بإرفاقه داخل div مع

68
00:05:42,340 --> 00:05:48,460
نص بطاقة الفئة

69
00:05:48,920 --> 00:05:54,125
وإغلاق هذا div هنا،

70
00:05:54,125 --> 00:05:57,790
ثم وضع مسافة بادئة لهذا المحتوى هناك.

71
00:05:57,790 --> 00:06:03,440
دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على صفحة الويب لدينا في هذه اللحظة.

72
00:06:03,440 --> 00:06:08,735
الذهاب إلى صفحة الويب الخاصة بنا تلاحظ الآن أنه في قيادة الشركات،

73
00:06:08,735 --> 00:06:16,550
يتم تمييز اسم الرئيس التنفيذي هنا في رأس البطاقة هنا.

74
00:06:16,550 --> 00:06:19,150
ثم المحتوى هو أسفل هنا.

75
00:06:19,150 --> 00:06:25,830
الآن، سنقوم بإنشاء الثلاثة المتبقية أسفل ثم أرفق كل منهم هناك.

76
00:06:25,830 --> 00:06:30,485
أنا ذاهب لتكرار نفس الهيكل للباقي منها.

77
00:06:30,485 --> 00:06:34,405
لذلك، سيكون لدي البطاقة مع رأس البطاقة،

78
00:06:34,405 --> 00:06:39,075
ورأس البطاقة سوف أرفق اسم الشخص مثل هذا.

79
00:06:39,075 --> 00:06:40,730
لذلك، سوف تتبع

80
00:06:40,730 --> 00:06:45,060
إلى حد كبير نفس الهيكل للأجزاء الثلاث المتبقية من المحتوى.

81
00:06:45,060 --> 00:06:49,190
لذا، دعنا نجري التغييرات ثم سنعود ونراجع الشفرة.

82
00:06:49,190 --> 00:06:51,185
بالعودة إلى الشفرة،

83
00:06:51,185 --> 00:06:54,405
ترى الآن أنه بالنسبة للثلاثة المتبقية،

84
00:06:54,405 --> 00:06:57,880
لاحظت أنني ما زلت أستخدم البطاقة هنا

85
00:06:57,880 --> 00:07:01,535
مع رأس البطاقة هنا و h3 مع mb-0.

86
00:07:01,535 --> 00:07:07,590
هذا داخل فئة رأس البطاقة div هناك ثم أسفل

87
00:07:07,590 --> 00:07:10,790
الفئة فقط كانهيار ثم مع المعرف

88
00:07:10,790 --> 00:07:14,445
ثم جسم البطاقة الذي يرفق P هناك.

89
00:07:14,445 --> 00:07:18,745
نفس الشيء مع اثنين المتبقية أيضا.

90
00:07:18,745 --> 00:07:20,700
لذا، مع هذا التغيير،

91
00:07:20,700 --> 00:07:26,030
هذه المعلومات الثلاث المتبقية من قادة الشركات سوف

92
00:07:26,030 --> 00:07:29,675
تنهار ولكن

93
00:07:29,675 --> 00:07:33,445
سيتم الكشف عن معلومات بيتر بان المكشوفة عندما أول عرض صفحة على شبكة الإنترنت.

94
00:07:33,445 --> 00:07:36,050
لذا، مع هذا التغيير، الآن، من

95
00:07:36,050 --> 00:07:39,710
الواضح أن مقتطف الشفرة هذا متوفر في

96
00:07:39,710 --> 00:07:44,090
التعليمات التالية هنا لذا لا داعي للقلق كثيرًا.

97
00:07:44,090 --> 00:07:49,865
يمكنك دائما الرجوع إلى ذلك للتأكد من أنك قد فعلت ذلك بشكل صحيح.

98
00:07:49,865 --> 00:07:52,495
لذلك، دعونا حفظ التغييرات.

99
00:07:52,495 --> 00:07:54,740
العودة إلى صفحة الويب لدينا،

100
00:07:54,740 --> 00:07:57,430
ترى الآن الأكورديون التي شيدت هنا.

101
00:07:57,430 --> 00:08:03,125
لذلك، ترى أن أول معلومات قادة الشركات يتم عرضها هنا.

102
00:08:03,125 --> 00:08:06,190
الثلاثة المتبقية انهارت في هذه اللحظة.

103
00:08:06,190 --> 00:08:11,790
لذلك، هذا هو السبب في استخدام البرنامج المساعد الانهيار وأيضا السبب

104
00:08:11,790 --> 00:08:18,275
في تحويل اسم الشركة الرائدة في عنوان البطاقة.

105
00:08:18,275 --> 00:08:21,035
أرى أنك رأيت أنه سيتم عرض مثل هذا في هناك.

106
00:08:21,035 --> 00:08:25,150
الآن، النقر على أي واحد منهم تلاحظ الآن أنه عند النقر على

107
00:08:25,150 --> 00:08:29,785
ذلك سيتم الكشف عن هذا المحتوى ولكن الثلاثة المتبقية مخفية.

108
00:08:29,785 --> 00:08:32,315
لذا، هذا هو سلوك الأكورديون هنا.

109
00:08:32,315 --> 00:08:36,245
لذلك مع هذا، نكمل هذا التمرين.

110
00:08:36,245 --> 00:08:42,630
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الأكورديون الرسالة..