1
00:00:03,670 --> 00:00:09,835
في هذا التمرين، سنقوم باستكشاف التنقل القائم على علامة التبويب في Bootstrap،

2
00:00:09,835 --> 00:00:11,920
ودعم Bootstrap لعلامات التبويب،

3
00:00:11,920 --> 00:00:17,310
وكيف يمكن استخدام علامات التبويب لتنظيم المحتوى على صفحة الويب الخاصة بك.

4
00:00:17,310 --> 00:00:21,165
وكيف يمكنك التنقل من علامة تبويب إلى علامة تبويب أخرى،

5
00:00:21,165 --> 00:00:26,235
ثم الكشف عن المحتوى في كل من علامات التبويب هذه في صفحة الويب.

6
00:00:26,235 --> 00:00:30,115
الآن، سترى هنا لي باستخدام فئة التنقل،

7
00:00:30,115 --> 00:00:34,560
ومن ثم مزيد من التأهل باستخدام فئة علامات التبويب التنقل.

8
00:00:34,560 --> 00:00:38,065
ويمكن استخدام نفس النهج أيضا مع حبوب التنقل

9
00:00:38,065 --> 00:00:42,740
التي نظرنا إليها في المحاضرة السابقة.

10
00:00:43,470 --> 00:00:46,440
للبدء في هذا التمرين،

11
00:00:46,440 --> 00:00:49,200
سوف نذهب إلى صفحة aboutus.html.

12
00:00:49,200 --> 00:00:50,545
ثم هناك،

13
00:00:50,545 --> 00:00:53,690
حيث لدينا محتوى قيادة الشركات هناك،

14
00:00:53,690 --> 00:00:59,290
بعد H2، أنا ذاهب لتقديم الملاحة المبوبة.

15
00:00:59,290 --> 00:01:07,960
لذلك، هذا هو المكان الذي سأستفيد من المجاهدين مع علامات التبويب التنقل الطبقة.

16
00:01:07,960 --> 00:01:12,070
لذلك، كنت قد رأيت أنه في وقت سابق عندما

17
00:01:12,070 --> 00:01:17,215
شيدنا شريط التنقل، استخدمنا أيضا ul داخل شريط التنقل لتحديد عناصر التنقل هناك.

18
00:01:17,215 --> 00:01:20,270
نهج مماثل هنا، إلا أننا هنا في طريقنا

19
00:01:20,270 --> 00:01:24,235
لاستخدام أول مع الملاحة وعلامات التبويب الملاحة هنا.

20
00:01:24,235 --> 00:01:26,120
لذلك، داخل هذا ul،

21
00:01:26,120 --> 00:01:33,395
سنقوم ببناء هيكل الملاحة لهذا التنقل المبوب هنا.

22
00:01:33,395 --> 00:01:41,850
حتى في هناك، وسوف تستخدم عنصر القائمة مع فئة nav-intem،

23
00:01:41,850 --> 00:01:48,965
وبناء التنقل حول هذا البند القائمة.

24
00:01:48,965 --> 00:01:53,770
لذا، يقدم هذا العنصر الأول في علامات التبويب التنقل الخاصة بي.

25
00:01:53,770 --> 00:02:03,605
بعد ذلك مباشرة، داخل هناك سوف أعرض مع الطبقة nav-link نشطة.

26
00:02:03,605 --> 00:02:05,960
لذا، هذا واحد، كما ترون،

27
00:02:05,960 --> 00:02:10,670
إذا كنت تتذكر من الطريقة التي نستخدم بها ul مع عنصر التنقل ورابط التنقل.

28
00:02:10,670 --> 00:02:12,995
في شريط التنقل،

29
00:02:12,995 --> 00:02:14,970
ونحن نرى نهجا مماثلا هنا.

30
00:02:14,970 --> 00:02:19,150
لذلك، nav-intem نشط، ومن ثم href.

31
00:02:19,970 --> 00:02:24,895
لذلك، سيكون هذا مرجعًا إلى جزء علامة التبويب لاحقًا،

32
00:02:24,895 --> 00:02:28,695
والذي سيكون له معرف peter هناك،

33
00:02:28,695 --> 00:02:33,310
والدور هو علامة تبويب لهذا،

34
00:02:33,310 --> 00:02:39,560
وعلامة تبويب تبديل البيانات.

35
00:02:39,560 --> 00:02:45,540
لذلك، يمكنك رؤية مكون جافا سكريبت في Bootstrap يأتي إلى الصورة هنا.

36
00:02:45,540 --> 00:02:49,500
وبعد ذلك سأقول (بيتر بان)،

37
00:02:49,700 --> 00:02:54,405
ثم أغلق العلامة هناك.

38
00:02:54,405 --> 00:03:01,435
لذلك، هذا من شأنه أن يكمل علامة التبويب الأولى لدينا في الملاحة tabbed لدينا.

39
00:03:01,435 --> 00:03:03,310
اسمحوا لي أن أكمل بقية التعليمات البرمجية،

40
00:03:03,310 --> 00:03:07,255
وبعد ذلك سوف نعود ومراجعة بقية التعليمات البرمجية هناك.

41
00:03:07,255 --> 00:03:13,630
لذلك، هنا يمكنك أن ترى أنني قد أكملت هذا الهيكل الملاحة هنا.

42
00:03:13,630 --> 00:03:23,635
وبالمثل، أنا تحديد بنود القائمة لبقية قادة الشركات الحرة هنا.

43
00:03:23,635 --> 00:03:26,305
الآن هذا، اسمحوا لي أن حفظ الفكة.

44
00:03:26,305 --> 00:03:30,160
ثم دعونا نذهب ونلقي نظرة سريعة على صفحة الويب.

45
00:03:30,840 --> 00:03:33,070
التبديل إلى صفحة الويب،

46
00:03:33,070 --> 00:03:37,260
ترى الآن كيفية استخدام علامات التبويب الملاحة الملاحة أنشأنا

47
00:03:37,260 --> 00:03:42,400
هيكل الملاحة هذا الحق تحت قيادة الشركة هنا.

48
00:03:42,400 --> 00:03:47,110
لذا، فإن بنية التنقل هذه تعني أنني يجب أن أتمكن من التنقل

49
00:03:47,110 --> 00:03:51,815
وعرض كل واحد منهم بمزيد من التفصيل عن طريق النقر على هذا.

50
00:03:51,815 --> 00:03:54,830
لذا، هذه هي الطريقة التي يعمل بها التنقل المبوب هنا.

51
00:03:54,830 --> 00:03:58,525
الآن، من الواضح، محتوى كل واحد منهم يجب أن

52
00:03:58,525 --> 00:04:02,700
تظهر بشكل مناسب فقط تفاصيل هذا الشخص هنا.

53
00:04:02,700 --> 00:04:06,145
لذلك، هذا هو المكان الذي

54
00:04:06,145 --> 00:04:10,630
سيدخل فيه استخدام المحتوى المبوب وفئات جزء علامة التبويب حيز التنفيذ.

55
00:04:10,630 --> 00:04:13,925
ونحن في طريقنا إلى إرفاق هذا المحتوى باستخدام ذلك.

56
00:04:13,925 --> 00:04:17,200
ومن ثم ربط هذا بتلك الملاحة،

57
00:04:17,200 --> 00:04:18,660
الملاحة التبويب فوق هنا،

58
00:04:18,660 --> 00:04:22,580
بحيث

59
00:04:22,580 --> 00:04:25,380
يتم عرض معلومات زعيم شركة واحدة فقط على الشاشة في كل مرة.

60
00:04:25,380 --> 00:04:28,910
بمجرد إكمال إعداد هذا التنقل المبوب،

61
00:04:28,910 --> 00:04:31,755
سننتقل إلى المحتوى الفعلي هنا.

62
00:04:31,755 --> 00:04:36,505
ثم الآن، سأقوم بإعادة تنظيم هذا المحتوى إلى أربع أجزاء تبويب منفصلة،

63
00:04:36,505 --> 00:04:38,840
سيتم عرض كل منها عند

64
00:04:38,840 --> 00:04:44,010
تحديد جزء علامة التبويب المقابل في التنقل المبوب.

65
00:04:44,010 --> 00:04:45,830
لذلك، لنبدأ،

66
00:04:45,830 --> 00:04:50,755
أول شيء سنقوم به هو أن ندخل ونفصل

67
00:04:50,755 --> 00:04:55,680
كل من هؤلاء القادة الأربعة إلى أربعة أجزاء هناك،

68
00:04:55,680 --> 00:04:58,815
بحيث يكون من السهل بالنسبة لي أن أرى ما أفعله.

69
00:04:58,815 --> 00:05:01,180
لذلك، في H3،

70
00:05:01,180 --> 00:05:04,355
أنا قطعها إلى أربعة أجزاء مختلفة،

71
00:05:04,355 --> 00:05:08,610
وبعد ذلك سنكون قادرين على العمل مع هذه.

72
00:05:08,610 --> 00:05:13,395
لذا، الآن لدي واحد، اثنان، ثلاثة، أربعة

73
00:05:13,395 --> 00:05:19,055
لذلك، يحتاج هذا المحتوى الآن إلى أن تكون محاطة داخل div

74
00:05:19,055 --> 00:05:28,540
مع محتوى علامة التبويب للفئة.

75
00:05:28,540 --> 00:05:32,845
لذلك، كل هذا المحتوى الذي لدينا

76
00:05:32,845 --> 00:05:40,055
لقادة الشركات الأربعة المختلفة يجب أن تكون محاطة داخل قسم محتوى علامة التبويب هناك.

77
00:05:40,055 --> 00:05:44,455
لذلك، الآن لقد وضعت ذلك داخل علامة التبويب جهة الاتصال.

78
00:05:44,455 --> 00:05:46,090
الآن، لكل واحد منهم،

79
00:05:46,090 --> 00:05:52,235
أحتاج إلى إنشاء div آخر مع جزء علامة التبويب الفئات وبعض الفئات الإضافية.

80
00:05:52,235 --> 00:05:56,430
ومن ثم تنظيم هذا الاتصال.

81
00:05:56,430 --> 00:05:58,680
لذلك، دعونا نبدأ مع أول واحد.

82
00:05:58,680 --> 00:06:02,215
لذلك، لأول زعيم الشركات،

83
00:06:02,215 --> 00:06:07,955
وأنا ذاهب لتقديم ديف جديد مع دور tabpanel.

84
00:06:07,955 --> 00:06:12,250
لذلك، هذا بمثابة لوحة التبويب التي سيتم عرضها

85
00:06:12,250 --> 00:06:17,235
عند تحديد التنقل علامة التبويب الأولى.

86
00:06:17,235 --> 00:06:22,440
والفئة المقابلة التي أحتاج إلى تطبيقها هي جزء علامة التبويب.

87
00:06:22,440 --> 00:06:24,090
لذلك، هذا هو جزء علامة

88
00:06:24,090 --> 00:06:26,430
التبويب، المحتوى الفعلي الموجود هناك.

89
00:06:26,430 --> 00:06:29,805
ثم فئة أخرى أن أتقدم بها هي تتلاشى.

90
00:06:29,805 --> 00:06:32,920
لذا، فإن فئة التلاشي تسمح لهذا المحتوى بالتلاشي.

91
00:06:32,920 --> 00:06:37,090
لذلك، هذا هو فئة الرسوم المتحركة التي يدعمها Bootstrap.

92
00:06:37,090 --> 00:06:40,340
أيضا، أطبق هذه الفئة تسمى العرض.

93
00:06:40,340 --> 00:06:43,770
تحدد فئة العرض بشكل أساسي

94
00:06:43,770 --> 00:06:48,425
أنه يجب عرض هذا المحتوى المحدد عند عرض الصفحة لأول مرة.

95
00:06:48,425 --> 00:06:52,870
لذلك، سيتم تطبيق فئة العرض فقط على جزء علامة التبويب الأول،

96
00:06:52,870 --> 00:06:56,640
ولن يتم تطبيق أجزاء علامات التبويب المتبقية على فئة العرض.

97
00:06:56,640 --> 00:07:00,910
والفئة الأخيرة التي سأقوم بتطبيقها نشطة لأن هذا هو

98
00:07:00,910 --> 00:07:07,190
جزء علامة التبويب الذي سيتم عرضه في الصفحة عند عرض الصفحة لأول مرة.

99
00:07:07,190 --> 00:07:10,095
بالإضافة إلى ذلك، لكي يعمل التنقل،

100
00:07:10,095 --> 00:07:12,760
أحتاج إلى إعطاء هذا والمعرف،

101
00:07:12,760 --> 00:07:19,340
وبما أنني استخدمت الوسم بيتر لمحتوى التنقل في علامة التبويب،

102
00:07:19,340 --> 00:07:23,705
لذلك سأقوم بتطبيق المعرف باسم بيتر هنا.

103
00:07:23,705 --> 00:07:31,680
وهكذا، عندما يشار إلى هذا في رابط هناك مع الوسم بيتر،

104
00:07:31,680 --> 00:07:34,740
وهذا هو الجزء المقابل الذي أشير إليه.

105
00:07:34,740 --> 00:07:39,885
الآن، ما سأفعله هو أنني سأقوم بنسخ هذا القسم من هناك.

106
00:07:39,885 --> 00:07:49,010
ثم سأقوم بتطبيق هذا div على معلومات الشركة الثانية،

107
00:07:49,010 --> 00:07:55,255
باستثناء أنه بالنسبة لهذا واحد يجب أن أطبق فقط جزء علامة التبويب وتناسب.

108
00:07:55,255 --> 00:07:58,730
لا ينبغي تطبيق العرض والنشط على الثلاثة المتبقية.

109
00:07:58,730 --> 00:08:03,820
و الهويّة هنا يجب أن تكون (داني) للثانية

110
00:08:03,820 --> 00:08:08,190
أنا ذاهب ببساطة نسخ هذا الرمز،

111
00:08:08,190 --> 00:08:13,460
ومن ثم لصق ذلك لزعيم الشركات الثالث هنا.

112
00:08:13,460 --> 00:08:20,955
ومن ثم فإن لوحة التبويب والثالث هو أغومبي.

113
00:08:20,955 --> 00:08:23,795
وآخر واحد،

114
00:08:23,795 --> 00:08:27,235
مرة أخرى، أنا لصق ذلك في،

115
00:08:27,235 --> 00:08:31,640
ومن ثم يجب تغيير معرف إلى ألبرتو،

116
00:08:31,640 --> 00:08:34,280
وإغلاق هذا ديف هنا.

117
00:08:34,280 --> 00:08:39,580
لذا، يجب إغلاق هذا div لآخر واحد عند هذه النقطة.

118
00:08:39,580 --> 00:08:45,355
وهذا يجب أن تأخذ الرعاية من لوحات التبويب الأربعة التي أحتاجها.

119
00:08:45,355 --> 00:08:50,725
الذهاب في وإبراز هذا المحتوى،

120
00:08:50,725 --> 00:08:53,490
حتى أكون

121
00:08:53,490 --> 00:08:56,245
راضيا، هاجسي هو راض هناك.

122
00:08:56,245 --> 00:09:01,805
حسنا، هذا يكمل تنظيم محتوى علامة التبويب.

123
00:09:01,805 --> 00:09:04,600
الآن، دعونا حفظ التغيير ونذهب ونلقي

124
00:09:04,600 --> 00:09:09,030
نظرة سريعة على ما تبدو عليه صفحة الويب الآن.

125
00:09:09,330 --> 00:09:11,480
الذهاب إلى صفحة الويب الخاصة بنا،

126
00:09:11,480 --> 00:09:19,680
ترى الآن أن صفحة الويب الخاصة بنا تعرض فقط المحتوى المقابل لرئيسهم التنفيذي.

127
00:09:19,680 --> 00:09:22,825
إذا قمت بالتبديل إلى أي من تلك الأخرى،

128
00:09:22,825 --> 00:09:26,415
سترى أنه يتم عرض المعلومات المقابلة.

129
00:09:26,415 --> 00:09:32,290
ولاحظ كيف تتلاشى هذه المعلومات عند تحديد هذا المستخدم المعين.

130
00:09:32,290 --> 00:09:35,400
ولكن، بالطبع، إذا كنت سعيدًا بهذا،

131
00:09:35,400 --> 00:09:37,890
فلا بأس، يمكننا التوقف عند هذه النقطة.

132
00:09:37,890 --> 00:09:45,360
ولكن أود أن تحدد بشكل جيد علامة تبويب حقيقية حول هذا الموضوع.

133
00:09:45,360 --> 00:09:50,370
لذا، هذا هو المكان الذي سأقوم فيه بتطبيق بعض سمات CSS،

134
00:09:50,370 --> 00:09:53,540
وخصائص لعلامة التبويب هذه هنا،

135
00:09:53,540 --> 00:09:55,660
بحيث

136
00:09:55,660 --> 00:09:58,290
تكون بنية علامة تبويب نظيفة لطيفة يتم تعريفها هناك.

137
00:09:58,290 --> 00:10:03,590
لذلك، دعونا إنشاء بعض خصائص CSS لهذا الغرض.

138
00:10:03,590 --> 00:10:06,855
الخطوة الأخيرة، والتحول إلى styles.css.

139
00:10:06,855 --> 00:10:09,555
بعد معكوس نافبار،

140
00:10:09,555 --> 00:10:15,530
وأنا ذاهب لتقديم فئات CSS لمحتوى علامة التبويب،

141
00:10:15,530 --> 00:10:18,010
لذلك أنا تحديد لمحتوى علامة التبويب،

142
00:10:18,010 --> 00:10:29,565
الحدود اليسار: 1px سد الصلبة.

143
00:10:29,565 --> 00:10:48,195
وأنا ذاهب لتطبيق نفس على الحدود اليمنى والقاع.

144
00:10:48,195 --> 00:10:51,310
لست بحاجة إلى تطبيق على الجزء العلوي لأن الجزء العلوي

145
00:10:51,310 --> 00:10:55,585
يحكمه التنقل علامة التبويب بالفعل.

146
00:10:55,585 --> 00:11:00,250
ثم اسمحوا لي أن أعطي الحشو من 10 بكسل في كل مكان،

147
00:11:00,250 --> 00:11:02,990
ومن ثم حفظ التغييرات.

148
00:11:02,990 --> 00:11:07,450
دعونا نذهب ونلقي نظرة على صفحة الويب لدينا بعد هذا.

149
00:11:07,450 --> 00:11:09,980
التبديل مرة أخرى إلى صفحتنا،

150
00:11:09,980 --> 00:11:11,395
الآن ترى لطيفة،

151
00:11:11,395 --> 00:11:14,920
نظيفة تشبه علامة التبويب التي يتم إنشاؤها.

152
00:11:14,920 --> 00:11:18,355
بحيث عند الانتقال إلى كل واحد منهم، يتم

153
00:11:18,355 --> 00:11:24,695
عرض تلك المعلومات المقابلة بشكل مناسب في علامة التبويب الخاصة بها.

154
00:11:24,695 --> 00:11:28,905
هذا يكمل هذا التمرين حيث نظرنا إلى

155
00:11:28,905 --> 00:11:33,120
استخدام التنقل المبوب لصفحة الويب الخاصة بنا.

156
00:11:33,120 --> 00:11:39,435
ثم رأينا كيف يمكننا إنشاء التنقل علامة التبويب وأرفق محتوى آخر.

157
00:11:39,435 --> 00:11:46,200
هذا هو أيضا الوقت المناسب بالنسبة لك للقيام تعليق Git مع علامات التبويب الرسالة.