1
00:00:03,650 --> 00:00:11,190
لقد أكملنا للتو مناقشة حول أهمية توفير التصفح في موقع الويب الخاص بك.

2
00:00:11,190 --> 00:00:15,920
كما نظرنا في العديد من الطرق المختلفة التي يمكننا من خلالها توفير التنقل في موقع ويب.

3
00:00:15,920 --> 00:00:21,229
لقد حان الوقت الآن للنظر في bootstrap والنظر في المكونات

4
00:00:21,229 --> 00:00:26,269
التي يوفرها bootstrap والتي تمكننا من إضافة التنقل إلى مواقعنا الإلكترونية.

5
00:00:26,269 --> 00:00:32,815
اثنين من المكونات الهامة من بوتستراب هو نافبار و بريدكرومبس.

6
00:00:32,815 --> 00:00:37,610
نحن ذاهبون لدراسة كل من هذه في هذا التمرين.

7
00:00:37,610 --> 00:00:44,745
دعونا نبدأ بإضافة شريط التنقل إلى الجزء العلوي من صفحة الويب الخاصة بنا.

8
00:00:44,745 --> 00:00:50,065
يمكننا القيام بذلك باستخدام مكون Navbar الذي هو جزء من bootstrap.

9
00:00:50,065 --> 00:00:51,605
إذاً، كيف نبدأ؟

10
00:00:51,605 --> 00:00:56,260
نذهب إلى نص صفحة HTML لدينا.

11
00:00:56,260 --> 00:00:58,760
حتى هنا، لدي index.HTML مفتوحة.

12
00:00:58,760 --> 00:01:00,495
وفي الجزء العلوي،

13
00:01:00,495 --> 00:01:06,090
سأقوم بإضافة عنصر باستخدام علامة HTML التنقل هذه.

14
00:01:06,090 --> 00:01:10,330
الآن تم تصميم علامة HTML التنقل لتوفير التنقل.

15
00:01:10,330 --> 00:01:17,880
لذلك، دعونا الاستفادة من هذه العلامة وبناء شريط التنقل لدينا باستخدام علامة التنقل.

16
00:01:17,880 --> 00:01:19,645
حتى الآن، في الجزء العلوي،

17
00:01:19,645 --> 00:01:22,055
وأنا ذاهب لإضافة في هذه العلامة،

18
00:01:22,055 --> 00:01:30,040
ووضع الملاحة وبناء شريط التنقل حول هذه العلامة الملاحة.

19
00:01:30,040 --> 00:01:33,910
لذا، بمجرد إضافة علامة التنقل هذه إلى index.HTML،

20
00:01:33,910 --> 00:01:39,590
يمكننا المضي قدمًا ثم تطبيق فئات bootstraps على علامة التنقل هذه.

21
00:01:39,590 --> 00:01:42,700
لذلك، أنا تطبيق شريط التنقل الصف.

22
00:01:42,700 --> 00:01:47,485
لذا، تسمح لي فئة نافبار في بوتستراب بإنشاء شريط التنقل.

23
00:01:47,485 --> 00:01:50,730
هناك العديد من الطرق المختلفة لتخصيص شريط التنقل،

24
00:01:50,730 --> 00:01:56,600
والتي نلقي نظرة عليها كفئات إضافية ستضيف إلى علامة التنقل هذه.

25
00:01:56,600 --> 00:01:58,770
جنبا إلى جنب مع نافبار،

26
00:01:58,770 --> 00:02:02,880
نضيف أيضا في الفئة التالية التي هي نافبار الظلام.

27
00:02:02,880 --> 00:02:08,480
الآن أريد أن يكون شريط التنقل الخاص بي

28
00:02:08,480 --> 00:02:09,985
داكنًا بالألوان، مع خلفية أغمق.

29
00:02:09,985 --> 00:02:13,920
لأن ذلك يسير على ما يرام مع الموقع الذي صممته للتو.

30
00:02:13,920 --> 00:02:16,150
يمكننا الحصول على ضوء نافبار،

31
00:02:16,150 --> 00:02:18,950
وهو شريط التنقل لون أخف وزنا.

32
00:02:18,950 --> 00:02:23,775
لذلك، يمكنك اختيار استخدام أي منهما في صفحة الويب الخاصة بك.

33
00:02:23,775 --> 00:02:32,620
الطبقة التالية التي سأستخدمها هي فئة navbar-extend-sm.

34
00:02:32,620 --> 00:02:36,870
الآن، وأيضًا، سأحدد حجم الشاشة

35
00:02:36,870 --> 00:02:42,064
الذي يأتي تحته السلوك القادر على التبديل إلى الوجود.

36
00:02:42,064 --> 00:02:48,480
الآن، عندما أقول

37
00:02:48,480 --> 00:02:51,370
navbar-extend-sm، هذا يعني أنه بالنسبة للشاشات الصغيرة والصغيرة الإضافية، سيصبح شريط التنقل هذا قادرًا على التبديل.

38
00:02:51,370 --> 00:02:57,080
وهذا يعني أنه سيتم انهار في تلك الأحجام الشاشة.

39
00:02:57,080 --> 00:03:00,520
سوف تتعلم قريبا كيف يعمل هذا،

40
00:03:00,520 --> 00:03:02,930
عندما ننظر في كيف يمكننا إضافة

41
00:03:02,930 --> 00:03:07,460
البرنامج المساعد الانهيار إلى شريط التنقل لتمكين هذا النوع من السلوك.

42
00:03:07,460 --> 00:03:10,970
لذلك جنبا إلى جنب مع sm نافبار قادرة على تبديل،

43
00:03:10,970 --> 00:03:15,240
وأنا ذاهب لتطبيق لون الخلفية إلى نافبار في البداية،

44
00:03:15,240 --> 00:03:18,570
والتي من شأنها أن تكون بغ الأساسي.

45
00:03:18,570 --> 00:03:25,909
الآن bg-الأساسي هو هذا اللون الأساسي الذي تم تعريفه في bootstrap الخاص بك.

46
00:03:25,909 --> 00:03:33,350
بشكل افتراضي، هذا هو إصدار من اللون الأزرق الذي يتم استخدامه من قبل bootstraps.

47
00:03:33,350 --> 00:03:35,910
لذا سأبدأ بذلك كلوني الأساسي.

48
00:03:35,910 --> 00:03:42,350
في وقت لاحق، سأقوم بتخصيص لون شريط التنقل الخاص بي باستخدام بعض فئات CSS.

49
00:03:42,350 --> 00:03:45,155
بالإضافة إلى ذلك، سأقوم أيضًا بتطبيق

50
00:03:45,155 --> 00:03:50,255
فئة أخرى تسمى القمة الثابتة إلى شريط التنقل هذا.

51
00:03:50,255 --> 00:03:55,210
ما يفعله الأعلى الثابت، هو إصلاح شريط التنقل إلى أعلى

52
00:03:55,210 --> 00:04:00,330
نافذة المتصفح حيث يتم عرض صفحة الويب هذه.

53
00:04:00,330 --> 00:04:03,830
حتى عندما تقوم بتمرير صفحتك المبللة،

54
00:04:03,830 --> 00:04:07,870
كان شريط التنقل حتى يبقى في أعلى الصفحة.

55
00:04:07,870 --> 00:04:12,250
يمكنك ببساطة استخدام أسفل ثابت لإصلاح

56
00:04:12,250 --> 00:04:18,235
شريط التنقل إلى أسفل نافذة المتصفح الخاص بك أو يمكنك أن تقول، أعلى ثابت.

57
00:04:18,235 --> 00:04:21,810
وأيضا، يمكنك فقط عدم استخدام هذه الفئة.

58
00:04:21,810 --> 00:04:23,140
إذا لم تستخدم ذلك،

59
00:04:23,140 --> 00:04:29,325
فسيتم تمرير شريط التنقل أيضًا عند تمرير صفحة الويب لأعلى.

60
00:04:29,325 --> 00:04:36,670
في موقع الويب الخاص بي، اخترت الحفاظ على شريط التنقل ثابتًا في أعلى الصفحة.

61
00:04:36,670 --> 00:04:38,600
هناك العديد من الخيارات الأخرى

62
00:04:38,600 --> 00:04:43,920
المتوفرة التي يمكنك العثور عليها في وثائق bootstraps.

63
00:04:43,920 --> 00:04:48,495
لذلك هذا هو مثال واحد على استخدام شريط التنقل.

64
00:04:48,495 --> 00:04:51,645
الآن بالإضافة إلى ذلك، داخل شريط التنقل،

65
00:04:51,645 --> 00:04:54,545
سأرفق

66
00:04:54,545 --> 00:04:57,450
أي محتوى سيتم استخدامه في شريط التنقل داخل الحاوية.

67
00:04:57,450 --> 00:05:02,880
لذلك هذا هو المكان الذي سأستخدم فيه عنصر div هنا

68
00:05:02,880 --> 00:05:10,125
وقم بتطبيق فئة الحاوية على عنصر div هذا.

69
00:05:10,125 --> 00:05:12,520
لذلك، كل ما هو مغلق داخل هناك،

70
00:05:12,520 --> 00:05:17,375
سوف يقتصر على نفس عرض بقية صفحة ويب الخاصة بي.

71
00:05:17,375 --> 00:05:20,575
كما تتذكر، استخدمت فئة الحاوية

72
00:05:20,575 --> 00:05:24,870
لتحديد اتساع المحتوى في صفحة الويب الخاصة بي،

73
00:05:24,870 --> 00:05:28,080
لذلك سأقوم بتطبيق نفس الشيء على شريط التنقل الخاص بي أيضًا،

74
00:05:28,080 --> 00:05:31,490
بحيث

75
00:05:31,490 --> 00:05:36,185
يتم عرض معلومات شريط التنقل الخاصة بي ضمن نفس العرض مثل بقية صفحة الويب الخاصة بي.

76
00:05:36,185 --> 00:05:41,225
يمكنك اختيار عدم استخدام فئة الحاوية في شريط التنقل، وفي هذه الحالة،

77
00:05:41,225 --> 00:05:47,200
سوف تنتشر محتويات شريط التنقل على كامل عرض الشاشة.

78
00:05:47,200 --> 00:05:49,055
داخل شريط التنقل،

79
00:05:49,055 --> 00:06:02,390
سأقوم بإضافة فئة إلى علامة هنا.

80
00:06:02,520 --> 00:06:09,170
تسمح لي هذه الفئة التي أسميها باسم العلامة التجارية navbar بعرض بعض المعلومات كمعلومات العلامة التجارية في شريط التنقل الخاص بي.

81
00:06:09,170 --> 00:06:11,110
لذلك إذا كان لديك شركة على سبيل المثال،

82
00:06:11,110 --> 00:06:13,050
يمكنك عرض اسم شركتك أو

83
00:06:13,050 --> 00:06:16,040
شعار شركتك باستخدام العلامة التجارية navbar

84
00:06:16,040 --> 00:06:21,390
بحيث يتم عرضها بشكل بارز في شريط التنقل الخاص بك.

85
00:06:21,390 --> 00:06:23,370
من الواضح، عند زيارة العديد من المواقع،

86
00:06:23,370 --> 00:06:26,400
سترى أن اسم الشركة في مكان ما مرئي

87
00:06:26,400 --> 00:06:30,310
في شريط التنقل الخاص بهذا الموقع.

88
00:06:30,310 --> 00:06:33,085
لذلك، اسمحوا لي أن أضيف في تلك العلامة التجارية نافبار.

89
00:06:33,085 --> 00:06:42,190
ويمكن أيضا أن يكون هذا مرتبطا تشعبيا إلى الصفحة الرئيسية لموقع الويب الخاص بك.

90
00:06:42,190 --> 00:06:43,895
لذا، سأترك هذا هناك.

91
00:06:43,895 --> 00:06:46,000
في الصفحات المتبقية على موقع الويب الخاص بي،

92
00:06:46,000 --> 00:06:50,480
سأقوم فقط بإضافة href لإعادتي إلى صفحة index.HTML،

93
00:06:50,480 --> 00:06:52,449
وهي الصفحة الرئيسية.

94
00:06:52,449 --> 00:07:00,109
وداخل هنا أنا ذاهب لإضافة في اسم مطعمي.

95
00:07:03,220 --> 00:07:06,890
دعونا حفظ التغييرات والذهاب وإلقاء

96
00:07:06,890 --> 00:07:11,110
نظرة سريعة على الحالة الحالية لشريط التنقل الخاص بي.

97
00:07:11,110 --> 00:07:13,710
الذهاب إلى صفحة الويب في المتصفح،

98
00:07:13,710 --> 00:07:21,150
يمكنك الآن أن ترى أين شريط التنقل مرئي على صفحة الويب الخاصة بي في المتصفح.

99
00:07:21,150 --> 00:07:25,960
شريط التنقل الآن في أعلى الصفحة

100
00:07:25,960 --> 00:07:30,490
ويمكنك أن ترى أنه أثناء تمرير صفحتي،

101
00:07:30,490 --> 00:07:36,745
لا يزال شريط التنقل في الأعلى لأنني اعتدت على الطبقة العليا الثابتة.

102
00:07:36,745 --> 00:07:38,520
يمكنك أيضا رؤية

103
00:07:38,520 --> 00:07:45,460
العلامة التجارية نافبار مما يسمح لي لعرض اسم المطعم هناك.

104
00:07:45,460 --> 00:07:50,310
في وقت لاحق أنا ذاهب لاستبدال ذلك مع شعار لهذا المطعم.

105
00:07:50,310 --> 00:07:56,010
لاحظت أن شريط التنقل مغطى جزئيا في Jumbotron.

106
00:07:56,010 --> 00:08:01,395
أنت ذاهب لإصلاح ذلك قليلا في وقت لاحق باستخدام بعض التخصيص CSS.

107
00:08:01,395 --> 00:08:07,255
الشيء التالي الذي سأقوم به هو إضافة بعض الروابط إلى شريط التنقل الخاص بي،

108
00:08:07,255 --> 00:08:13,060
بحيث تقودني هذه الروابط إلى الصفحات الأخرى في موقع الويب الخاص بي.

109
00:08:13,060 --> 00:08:14,790
إذن كيف نفعل ذلك؟

110
00:08:14,790 --> 00:08:17,575
بالعودة إلى index.HTML،

111
00:08:17,575 --> 00:08:24,490
سأقوم بإضافة في ul هنا،

112
00:08:24,490 --> 00:08:27,715
حيث سأقوم بالإعلان عن

113
00:08:27,715 --> 00:08:36,460
جميع الروابط المختلفة التي سيتم عرضها في مربع التنقل الخاص بي.

114
00:08:36,460 --> 00:08:43,590
لذلك هذا المجاول الذي أنا ذاهب لتطبيق الطبقة كما نافبار الملاحة.

115
00:08:43,590 --> 00:08:46,530
لذلك هذا هو الفصل الذي سيساعدني على تحديد

116
00:08:46,530 --> 00:08:51,275
مجموعة الروابط التي سيتم تضمينها في شريط التنقل الخاص بي.

117
00:08:51,275 --> 00:08:56,655
وسيتم عرض هذه الروابط أفقيا داخل شريط التنقل الخاص بي.

118
00:08:56,655 --> 00:09:01,660
يتم استخدام فئة السيارات السيد التي قمت بتطبيقها أيضًا على ul،

119
00:09:01,660 --> 00:09:05,740
لتحديد الهامش الصحيح.

120
00:09:05,740 --> 00:09:08,590
لذلك هذا هو فئة الأداة المساعدة التي تتوفر

121
00:09:08,590 --> 00:09:13,815
في bootstrap التي تسمح لي لتحديد الهامش الصحيح.

122
00:09:13,815 --> 00:09:17,190
لذا إذا قلت، سيد السيارات،

123
00:09:17,190 --> 00:09:19,390
ما يعنيه هو أنه على الجانب الأيمن،

124
00:09:19,390 --> 00:09:23,100
يجب تعيين الهامش الأيمن قدر الإمكان.

125
00:09:23,100 --> 00:09:26,380
مما يعني أنه سيتم دفع المحتوى إلى اليسار قدر

126
00:09:26,380 --> 00:09:30,175
الإمكان داخل شريط التنقل.

127
00:09:30,175 --> 00:09:32,310
داخل هذه القائمة غير مرتبة،

128
00:09:32,310 --> 00:09:34,515
يمكنني استخدام عناصر القائمة لتضمين

129
00:09:34,515 --> 00:09:38,775
الروابط المختلفة التي ستكون جزءًا من شريط التنقل الخاص بي.

130
00:09:38,775 --> 00:09:42,595
حتى في هناك، وأنا ذاهب لإضافة في بعض الروابط هناك

131
00:09:42,595 --> 00:09:48,900
وسأبدأ من خلال تحديد أول واحد هناك مع الرابط.

132
00:09:48,900 --> 00:09:51,830
إلى كل عنصر قائمة في شريط التنقل الخاص

133
00:09:51,830 --> 00:09:56,110
بك، ستقوم بتطبيق الفصل كعنصر التنقل.

134
00:09:56,110 --> 00:10:03,780
يسمح هذا بعرض عناصر القائمة هذه أفقيًا كارتباطات في شريط التنقل الخاص بي.

135
00:10:03,780 --> 00:10:06,055
ثم داخل هنا،

136
00:10:06,055 --> 00:10:10,640
يمكنني بعد ذلك استخدام علامة لإضافة في

137
00:10:10,640 --> 00:10:16,140
الرابط الفعلي الذي سيكون جزءًا من شريط التنقل الخاص بي.

138
00:10:16,140 --> 00:10:19,600
حتى داخل هناك يمكنني استخدام علامة مع

139
00:10:19,600 --> 00:10:28,730
الطبقة nav-link وهذا يسمح لي أيضا لاستخدام href.

140
00:10:30,260 --> 00:10:37,145
السمة لتحديد الرابط هناك.

141
00:10:37,145 --> 00:10:41,255
وأول واحد سوف أقوم بتضمينه هو المنزل.

142
00:10:41,255 --> 00:10:46,935
لذلك، سيتضمن هذا عنصرًا يسمى Home في شريط التنقل هذا.

143
00:10:46,935 --> 00:10:51,900
اسمحوا لي فقط نسخ ذلك ثم لصق ذلك.

144
00:10:51,900 --> 00:10:55,475
وبعد ذلك سنقوم بتحرير بعض هذه لأنني أريد إضافة

145
00:10:55,475 --> 00:11:00,630
أربعة أنواع مختلفة إلى شريط التنقل الخاص بي.

146
00:11:00,630 --> 00:11:02,110
الأول هو المنزل.

147
00:11:02,110 --> 00:11:04,170
الثاني سيكون حول.

148
00:11:04,170 --> 00:11:13,560
الثالث سيكون القائمة التي أنا ذاهب لبناء كجزء من الدورة القادمة.

149
00:11:13,560 --> 00:11:16,630
وآخر واحد سيكون الاتصال.

150
00:11:16,630 --> 00:11:25,495
يحتوي موقع الشركة النموذجي على روابط مثل هذه في شريط التنقل الخاص به.

151
00:11:25,495 --> 00:11:27,830
لذلك مع إضافة هذين الاثنين،

152
00:11:27,830 --> 00:11:30,915
الآن ما يمكنني القيام به هو

153
00:11:30,915 --> 00:11:36,560
أنه يمكننا تحديد واحد من هذه الروابط صراحة كرابط نشط،

154
00:11:36,560 --> 00:11:39,600
وهذا يعني أنه عندما تكون على تلك الصفحة معينة،

155
00:11:39,600 --> 00:11:42,145
يمكن تسليط الضوء على هذا الرابط معين.

156
00:11:42,145 --> 00:11:48,685
لذلك للقيام بذلك، سوف نطبق هنا فئة تسمى نشطة إلى واحدة من هذه العناصر القائمة.

157
00:11:48,685 --> 00:11:51,815
في هذه الحالة، بما أن هذه هي صفحة index.html،

158
00:11:51,815 --> 00:11:56,085
فأنا أطبق الفئة النشطة على الرابط الرئيسي هناك.

159
00:11:56,085 --> 00:12:02,725
هذا يكمل إلى حد كبير شريط التنقل الخاص بي في صفحة index.HTML.

160
00:12:02,725 --> 00:12:08,095
شيء واحد صغير أود إصلاحه هنا هو أن الرابط حول،

161
00:12:08,095 --> 00:12:12,130
أريد ربطه إلى

162
00:12:12,130 --> 00:12:16,965
صفحة aboutus.HTML التي قمنا بتضمينها بالفعل في موقعنا على الانترنت،

163
00:12:16,965 --> 00:12:19,680
لأن هذا هو المكان الذي أريد أن يؤدي.

164
00:12:19,680 --> 00:12:23,795
دعونا نذهب ونلقي نظرة سريعة على شريط التنقل لدينا من هذا الجزء.

165
00:12:23,795 --> 00:12:25,985
بالعودة إلى شريط التنقل لدينا،

166
00:12:25,985 --> 00:12:28,995
يمكنك أن ترى على الفور نتيجة تضمين

167
00:12:28,995 --> 00:12:32,730
تلك العناصر في قائمة غير مرتبة هناك.

168
00:12:32,730 --> 00:12:34,160
لذلك، ترى الصفحة الرئيسية،

169
00:12:34,160 --> 00:12:36,500
حول، القائمة، والاتصال هناك،

170
00:12:36,500 --> 00:12:43,145
وكل واحد منهم هو رابط ولكن هذا هو عنصر التنقل هنا.

171
00:12:43,145 --> 00:12:48,740
ولاحظ كيف يتم تمييز المنزل هنا بسبب استخدام الطبقة النشطة.

172
00:12:48,740 --> 00:12:50,305
لذلك، إذا ضغطت على حول،

173
00:12:50,305 --> 00:12:52,990
فإنه ينبغي أن يأخذني إلى حول الملعب.

174
00:12:52,990 --> 00:12:55,670
لو وها نحن ذا

175
00:12:55,670 --> 00:12:58,970
لكنني أدرك أنه ليس لدي طريقة للعودة،

176
00:12:58,970 --> 00:13:04,190
مما يعني أنني بحاجة أيضًا إلى تسليم شريط التنقل هذا إلى صفحة aboutus.HTML.

177
00:13:04,190 --> 00:13:07,330
سنصل إلى هناك في فترة قصيرة.

178
00:13:07,330 --> 00:13:11,360
في الوقت الحالي، سأقوم بالتنقل بسرعة باستخدام زر الرجوع

179
00:13:11,360 --> 00:13:16,585
للمتصفح الخاص بي مرة أخرى إلى صفحة index.HTML الخاصة بي.

180
00:13:16,585 --> 00:13:21,030
شيء واحد أردت أيضا أن أظهره لك هو كيف

181
00:13:21,030 --> 00:13:27,525
سيتم انهيار شريط التنقل هذا لأحجام الشاشة الصغيرة والإضافية.

182
00:13:27,525 --> 00:13:35,570
لذلك، دعونا تشغيل وجهة النظر باستخدام عرض استجابة،

183
00:13:35,570 --> 00:13:37,960
ومن ثم اسمحوا لي أن أذهب إلى غالاكسي S5.

184
00:13:37,960 --> 00:13:43,250
ولاحظت أنه عندما أستخدم Galaxy S5 مثل هذا،

185
00:13:43,250 --> 00:13:50,000
يمكنك أن ترى أن هذا يتم عرضه في وقت سابق مما يغطي الشاشة بالفعل.

186
00:13:50,000 --> 00:13:52,145
هذا ليس السلوك الذي أريده

187
00:13:52,145 --> 00:14:00,075
أريد أن أكون قادرا على إخفاء هذا عندما أشاهد هذا على شاشة صغيرة وإضافية.

188
00:14:00,075 --> 00:14:04,220
ومن ثم ربما أضيف زر هنا يمكنني استخدامه

189
00:14:04,220 --> 00:14:08,450
لتبديل وإيقاف عرض هذه الروابط.

190
00:14:08,450 --> 00:14:13,170
لقد رأيت مثل هذه الأشياء في مواقع الجوال.

191
00:14:13,170 --> 00:14:16,935
كيف نفعل ذلك في بوتستراب؟

192
00:14:16,935 --> 00:14:19,645
دعنا نَذْهبُ إلى تلك الخطوة التالية.

193
00:14:19,645 --> 00:14:24,300
العودة إلى شريط الملاحة لدينا هنا.

194
00:14:24,300 --> 00:14:27,910
اسمحوا لي أن أضيف في زر هناك،

195
00:14:27,910 --> 00:14:33,840
والتي سوف تكون بمثابة زر تبديل لإظهار وإخفاء

196
00:14:33,840 --> 00:14:42,225
الروابط بلدي من شريط التنقل الخاص بي عندما يتم عرضها على شاشات ذكية وصغيرة اضافية.

197
00:14:42,225 --> 00:14:43,615
لذلك، لإضافة هناك،

198
00:14:43,615 --> 00:14:47,645
اسمحوا لي أن أضيف في زر وتطبيق بعض الطبقات على هذا الزر.

199
00:14:47,645 --> 00:14:54,285
سنقوم بمناقشة المزيد حول الأزرار في bootstrap في الدرس التالي.

200
00:14:54,285 --> 00:14:57,515
ولكن لإضافة زر في bootstrap،

201
00:14:57,515 --> 00:15:03,770
يمكنك تطبيق الفئة لهذا الزر الخاص كـ navbar-toggler.

202
00:15:04,450 --> 00:15:07,420
إذا، هذا هو نافبار تبديل.

203
00:15:07,420 --> 00:15:09,400
لذلك، كما يوحي الاسم،

204
00:15:09,400 --> 00:15:14,970
لقد بدأت بالفعل في فهم ما سيفعله هذا الزر في هذه الحالة.

205
00:15:14,970 --> 00:15:22,650
ثم أود أن أضيف نوع كزر للإشارة إلى أن هذا يعمل كزر.

206
00:15:22,650 --> 00:15:31,360
ثم تبديل البيانات كما الانهيار.

207
00:15:31,360 --> 00:15:36,070
الآن، هذه السمة تبديل البيانات التي سترى هنا هي في الواقع

208
00:15:36,070 --> 00:15:42,400
استخدام مكون جافا سكريبت في bootstrap.

209
00:15:42,400 --> 00:15:48,100
نحن ذاهبون للنظر في هذا شريط الواصلات البيانات نوع من السمات أكثر في الوحدة التالية،

210
00:15:48,100 --> 00:15:50,875
حيث سننظر في مكونات جافا سكريبت bootstraps.

211
00:15:50,875 --> 00:15:55,225
يتطلب شريط التنقل أحد مكونات جافا سكريبت تلك لتكون قادرة

212
00:15:55,225 --> 00:15:59,980
على تبديل وإيقاف الروابط الخاصة بي في شريط التنقل الخاص بي، لذلك،

213
00:15:59,980 --> 00:16:03,825
هذا هو السبب في أنني قدمت بسرعة هذا المفهوم هنا،

214
00:16:03,825 --> 00:16:05,800
لكننا سنعود لفحص

215
00:16:05,800 --> 00:16:12,020
مكونات جافا سكريبت هذه في الوحدة التالية.

216
00:16:12,020 --> 00:16:14,420
لذا، تنهار تبديل البيانات

217
00:16:14,420 --> 00:16:24,610
ثم هدف البيانات كـ #Navbar.

218
00:16:24,610 --> 00:16:30,660
الآن، أنا ذاهب لتقديم ديف آخر مع معرف كما نافبار.

219
00:16:30,660 --> 00:16:33,470
لذلك، عندما أحدد تاريخًا أو هدفًا #Navbar،

220
00:16:33,470 --> 00:16:38,560
يشير ذلك إلى معرف هذا العنصر الآخر الذي سيكون

221
00:16:38,560 --> 00:16:44,025
هدفًا لهذا الزر المعين هنا.

222
00:16:44,025 --> 00:16:47,625
لذا، هذا هو الجزء الذي أضفه إلى الأسفل.

223
00:16:47,625 --> 00:16:52,340
وأيضا، أريد الزر لعرض شيء هنا.

224
00:16:52,340 --> 00:16:56,970
وعادة، عندما ترى هذا النوع من الأزرار في مواقع الجوال،

225
00:16:56,970 --> 00:16:59,730
فإنه يحتوي على خطوط مجانية هناك،

226
00:16:59,730 --> 00:17:04,310
وهذا ما يسمى عادة باسم رمز تبديل NavBar-Toggle.

227
00:17:04,310 --> 00:17:11,630
لذلك، سأقوم بتضمين رمز خاص

228
00:17:11,630 --> 00:17:19,660
يتم تضمينه في bootstrap، يسمى رمز navbar-toggler.

229
00:17:19,660 --> 00:17:23,395
لذا، إذا قمت بتطبيق هذه الفئة على امتداد العلامة،

230
00:17:23,395 --> 00:17:29,050
فإن ذلك سيعرض رمز navbar-toggler إلى الزر الخاص بي هنا.

231
00:17:29,410 --> 00:17:32,130
لذلك، أن يقدم زر.

232
00:17:32,130 --> 00:17:34,980
سننظر إلى كيف يبدو هذا في فترة قصيرة

233
00:17:34,980 --> 00:17:36,780
الآن، عندما أنقر على هذا الزر،

234
00:17:36,780 --> 00:17:41,140
أريد أن أكون قادرًا على إظهار وإخفاء هذه الروابط.

235
00:17:41,140 --> 00:17:43,140
لتمكينني من القيام بذلك،

236
00:17:43,140 --> 00:17:50,780
ما سأقوم به هو إحاطة هذا ul مع div هنا.

237
00:17:51,070 --> 00:17:57,585
لذا، سأدخل وأقدم div حول هذا ul.

238
00:17:57,585 --> 00:17:59,280
وإلى هذا div،

239
00:17:59,280 --> 00:18:04,850
سأقوم بتطبيق الفصل على أنه انهيار،

240
00:18:04,850 --> 00:18:15,895
ثم انهيار navbar، ثم أعطيه معرفًا كـ Navbar.

241
00:18:15,895 --> 00:18:20,115
الآن، أنت بدأت ترى الارتباط بين

242
00:18:20,115 --> 00:18:26,300
هذه الفئات والمعرف وما أعلنته في تبديل البيانات وهدف البيانات.

243
00:18:26,300 --> 00:18:32,750
لذا، هنا هدف البيانات الذي أحدده كـ #Navbar وبالتالي فإن المعرف المعطى لهذا div هو navbar.

244
00:18:32,750 --> 00:18:35,640
وأحدد تبديل البيانات كما الانهيار.

245
00:18:35,640 --> 00:18:40,440
طي هو واحد من مكونات جافا سكريبت التمهيد،

246
00:18:40,440 --> 00:18:43,955
والتي سوف ننظر في بمزيد من التفصيل في الوحدة التالية.

247
00:18:43,955 --> 00:18:50,780
لذلك، أرفق هذا داخل ديف للشاشات الصغيرة والإضافية،

248
00:18:50,780 --> 00:18:54,860
وهذا سيكون مخفيا افتراضيا،

249
00:18:54,860 --> 00:18:56,520
ولكن عندما أنقر على

250
00:18:56,520 --> 00:19:01,445
الزر، سيتم الكشف عن محتويات هذا ديف على الشاشة.

251
00:19:01,445 --> 00:19:09,540
اسمحوا لي أيضا أن أضيف السيد السيارات إلى فئة navarbar العلامة التجارية هناك بحيث

252
00:19:09,540 --> 00:19:18,775
أقدم تلقائيا هامش حق كاف لهذه العلامة التجارية navbar.

253
00:19:18,775 --> 00:19:22,495
الآن، دعونا نذهب ونلقي نظرة على هذا في متصفحنا.

254
00:19:22,495 --> 00:19:25,270
الذهاب إلى المتصفح، يمكنك الآن أن ترى كيف

255
00:19:25,270 --> 00:19:31,370
يتم انهار شريط التنقل الخاص بي على أحجام صغيرة وإضافية للشاشة.

256
00:19:31,370 --> 00:19:35,925
ولاحظ هذا الزر على الجانب الأيسر.

257
00:19:35,925 --> 00:19:38,005
عند النقر على الزر،

258
00:19:38,005 --> 00:19:43,805
يتم عرض الروابط الموجودة في شريط التنقل الخاص بي وإخفائها.

259
00:19:43,805 --> 00:19:51,360
هذا هو السلوك الذي أريده لتنفيذ استجابة من شريط التنقل الخاص بي.

260
00:19:51,360 --> 00:19:55,375
إذا قمت بالتبديل إلى

261
00:19:55,375 --> 00:20:00,925
شاشة عادية أكبر، يتم عرض شريط التنقل بالكامل بما في ذلك الروابط.

262
00:20:00,925 --> 00:20:07,190
ولكن عندما أعرض نفس الشيء على شاشة أصغر مثل هذا،

263
00:20:07,190 --> 00:20:10,430
ثم يتم إخفاء روابط شريط التنقل وراء

264
00:20:10,430 --> 00:20:15,020
هذا الزر ومن ثم سيتم تبديل وإيقاف تشغيله عن طريق النقر على هذا الزر.

265
00:20:15,020 --> 00:20:18,190
لذلك هذا هو السلوك المتجاوب الذي يمكنك

266
00:20:18,190 --> 00:20:22,870
إنشاؤه في شريط التنقل الخاص بك على موقع الويب الخاص بك.

267
00:20:22,870 --> 00:20:27,285
الآن بعد أن أكملنا شريط التنقل على صفحة index.HTML الخاصة بي،

268
00:20:27,285 --> 00:20:32,015
أريد أن أكون قادرًا على تقديم نفس شريط التنقل إلى صفحة aboutus.HTML.

269
00:20:32,015 --> 00:20:35,540
قبل أن نصل إلى هناك، دعنا نذهب إلى التذييل هنا.

270
00:20:35,540 --> 00:20:38,250
ثم لاحظت أنه في التذييل،

271
00:20:38,250 --> 00:20:39,870
لدينا هذه الروابط.

272
00:20:39,870 --> 00:20:43,265
أريد أن أكون قادرا على تحديث هذا الرابط أيضا للإشارة

273
00:20:43,265 --> 00:20:48,450
إلى aboutus.HTML حتى أنه حتى من خلال النقر على الرابط في تذييل بلدي،

274
00:20:48,450 --> 00:20:51,090
وأود أن لا تزال تذهب إلى الصفحة حول.

275
00:20:51,090 --> 00:20:53,780
الآن، بالعودة

276
00:20:53,780 --> 00:21:02,320
إلى هنا، ما سأفعله هو ببساطة نسخ هذا الرمز من شريط التنقل هذا من هنا.

277
00:21:02,870 --> 00:21:13,520
ثم انتقل إلى صفحة aboutus.HTML ثم قم بلصق ذلك في صفحة aboutus.HTML الخاصة بي.

278
00:21:13,520 --> 00:21:17,145
ليس هذا فقط، أنا بحاجة إلى القيام ببعض التعديل على هذا،

279
00:21:17,145 --> 00:21:20,750
لأن هذا هو الآن في صفحة aboutus.HTML.

280
00:21:20,750 --> 00:21:25,105
لذا من الواضح أن هناك بعض الأشياء التي أحتاج إلى تحديثها.

281
00:21:25,105 --> 00:21:29,875
أولاً وقبل كل شيء، يجب

282
00:21:29,875 --> 00:21:35,485
الآن تحديث علامة navbar هذه التي يجب أن تقودني إلى الصفحة الرئيسية الخاصة بي كـ index.HTML هنا.

283
00:21:35,485 --> 00:21:43,045
ثم، عنصر القائمة هنا الآن الثانية الصفحة الرئيسية مرة أخرى،

284
00:21:43,045 --> 00:21:51,165
أريد تحديث ذلك إلى index.HTML هناك ثم الرابط الثاني إلى حول،

285
00:21:51,165 --> 00:21:53,610
لأن هذه هي صفحة aboutus.HTML،

286
00:21:53,610 --> 00:21:58,480
وأنا ذاهب لإعادته إلى هذا التجزئة هناك وبعد ذلك سوف إزالة

287
00:21:58,480 --> 00:22:06,045
الطبقة النشطة من الأول ثم قم بتطبيق الفئة النشطة على العنصر الثاني،

288
00:22:06,045 --> 00:22:11,520
لأن هذه هي الصفحة حول وهكذا يجب أن تكون تلك التي يتم تمييزها.

289
00:22:11,520 --> 00:22:16,705
مرة أخرى، انتقل إلى تذييل الصفحة حول.

290
00:22:16,705 --> 00:22:22,870
في التذييل، سأفعل نفس التحديثات على الروابط هنا حتى

291
00:22:22,870 --> 00:22:29,525
الصفحة الرئيسية يجب أن يقودني إلى index.HTML ثم اسمحوا لي حفظ التغييرات.

292
00:22:29,525 --> 00:22:34,740
حتى الآن يتم تحديث الصفحة الخاصة بي بشكل صحيح.

293
00:22:34,740 --> 00:22:36,390
الذهاب إلى المتصفح،

294
00:22:36,390 --> 00:22:41,220
يمكنك الآن أن ترى أنني على الصفحة الرئيسية الخاصة بي ثم عند النقر على الصفحة حول،

295
00:22:41,220 --> 00:22:42,795
سأذهب إلى صفحة حول.

296
00:22:42,795 --> 00:22:48,710
لاحظ كيف يتم عرض شريط التنقل نفسه في About Page،

297
00:22:48,710 --> 00:22:51,090
لذلك عليك أن يتم تمييزها لأنني

298
00:22:51,090 --> 00:22:53,660
طبقت الفصل النشط على ذلك، وبعد ذلك يمكنني

299
00:22:53,660 --> 00:22:58,770
العودة إلى صفحتي الرئيسية إما بالنقر على العلامة التجارية narvar-أو الصفحة الرئيسية.

300
00:22:58,770 --> 00:23:02,115
لذلك دعونا نضغط على العلامة التجارية نارفار-ونحن مرة أخرى في الصفحة

301
00:23:02,115 --> 00:23:06,210
الرئيسية أو الصفحة الرئيسية أو index.HTML.

302
00:23:06,210 --> 00:23:13,180
لذلك، الآن يتم إعداد التنقل بشكل صحيح في كل من الصفحة الرئيسية وفي صفحة حول.

303
00:23:13,180 --> 00:23:17,810
اثنين من الأشياء الإضافية التي أنا ذاهب إلى القيام به هو تطبيق إذا كنت ترى

304
00:23:17,810 --> 00:23:23,480
انها الطبقة التي يمكنني تغيير لون نافبار بلدي

305
00:23:23,480 --> 00:23:26,340
وأيضا أود أن أضيف

306
00:23:26,340 --> 00:23:32,595
فتات الخبز إلى هذه الصفحة، وحتى أن فتات الخبز سوف تعطيني أيضا طريقة أخرى

307
00:23:32,595 --> 00:23:36,950
للتنقل مرة أخرى إلى الصفحة الرئيسية الخاصة بي وأيضا سوف تشير

308
00:23:36,950 --> 00:23:42,170
إلى التسلسل الهرمي في موقع الويب الخاص بي حيث أنا في الوقت الحالي.

309
00:23:42,170 --> 00:23:45,505
لذلك دعونا نفعل هاتين الخطوتين بعد ذلك.

310
00:23:45,505 --> 00:23:49,835
العودة إلى هذا المحرر في styles.css.

311
00:23:49,835 --> 00:23:52,765
أنا ذاهب لإضافة في اثنين من أكثر الطبقات هنا.

312
00:23:52,765 --> 00:23:58,030
لاحظت أن شريط الملاحة الخاص بي كان يخفي جزء من الجامبوترون.

313
00:23:58,030 --> 00:23:59,590
من أجل تجنب ذلك،

314
00:23:59,590 --> 00:24:01,705
ما سأفعله هو لجسدي،

315
00:24:01,705 --> 00:24:06,110
سأعطي حشوة من 50 بكسل على

316
00:24:06,110 --> 00:24:11,505
الجزء العلوي بحيث يتم ترك تلك 50 بكسل لشريط التنقل لتغطية.

317
00:24:11,505 --> 00:24:14,580
كلما كنت تستخدم شريط التنقل العلوي الثابت

318
00:24:14,580 --> 00:24:17,580
، من الجيد إعطاء هذا الحشو إلى نص

319
00:24:17,580 --> 00:24:20,270
صفحة الويب الخاصة بك بحيث لا يغطي التنقل

320
00:24:20,270 --> 00:24:24,435
العنصر العلوي في نص صفحة الويب الخاصة بك.

321
00:24:24,435 --> 00:24:29,675
لذلك، ما تبقى منها أنا ذاهب إلى ترك

322
00:24:29,675 --> 00:24:39,155
الصفر بكسل وأيضا مؤشر z لجسمي كما صفر.

323
00:24:39,155 --> 00:24:43,485
من معرفتك بـ CSS، تفهم ما يفعله مؤشر z

324
00:24:43,485 --> 00:24:48,865
والقادم الذي سأقوم به هو أنني سأقوم

325
00:24:48,865 --> 00:24:55,580
بتحميل فئة navbar-dark بإضافة لون واحد آخر

326
00:24:55,580 --> 00:24:59,750
لفئة navbar واللون الذي

327
00:24:59,750 --> 00:25:06,490
سأختار هو 512DA8.

328
00:25:06,490 --> 00:25:15,275
هذا هو اللون الأرجواني الداكن الذي يبدو جيدا جدا في موقع الويب الخاص بي. في

329
00:25:15,275 --> 00:25:21,505
الواقع، إذا كان لديك اهتمام حيث وجدت هذه الألوان يمكنك زيارة

330
00:25:21,505 --> 00:25:29,665
www.android.com ثم البحث عن وثائقها لتصميم المواد وهناك،

331
00:25:29,665 --> 00:25:33,325
لديهم اقتراحات لكيفية استخدام الألوان

332
00:25:33,325 --> 00:25:38,965
في تطبيق الروبوت الخاص بك ولكن نفس الشيء ينطبق حتى على موقع ويب،

333
00:25:38,965 --> 00:25:46,675
بحيث حيث ذهبت واختيار هذه الألوان لاستخدامها في موقع الويب الخاص بي.

334
00:25:46,675 --> 00:25:51,060
لذلك، تطبيق هذا، والآن عندما أفعل ذلك، لا

335
00:25:51,060 --> 00:25:55,740
بد لي من العودة إلى صفحة index.HTML الخاصة بي ومن

336
00:25:55,740 --> 00:26:01,095
ثم من نافبار يجب إزالة هذا بغ الأساسي.

337
00:26:01,095 --> 00:26:09,320
خلاف ذلك، لن يتم تطبيق اللون الذي اقترحته في CSS على هذا.

338
00:26:09,320 --> 00:26:14,185
وبالمثل، انتقل إلى صفحة aboutus.HTML ثم قم بالتمرير

339
00:26:14,185 --> 00:26:20,850
إلى شريط التنقل ثم قم بإزالة bg الأساسي من ذلك أيضًا.

340
00:26:21,610 --> 00:26:26,580
الآن، بينما أنا في صفحة aboutus.HTML،

341
00:26:26,580 --> 00:26:34,080
اسمحوا لي أن أعرض فتات الخبز في الحاوية الخاصة بي،

342
00:26:34,080 --> 00:26:36,310
الصف الأول من الحاوية الخاصة بي هناك.

343
00:26:36,310 --> 00:26:39,405
لذلك هذا هو المكان الذي كان عنوان حول لنا هناك،

344
00:26:39,405 --> 00:26:45,120
لذلك هناك أنا ذاهب للذهاب في وإدخال رأ.

345
00:26:45,260 --> 00:26:53,560
أنا فقط باستخدام علامة رأ كوسيلة لإدخال فتات الخبز.

346
00:26:53,560 --> 00:26:59,025
يمكنك استخدام حتى div لهذا وسوف لا تزال تعمل على ما يرام.

347
00:26:59,025 --> 00:27:06,050
يحدث ذلك فقط أن المثال على وثائق bootstraps تستخدم رأ لذلك،

348
00:27:06,050 --> 00:27:14,030
أنا التمسك مع ذلك حتى ديف بسيط سوف تعمل أيضا بشكل جيد هنا.

349
00:27:14,030 --> 00:27:20,895
لذلك، أقول رأ الطبقة كول-12 فتات الخبز.

350
00:27:20,895 --> 00:27:23,200
لذلك طبقت فئات فتات الخبز

351
00:27:23,200 --> 00:27:26,825
وليس معنى col-12 الذي امتدت الشاشة بأكملها.

352
00:27:26,825 --> 00:27:33,500
وداخل هناك، وأنا ذاهب للذهاب في وإضافة اثنين من عناصر القائمة.

353
00:27:34,250 --> 00:27:39,625
الآن ترى لماذا استخدام رأ مفيد هنا,

354
00:27:39,625 --> 00:27:48,565
لأنني يمكن استخدام عناصر القائمة لوصف البند فتات الخبز.

355
00:27:48,565 --> 00:27:50,725
لذلك، عنصر فتات الخبز هنا،

356
00:27:50,725 --> 00:27:55,020
لذلك أنا تضمين عنصر واحد فتات الخبز ثم داخل هناك سوف تستخدم

357
00:27:55,020 --> 00:28:02,380
علامة A لتحديد رابط مرة أخرى إلى الصفحة الرئيسية الخاصة بي.

358
00:28:02,380 --> 00:28:07,275
لذلك أقول، «A» ثم إلى هذا A،

359
00:28:07,275 --> 00:28:12,010
أعطي href كـ index.HTML ثم قم

360
00:28:12,010 --> 00:28:17,815
بتضمين ذلك في أول فتات الخبز الخاصة بي ثم بعد ذلك،

361
00:28:17,815 --> 00:28:25,660
فإن العنصر التالي الذي سأقوم بتضمينه هو عنصر

362
00:28:25,660 --> 00:28:34,700
قائمة آخر وعنصر القائمة الثاني سأقوم بتطبيق الفصل كعنصر فتات الخبز ونشط.

363
00:28:34,700 --> 00:28:40,900
لذلك لاحظ استخدام الطبقة النشطة هنا ثم داخل هناك سأقول «

364
00:28:40,900 --> 00:28:45,090
عنا» أنا لست بحاجة إلى رابط هنا لأنني بالفعل على الصفحة

365
00:28:45,090 --> 00:28:49,425
بحيث لا تحتاج إلى تضمين لهذا البند القائمة.

366
00:28:49,425 --> 00:28:51,010
دعونا حفظ التغييرات،

367
00:28:51,010 --> 00:28:54,910
حتى تتمكن من رؤية كيف تم إدخال فتات الخبز في هذه

368
00:28:54,910 --> 00:28:59,555
الصفحة بالذات حول لنا هنا.

369
00:28:59,555 --> 00:29:04,410
دعونا نذهب ونلقي نظرة على صفحة الويب الناتجة.

370
00:29:04,410 --> 00:29:11,320
الذهاب إلى صفحة الويب الخاصة بي، يمكنك الآن أن ترى أن لون شريط التنقل

371
00:29:11,320 --> 00:29:14,310
قد تغير الآن إلى اللون الأرجواني الداكن الذي يتم تقديمه

372
00:29:14,310 --> 00:29:17,900
من خلال CSS وهذا يبدو لطيفًا على الشاشة هنا.

373
00:29:17,900 --> 00:29:20,780
الأرجواني الداكن، تليها الأرجواني أخف وزنا ثم في

374
00:29:20,780 --> 00:29:24,300
الجزء السفلي حتى أكثر أخف وزنا الأرجواني لتذييل بلدي.

375
00:29:24,300 --> 00:29:27,240
حسنا، أنا لست مصمم،

376
00:29:27,240 --> 00:29:33,875
ولكن هذا هو أفضل ما يمكن أن يأتي مع من حيث إضافة قريبة من المواقع.

377
00:29:33,875 --> 00:29:38,660
كما تعلمون من التاريخ الرجال هم عمياء اللون.

378
00:29:38,660 --> 00:29:42,750
لذلك لدينا طعم ضعيف جدا في الألوان.

379
00:29:42,750 --> 00:29:48,065
إذا كنت متزوجة زوجتك ستذكرك بذلك بالتأكيد

380
00:29:48,065 --> 00:29:52,680
دعونا نذهب إلى صفحة حول ونرى كيف يبدو.

381
00:29:52,680 --> 00:29:55,960
لذلك هذه هي الصفحة حول وفي الصفحة حول يمكنك أن

382
00:29:55,960 --> 00:29:59,520
ترى شريط التنقل مع اللون الصحيح

383
00:29:59,520 --> 00:30:06,925
هناك ولاحظ فتات الخبز المدرجة في نبذة عنا هنا.

384
00:30:06,925 --> 00:30:10,910
حتى تتمكن من رؤية الصفحة الرئيسية التي تقودك إلى صفحة الفهرس

385
00:30:10,910 --> 00:30:15,020
ثم حول لنا كما رأيت قمنا بتطبيق رابط

386
00:30:15,020 --> 00:30:16,655
نشط، فئة نشطة لهذا واحد.

387
00:30:16,655 --> 00:30:19,500
لذا هكذا يتم عرض «نبذة عنا» و «الصفحة الرئيسية».

388
00:30:19,500 --> 00:30:23,770
لذا، هذا هو نمط فتات الخبز الافتراضي المستخدم

389
00:30:23,770 --> 00:30:29,450
في bootstrap وإذا قمت بالنقر على الصفحة الرئيسية، سأعود إلى صفحتي الرئيسية.

390
00:30:29,450 --> 00:30:35,585
مع هذا نكمل هذا التمرين على نافبار وفتات الخبز.

391
00:30:35,585 --> 00:30:42,640
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة «نافبار و بريدكامبس».