1
00:00:03,730 --> 00:00:06,755
في المحاضرات السابقة،

2
00:00:06,755 --> 00:00:12,055
تعلمنا عن التصميم المتجاوب ونظام الشبكة bootstrap.

3
00:00:12,055 --> 00:00:18,050
لقد رأينا كيف تسمح لنا شبكة bootstrap بتصميم مواقع ويب متجاوبة.

4
00:00:18,050 --> 00:00:21,890
حان الوقت لننتقل إلى التمرين التالي

5
00:00:21,890 --> 00:00:27,755
سنبدأ في العمل مع صفحة html الفهرس التي أنشأناها في

6
00:00:27,755 --> 00:00:34,945
ممارستنا السابقة وتطبيق فئات الشبكة bootstrap لجعلها تستجيب.

7
00:00:34,945 --> 00:00:40,760
نلقي نظرة سريعة على صفحة الويب الخاصة بنا في المتصفح نرى

8
00:00:40,760 --> 00:00:46,415
أنه لا يزال رهيبا على الرغم من أن الخطوط قد تحسنت قليلا،

9
00:00:46,415 --> 00:00:50,645
ونحن الآن نستخدم الخطوط الافتراضية التمهيد.

10
00:00:50,645 --> 00:01:00,930
دعونا الآن نحاول تطبيق فئات الشبكة بوتستراب إلى index.html لتحسين تخطيطها.

11
00:01:00,930 --> 00:01:03,805
الذهاب إلى صفحة index.html،

12
00:01:03,805 --> 00:01:07,960
اسمحوا لي أن ألفت انتباهكم بسرعة إلى هذا الخط بالذات في

13
00:01:07,960 --> 00:01:12,805
صفحة index.html التي أدرجناها بالفعل في التمرين السابق.

14
00:01:12,805 --> 00:01:14,660
كنت قد أشرت إلى هذا الخط،

15
00:01:14,660 --> 00:01:17,065
ثم كنا نتحدث عن نظام شبكة التمهيد.

16
00:01:17,065 --> 00:01:23,895
حتى هنا، نرى أننا حددنا العلامات الوصفية مع منفذ عرض والمحتوى،

17
00:01:23,895 --> 00:01:26,090
والعرض كعرض الجهاز،

18
00:01:26,090 --> 00:01:29,205
والمقياس الأولي واحد ويتقلص لتناسب لا.

19
00:01:29,205 --> 00:01:33,210
لذلك هذه العلامة الوصفية تسمح لنا لجعل

20
00:01:33,210 --> 00:01:39,225
صفحة الويب لدينا استجابة من خلال النظر إلى حرف منفذ العرض.

21
00:01:39,225 --> 00:01:42,630
المضي قدما إلى الخطوة التالية.

22
00:01:42,630 --> 00:01:49,080
سنقوم بالتراجع إلى نص صفحة index.html هذه،

23
00:01:49,080 --> 00:01:54,570
ثم البحث عن div الأول الذي يأتي أسفل علامة الرأس هناك،

24
00:01:54,570 --> 00:02:00,480
إلى هذا div ستقوم بتطبيق حاوية الفئة.

25
00:02:00,480 --> 00:02:05,550
لقد تعلمنا بالفعل عن فئة الحاويات في المحاضرة السابقة.

26
00:02:05,550 --> 00:02:09,125
لذلك بمجرد أن نطبق فئة الحاوية،

27
00:02:09,125 --> 00:02:12,410
ثم نلقي نظرة على صفحة الويب الخاصة بنا، نرى

28
00:02:12,410 --> 00:02:16,620
أن جزءًا من المحتوى هناك قد تكيف بالفعل.

29
00:02:16,620 --> 00:02:23,080
انظر إلى الفرق بين المحتوى هنا والمحتوى أدناه هنا.

30
00:02:23,080 --> 00:02:25,370
الآن هذا المحتوى أسفل هنا،

31
00:02:25,370 --> 00:02:30,960
هو في تذييل صفحة index.html لدينا وهذا المحتوى هو في رأس.

32
00:02:30,960 --> 00:02:36,890
ولكن هذا المحتوى في الوسط هو المحتوى الفعلي لصفحة الويب الخاصة بنا،

33
00:02:36,890 --> 00:02:40,785
وهذا هو داخل div الذي نطبق عليه الحاوية.

34
00:02:40,785 --> 00:02:47,480
لذا، عند تطبيق فئة الحاوية، يمكنك أن ترى على الفور أن عرض الصفحة

35
00:02:47,480 --> 00:02:50,700
التي يتم وضع محتوياتنا فيها قد

36
00:02:50,700 --> 00:02:54,660
تقلص الآن، ثم لديك بعض المساحة الإضافية المتبقية على كلا الجانبين،

37
00:02:54,660 --> 00:02:58,935
لذلك مع عرض الحاوية هذا حاوية ذات حجم ثابت،

38
00:02:58,935 --> 00:03:02,330
سيتم إصلاح المحتوى الخاص بنا إلى هذا عرض معين

39
00:03:02,330 --> 00:03:07,425
على الشاشة ترك هامش كاف على كلا الجانبين كمساحة بيضاء.

40
00:03:07,425 --> 00:03:13,315
دعونا نطبق نفس فئة الحاوية على كل من الرأس والتذييل أيضًا،

41
00:03:13,315 --> 00:03:17,355
ثم نرى كيف يتغير المحتوى.

42
00:03:17,355 --> 00:03:20,200
بالعودة إلى صفحة الويب الخاصة بنا،

43
00:03:20,200 --> 00:03:24,940
ما سأفعله الآن هو المحتوى الداخلي هنا،

44
00:03:24,940 --> 00:03:28,165
div الداخلي داخل الحاوية،

45
00:03:28,165 --> 00:03:34,110
سأقوم بتطبيق الفصل كفئة الصف هنا،

46
00:03:34,110 --> 00:03:35,885
إلى هذا الأول،

47
00:03:35,885 --> 00:03:38,125
وسأقوم ببساطة بنسخ هذا.

48
00:03:38,125 --> 00:03:44,675
سأقوم بتطبيق نفس الشيء على div الثاني هنا الذي يصطف إلى div،

49
00:03:44,675 --> 00:03:49,230
وكذلك قم بالتمرير لأسفل ثم إلى div الثالث هنا،

50
00:03:49,230 --> 00:03:51,375
أقوم أيضًا بتطبيق فئة الصف هنا.

51
00:03:51,375 --> 00:03:56,110
حتى الآن، يتم

52
00:03:56,110 --> 00:03:57,950
تقسيم المحتوى داخل هذه الطبقة الحاوية الخارجية، الآن إلى ثلاثة صفوف،

53
00:03:57,950 --> 00:04:01,395
لذلك كل ما هو داخل هنا سيكون صف واحد

54
00:04:01,395 --> 00:04:02,640
، مهما كان داخل هنا،

55
00:04:02,640 --> 00:04:06,150
سيكون الصف الثاني والثاني واحد هنا سيكون الصف الثالث.

56
00:04:06,150 --> 00:04:10,380
سنقوم لاحقا بتطبيق فئات العمود على هذا.

57
00:04:10,380 --> 00:04:17,695
دعونا ننتقل الآن إلى رأس في الجسم index.html لدينا.

58
00:04:17,695 --> 00:04:23,970
وإلى الرأس، سأقوم بتطبيق فئة تسمى jumbotron.

59
00:04:23,970 --> 00:04:28,265
يسمح لك مكون jumbotron بتجميع

60
00:04:28,265 --> 00:04:33,805
المحتوى داخل jumbotron من بقية الصفحة.

61
00:04:33,805 --> 00:04:39,035
سوف نرى النتيجة في فترة قصيرة عندما كنا في صفحة الويب الناتجة.

62
00:04:39,035 --> 00:04:42,215
الآن، إلى div داخل هذا الرأس،

63
00:04:42,215 --> 00:04:46,360
سأقوم بتطبيق الفئة كحاوية،

64
00:04:46,360 --> 00:04:49,410
بحيث يتم

65
00:04:49,410 --> 00:04:52,945
تقييد أي شيء داخل المحتوى الآن بعرض الحاوية هناك.

66
00:04:52,945 --> 00:04:57,670
وبالمثل، الانتقال إلى التذييل هنا،

67
00:04:58,780 --> 00:05:01,650
في التذييل أيضًا،

68
00:05:01,650 --> 00:05:04,720
أول div داخل التذييل،

69
00:05:04,720 --> 00:05:09,360
سأقوم بتطبيق الفصل كحاوية.

70
00:05:09,360 --> 00:05:13,055
و div داخل هناك،

71
00:05:13,055 --> 00:05:16,755
سأقوم بتطبيق الفصل كصف هناك،

72
00:05:16,755 --> 00:05:19,735
إلى div داخل هناك.

73
00:05:19,735 --> 00:05:25,225
لذلك هذا ديف سوف يأخذنا على طول الطريق إلى هذا ديف معين هنا.

74
00:05:25,225 --> 00:05:29,105
ثم div التالي أيضًا أقل من ذلك مباشرة،

75
00:05:29,105 --> 00:05:31,820
سأطبق الفصل كصف.

76
00:05:31,820 --> 00:05:35,380
حتى الآن يحتوي التذييل الخاص بي على صفين هنا،

77
00:05:35,380 --> 00:05:38,520
سنقوم بتصميم المحتوى باستخدام العمود،

78
00:05:38,520 --> 00:05:40,110
والطبقات في فترة قصيرة.

79
00:05:40,110 --> 00:05:42,365
الذهاب إلى الرأس أيضا،

80
00:05:42,365 --> 00:05:51,500
وسوف تطبيق فئة الصف إلى div الثاني داخل div الحاوية هنا.

81
00:05:51,500 --> 00:05:54,920
لذلك هذا div الذي يتطابق مع هذا،

82
00:05:54,920 --> 00:05:58,605
سيكون صف واحد في الرأس.

83
00:05:58,605 --> 00:06:02,400
دعونا نلقي نظرة على صفحة الويب الناتجة لدينا.

84
00:06:02,400 --> 00:06:04,365
الذهاب إلى صفحة الويب الخاصة بنا،

85
00:06:04,365 --> 00:06:09,300
يمكنك الآن أن ترى أن محتوى الرأس يتم الآن تعيين بعيدا

86
00:06:09,300 --> 00:06:14,935
عن بقية داخل هذا المربع الرمادي في الأعلى هنا.

87
00:06:14,935 --> 00:06:22,735
ولكن المحتوى نفسه اصطف الآن مع المحتوى أدناه هنا.

88
00:06:22,735 --> 00:06:25,685
الآن، هذا هو نتيجة استخدام الحاوية.

89
00:06:25,685 --> 00:06:27,550
الانتقال إلى التذييل،

90
00:06:27,550 --> 00:06:32,635
يمكنك الآن أن ترى أن محتوى التذييل هو أيضا اصطف الآن داخل الحاوية.

91
00:06:32,635 --> 00:06:36,800
ولكن الصفحة لا تزال تبدو غير كبيرة،

92
00:06:36,800 --> 00:06:44,705
سنقوم الآن بتطبيق فئات العمود على divs الداخلية الآن.

93
00:06:44,705 --> 00:06:48,665
بالعودة إلى صفحة index.html،

94
00:06:48,665 --> 00:06:51,865
سنبدأ الآن في تطبيق فئات الأعمدة.

95
00:06:51,865 --> 00:06:58,365
لذا، فالذهاب إلى الرأس، إلى div الداخلي الثاني داخل jumbotron هنا،

96
00:06:58,365 --> 00:07:06,230
دعني أطبق فصلاً كعمود 12، عمود sm-6.

97
00:07:06,230 --> 00:07:09,960
لذا،

98
00:07:09,960 --> 00:07:15,525
سيشغل المحتوى في هذا div الأول الصف بأكمله لأحجام الشاشة الصغيرة الإضافية،

99
00:07:15,525 --> 00:07:18,770
ثم سيشغل نصف الصف لهذا السبب العمود

100
00:07:18,770 --> 00:07:24,235
sm-6 لأحجام الشاشة الصغيرة إلى الكبيرة جدًا.

101
00:07:24,235 --> 00:07:26,480
الآن، وبالمثل بالنسبة إلى div الثاني هنا، على

102
00:07:26,480 --> 00:07:28,715
الرغم من أنه لا يحتوي على أي محتوى هناك،

103
00:07:28,715 --> 00:07:37,840
سأقوم بتعريف فئات العمود هنا كعمود 12 ثم عمود sm.

104
00:07:37,840 --> 00:07:40,990
لذلك، لاحظ أنه هنا من خلال تحديد العمود 12،

105
00:07:40,990 --> 00:07:45,270
أنا أذكر صراحة أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،

106
00:07:45,270 --> 00:07:49,860
سيتم تكديس المحتوى الموجود داخل هذا div أسفل المحتوى حول هنا.

107
00:07:49,860 --> 00:07:54,150
ثم بالنسبة لأحجام الشاشة الصغيرة إلى الكبيرة جدًا،

108
00:07:54,150 --> 00:07:59,270
سيشغل هذا المحتوى الكمية المتبقية من

109
00:07:59,270 --> 00:08:04,925
الأعمدة في الصف لأحجام الشاشة الصغيرة إلى الكبيرة جدًا.

110
00:08:04,925 --> 00:08:09,255
حتى هنا في هذه الحالة منذ ستة أعمدة مشغولة من قبل هذا المحتوى،

111
00:08:09,255 --> 00:08:12,745
وهذا سوف تحصل على ستة أعمدة المتبقية هناك.

112
00:08:12,745 --> 00:08:18,030
الانتقال إلى صفوف المحتوى هنا،

113
00:08:18,030 --> 00:08:20,110
للمحتوى هنا،

114
00:08:20,110 --> 00:08:22,860
لذلك لهذا المحتوى الأول،

115
00:08:22,860 --> 00:08:24,590
وهو تسمية هنا،

116
00:08:24,590 --> 00:08:29,240
سأقوم بتطبيق الطبقات كعمود 12،

117
00:08:29,240 --> 00:08:34,985
العمود سم-4، العمود مد-3.

118
00:08:34,985 --> 00:08:39,770
لذلك، مشيرا إلى أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،

119
00:08:39,770 --> 00:08:42,650
فإن هذا سيشغل الصف بأكمله، بالنسبة للصغيرة،

120
00:08:42,650 --> 00:08:44,160
فإنه سيشغل أعمدة كاملة،

121
00:08:44,160 --> 00:08:46,585
ومن ثم بالنسبة للمتوسط إلى الكبير،

122
00:08:46,585 --> 00:08:50,395
فإنه سيشغل ثلاثة أعمدة في الصف.

123
00:08:50,395 --> 00:08:56,810
الآن، لذلك سيتم احتلال الجزء المتبقي من المحتوى أسفل هنا،

124
00:08:56,810 --> 00:09:00,575
لذلك، سأقوم بتطبيق الطبقات كعمود،

125
00:09:00,575 --> 00:09:05,715
مشيرا إلى أن هذا سيتم تكديسه تحت

126
00:09:05,715 --> 00:09:11,025
المحتوى هنا في أحجام الشاشة الصغيرة الإضافية،

127
00:09:11,025 --> 00:09:12,690
وبعد ذلك سأقول عمود sm،

128
00:09:12,690 --> 00:09:16,940
مما يعني أن هذا سيشغل المتبقية ثمانية أعمدة هنا،

129
00:09:16,940 --> 00:09:19,300
لأنه يتم أخذ أربعة أعمدة من قبل هذا واحد،

130
00:09:19,300 --> 00:09:22,360
وبعد ذلك سنقول العمود md،

131
00:09:22,360 --> 00:09:24,320
مما يعني أن هذا سوف تحتل

132
00:09:24,320 --> 00:09:27,300
الأعمدة التسعة المتبقية لأنه يتم

133
00:09:27,300 --> 00:09:33,230
أخذ ثلاثة أعمدة لأحجام الشاشة المتوسطة إلى الكبيرة جدا من قبل المحتوى أعلاه هنا.

134
00:09:33,230 --> 00:09:37,810
الآن بعد أن قمت بتعريف صف المحتوى

135
00:09:37,810 --> 00:09:43,070
الأول، سآخذ نفس تطبيق فئة العمود هنا،

136
00:09:43,070 --> 00:09:49,415
ثم قم بتطبيق ذلك على الصف الثاني هنا،

137
00:09:49,415 --> 00:09:52,345
وكذلك صف المحتوى الثالث هنا.

138
00:09:52,345 --> 00:09:57,240
وبالمثل، سأقوم بنسخ هذا واحد ثم تطبيق نفسه

139
00:09:57,240 --> 00:10:04,690
على divs المحتوى أدناه هنا.

140
00:10:04,690 --> 00:10:11,950
حتى الآن قمنا بتكوين كل من رأس وأعمدة المحتوى هناك.

141
00:10:11,950 --> 00:10:14,690
دعونا ننتقل الآن إلى التذييل.

142
00:10:14,690 --> 00:10:21,260
في التذييل، ستلاحظ أن هذا div يحتوي على ثلاثة div داخلي هنا،

143
00:10:21,260 --> 00:10:23,720
لذلك لكل من هذه divs الداخلية الثلاثة هنا،

144
00:10:23,720 --> 00:10:26,570
سأقوم بتطبيق فئات الأعمدة المقابلة.

145
00:10:26,570 --> 00:10:27,680
لذلك بالنسبة لأول واحد،

146
00:10:27,680 --> 00:10:35,280
والذي يحتوي على روابط إلى الصفحات المختلفة التي ستشكل جزءًا من هذا الموقع،

147
00:10:35,280 --> 00:10:38,395
سأقوم بتطبيق فئة عمود،

148
00:10:38,395 --> 00:10:46,045
كعمود أربعة، عمود sm-2 هنا.

149
00:10:46,045 --> 00:10:50,840
وهذا يعني أنه بالنسبة لأحجام الشاشة الصغيرة الإضافية،

150
00:10:50,840 --> 00:10:55,320
فإن هذا سيشغل أربعة أعمدة وللصغير إلى كبير جدًا،

151
00:10:55,320 --> 00:10:58,660
فإنه سيشغل عمودين هنا فقط.

152
00:10:59,040 --> 00:11:01,790
ثم بالنسبة للثاني،

153
00:11:01,790 --> 00:11:08,425
فإن div الثاني هناك سأقوم بتطبيق الطبقات كعمود سبعة.

154
00:11:08,425 --> 00:11:12,050
لذلك لاحظ أن لدي أربعة هنا ثم سبعة هنا،

155
00:11:12,050 --> 00:11:14,755
بحيث المجموع يحتل 11 عمودا.

156
00:11:14,755 --> 00:11:16,430
لقد تركت عموداً واحداً فارغاً

157
00:11:16,430 --> 00:11:21,520
سأعود لاحقًا لتطبيق إزاحة لرعاية العمود الإضافي.

158
00:11:21,520 --> 00:11:23,400
إذن هذا هو العمود السابع،

159
00:11:23,400 --> 00:11:31,345
ثم كول-سم-5 إلى الثاني.

160
00:11:31,345 --> 00:11:33,630
إذا هذا هو اثنين زائد خمسة، سبعة.

161
00:11:33,630 --> 00:11:36,390
لذلك لا يزال لدي خمسة أعمدة متبقية،

162
00:11:36,390 --> 00:11:40,685
والتي يمكنني استخدامها في div الثالث هنا.

163
00:11:40,685 --> 00:11:44,610
الآن لأحجام الشاشة الصغيرة الإضافية،

164
00:11:44,610 --> 00:11:47,700
سيتم وضع هذين المحتويين جنبًا

165
00:11:47,700 --> 00:11:52,080
إلى جنب، ومن ثم

166
00:11:52,080 --> 00:11:58,585
سيكون هذا div الذي يحتوي على روابط لموقع وسائل التواصل الاجتماعي في صف منفصل مكدس أدناه.

167
00:11:58,585 --> 00:12:04,390
ولكن بالنسبة لأحجام الشاشة الصغيرة إلى الكبيرة،

168
00:12:04,390 --> 00:12:07,680
فإن الأول سيشغل عمودين،

169
00:12:07,680 --> 00:12:10,240
والثاني سيشغل خمسة، وسيتم

170
00:12:10,240 --> 00:12:13,545
تناول الباقي من خلال روابط وسائل التواصل الاجتماعي هنا.

171
00:12:13,545 --> 00:12:15,230
لذلك بالنسبة للثالث،

172
00:12:15,230 --> 00:12:18,650
سأقوم بتطبيق الفصل

173
00:12:18,650 --> 00:12:26,515
كـ col-12 col-sM-4 هنا.

174
00:12:26,515 --> 00:12:32,625
لذا، فإن col-12 col-sm-4، مما يعني أن هذا سيشغل

175
00:12:32,625 --> 00:12:37,090
مجموعة منفصلة من 12 عمودًا

176
00:12:37,090 --> 00:12:42,310
مكدسة أسفل المحتوى السابق لأحجام الشاشة الصغيرة الإضافية،

177
00:12:42,310 --> 00:12:45,040
ولكن بالنسبة إلى الحجم الصغير إلى الكبير جدًا، سيشغل أربعة أعمدة.

178
00:12:45,040 --> 00:12:46,815
لذلك نحن هنا أربعة زائد خمسة،

179
00:12:46,815 --> 00:12:48,430
تسعة زائد اثنين 11.

180
00:12:48,430 --> 00:12:52,635
لذلك لا يزال عمود واحد بقايا صغيرة إلى كبيرة جدا.

181
00:12:52,635 --> 00:12:57,510
إذن هذه هي الطريقة التي سأطبق بها هذا العمود الأقرب إلى هذا.

182
00:12:57,510 --> 00:13:03,250
الآن، لا يزال لدينا واحد أدناه هنا حيث نحن تحتوي على حقوق التأليف والنشر لهذا.

183
00:13:03,250 --> 00:13:08,745
سأقوم بتطبيق الفصل كعمود تلقائي،

184
00:13:08,745 --> 00:13:12,050
مما يعني أن هذا المحتوى سيشغل

185
00:13:12,050 --> 00:13:15,515
أعمدة كافية فقط كما هو مطلوب من قبل المحتوى هناك.

186
00:13:15,515 --> 00:13:20,405
في وقت لاحق سترى أنني سأضع هذا المحتوى في وسط

187
00:13:20,405 --> 00:13:26,385
الشاشة وبالتالي باستخدام فئة CSS bootstrap أخرى.

188
00:13:26,385 --> 00:13:29,035
سنأتي إلى ذلك في التمرين التالي

189
00:13:29,035 --> 00:13:33,405
لذلك مع هذا قمنا بتطبيق فئات العمود المختلفة

190
00:13:33,405 --> 00:13:35,880
على الرأس والمحتوى والتذييل.

191
00:13:35,880 --> 00:13:39,280
هذا هو الوقت المناسب بالنسبة لنا لحفظ التغييرات ومن ثم الذهاب

192
00:13:39,280 --> 00:13:43,475
وإلقاء نظرة على الصفحة المفهرسة أو HTML المحدثة.

193
00:13:43,475 --> 00:13:46,690
إلقاء نظرة على صفحة index.html الخاصة بنا،

194
00:13:46,690 --> 00:13:51,315
ستلاحظ كيف في الرأس الذي هو Jumbotron،

195
00:13:51,315 --> 00:13:55,145
يحتل المحتوى الآن نصف الشاشة هناك فقط.

196
00:13:55,145 --> 00:14:00,210
النصف الآخر من الشاشة من هذا الصف معين هو الآن ترك فارغة.

197
00:14:00,210 --> 00:14:03,180
النزول إلى صفوف المحتوى،

198
00:14:03,180 --> 00:14:07,685
ترى أن التسمية على الجانب الأيسر تحتل

199
00:14:07,685 --> 00:14:14,280
ثلاثة أو أربعة أعمدة اعتمادا على حجم الشاشة التي كانت تستخدم،

200
00:14:14,280 --> 00:14:18,250
والباقي يشغلها بقية المحتوى.

201
00:14:18,250 --> 00:14:19,780
حتى هنا لدينا صف واحد،

202
00:14:19,780 --> 00:14:21,770
الصف الثاني، والصف الثالث.

203
00:14:21,770 --> 00:14:26,330
ثم تذييل الصفحة هنا يمكنك أن ترى أن الروابط على الجانب الأيسر،

204
00:14:26,330 --> 00:14:28,065
والآخرين في الوسط،

205
00:14:28,065 --> 00:14:31,150
ومن ثم وصلات وسائل الاعلام الاجتماعية على الجانب الأيمن.

206
00:14:31,150 --> 00:14:35,460
لذلك هذا هو لشاشة متوسطة الحجم.

207
00:14:35,460 --> 00:14:42,765
الآن إذا كنت ترغب في النظر إلى نفس العرض لأحجام شاشة صغيرة أو صغيرة إضافية،

208
00:14:42,765 --> 00:14:45,045
إذا كنت تستخدم

209
00:14:45,045 --> 00:14:47,960
Chrome، فإن Chrome لديه أدوات المطور التي يمكنك

210
00:14:47,960 --> 00:14:51,010
تشغيلها بالنقر فوق أدوات مطوري البرامج،

211
00:14:51,010 --> 00:14:53,105
وعندما تظهر أدوات المطور،

212
00:14:53,105 --> 00:14:56,890
ستلاحظ، دعني أقوم بتقليل حجم هنا.

213
00:14:56,890 --> 00:15:00,930
ستلاحظ هذه الصغيرة إلى النوافذ هناك.

214
00:15:00,930 --> 00:15:06,500
لذا سيؤدي النقر على ذلك إلى تشغيل العرض المتجاوب لهذه المواقع هناك.

215
00:15:06,500 --> 00:15:15,680
لذلك يمكنك أن ترى أن هنا عرض صفحة الويب نفسها على بكسل إلى موقع،

216
00:15:15,680 --> 00:15:19,300
وهو 411 من 731 في وضع عمودي،

217
00:15:19,300 --> 00:15:22,805
لذلك الذي يتوافق مع حجم شاشة صغيرة إضافية،

218
00:15:22,805 --> 00:15:25,300
حتى تتمكن من رؤية كيف يتم وضع المحتوى بها.

219
00:15:25,300 --> 00:15:28,145
حتى تتمكن من رؤية محتوى Jumbotron هناك

220
00:15:28,145 --> 00:15:31,745
ثم الجزء المتبقي من المحتوى أسفل هنا.

221
00:15:31,745 --> 00:15:34,585
ثم وصولا الى تذييل الصفحة.

222
00:15:34,585 --> 00:15:40,500
حتى في التذييل يمكنك أن ترى كيف الروابط والإعلان وضعت جنبا إلى جنب.

223
00:15:40,500 --> 00:15:45,880
الآن تقليل حجم الشاشة بحيث يمكننا أن نرى كيف يتم وضع هذا التذييل هنا.

224
00:15:45,880 --> 00:15:48,735
لذلك الجزء المتبقي، لديك الروابط على الجانب الأيسر،

225
00:15:48,735 --> 00:15:51,470
لديك العنوان على الجانب الأيمن،

226
00:15:51,470 --> 00:15:56,515
ثم روابط وسائل التواصل الاجتماعي أسفل في صف منفصل هنا،

227
00:15:56,515 --> 00:15:59,775
ثم حقوق الطبع والنشر في الأسفل هناك.

228
00:15:59,775 --> 00:16:04,935
لذلك هذا هو الرأي المثير للاهتمام الذي نراه لأحجام الشاشة الصغيرة الإضافية.

229
00:16:04,935 --> 00:16:07,450
بالعودة إلى شفرتنا هنا،

230
00:16:07,450 --> 00:16:11,710
سأقوم الآن بتطبيق الترتيب وفئات الإزاحة على

231
00:16:11,710 --> 00:16:17,255
هذا المحتوى من أجل عرض المحتوى بطريقة مختلفة قليلاً.

232
00:16:17,255 --> 00:16:21,850
حتى الذهاب إلى صف المحتوى هنا،

233
00:16:21,850 --> 00:16:27,820
بالنسبة إلى اثنين من divs هنا التي تحتوي على المحتوى،

234
00:16:27,820 --> 00:16:32,020
وأنا ذاهب لتطبيق الطبقات كما

235
00:16:32,020 --> 00:16:40,150
order-sm-last للصف الأول هنا.

236
00:16:40,150 --> 00:16:50,120
ثم لذلك واحد أسفل هنا سوف تطبيق النظام sm أولا إلى الصف أسفل هنا.

237
00:16:50,120 --> 00:16:53,300
وهذا يعني أنه عند عرض هذا المحتوى،

238
00:16:53,300 --> 00:16:56,090
سيتم سحب هذا المحتوى إلى الجانب الأيسر من الشاشة ومن ثم

239
00:16:56,090 --> 00:16:58,880
سيتم دفع هذا العمود إلى الجانب الأيمن من الشاشة.

240
00:16:58,880 --> 00:17:02,400
لذلك سيتم طلب هذا إلى الجانب الأيمن وسيتم طلب هذا إلى الجانب الأيسر.

241
00:17:02,400 --> 00:17:08,075
كما شرحت حول بنود النظام في المحاضرة السابقة.

242
00:17:08,075 --> 00:17:09,880
وبالمثل من الصف الثاني،

243
00:17:09,880 --> 00:17:13,330
سأتركه على هذا النحو ولكن من الصف الثالث سأقوم بتطبيق

244
00:17:13,330 --> 00:17:17,240
نفس المجموعة من فئات النظام.

245
00:17:17,240 --> 00:17:20,290
لذلك أنا ذاهب للذهاب إلى الصف الثالث هنا،

246
00:17:20,290 --> 00:17:25,425
ومن ثم تطبيق النظام سم-الأخير على هذا واحد،

247
00:17:25,425 --> 00:17:30,850
وبعد ذلك سوف تطبيق النظام سم-أولا على هذا واحد.

248
00:17:31,460 --> 00:17:36,450
وهكذا سيتم إعادة ترتيب هذا مرة أخرى

249
00:17:36,450 --> 00:17:38,300
بحيث يظهر هذا المحتوى إلى

250
00:17:38,300 --> 00:17:40,870
الجانب الأيسر وسيظهر هذا المحتوى إلى الجانب الأيمن.

251
00:17:40,870 --> 00:17:46,640
هذه مجرد طريقة لتحديد موقع المحتوى بطريقة أكثر إثارة للاهتمام.

252
00:17:46,640 --> 00:17:50,210
الآن الانتقال إلى أسفل إلى تذييل هنا،

253
00:17:50,210 --> 00:17:54,690
والآن أنا ذاهب لتطبيق فئة إزاحة هنا.

254
00:17:54,690 --> 00:18:00,440
لذا لاحظ أنني ذكرت أن هذين العمودين سيحتلان أربعة زائد سبعة، 11.

255
00:18:00,440 --> 00:18:02,130
لذلك عمود واحد هو بقايا.

256
00:18:02,130 --> 00:18:07,295
لذلك أنا ذاهب لتطبيق فصل إزاحة 1 لهذا واحد.

257
00:18:07,295 --> 00:18:12,320
مما يعني أن هذا المحتوى على هذا div سيتم دفعه مباشرة بواسطة عمود واحد هنا.

258
00:18:12,320 --> 00:18:14,710
وبالمثل منذ أن قلت إزاحة واحدة،

259
00:18:14,710 --> 00:18:23,145
سيتم تطبيق هذا على صغيرة إضافية على طول الطريق حتى أحجام الشاشة الكبيرة الإضافية.

260
00:18:23,145 --> 00:18:28,235
وهكذا هذا هو استخدام فئة الإزاحة.

261
00:18:28,235 --> 00:18:30,060
حتى الآن بعد أن قمنا بإجراء التغييرات،

262
00:18:30,060 --> 00:18:36,285
دعونا حفظ التغييرات ثم نذهب ونلقي نظرة على صفحة الويب لدينا في المتصفح.

263
00:18:36,285 --> 00:18:38,430
بالعودة إلى هذا المتصفح،

264
00:18:38,430 --> 00:18:43,715
ترى الآن كيف يكون الرأس كما كان من قبل،

265
00:18:43,715 --> 00:18:46,850
ولكن في صف المحتوى الأول،

266
00:18:46,850 --> 00:18:49,090
ترى أن هذا المحتوى قد تم دفعه إلى

267
00:18:49,090 --> 00:18:51,925
الجانب الأيسر والتسمية إلى الجانب الأيمن.

268
00:18:51,925 --> 00:18:56,090
الصف الثاني مختلف تم الحفاظ عليه تماما كما كان من قبل.

269
00:18:56,090 --> 00:18:58,330
ولكن بالنسبة للثالث سترى أن هذا قد

270
00:18:58,330 --> 00:19:00,780
دفع إلى اليمين وهذا قد دفع إلى اليسار.

271
00:19:00,780 --> 00:19:06,900
لذلك هذا هو استخدام النظام سم-لاست وترتيب سم-فيرست الدرجة هناك.

272
00:19:06,900 --> 00:19:08,530
الآن الذهاب إلى التذييل،

273
00:19:08,530 --> 00:19:18,195
ترى الآن أن المحتوى في div الأول هنا قد تم دفعه مباشرة بواسطة عمود واحد،.

274
00:19:18,195 --> 00:19:21,560
لذلك يمكنك أن ترى أن هناك عمودًا واحدًا من المسافات البيضاء هنا،

275
00:19:21,560 --> 00:19:27,790
ولم يتم دفعه إلى اليمين وتم تنسيق الأجزاء المتبقية وفقًا لذلك.

276
00:19:27,790 --> 00:19:32,235
لذلك مع هذا نحن استكمال التغييرات

277
00:19:32,235 --> 00:19:37,790
على صفحة index.html لدينا أو صفحة إضافية لهذا التمرين معين. و

278
00:19:37,790 --> 00:19:41,665
بهذا نكمل هذه العملية بالذات.

279
00:19:41,665 --> 00:19:46,235
في هذا التمرين نظرنا إلى استخدام

280
00:19:46,235 --> 00:19:53,800
فئات الحاوية والصف والعمود من أجل تصميم صفحة الويب الخاصة بنا أجمل قليلاً.

281
00:19:53,800 --> 00:19:57,705
في الجزء الثاني من التمرين الذي سيتبع هذا،

282
00:19:57,705 --> 00:20:04,680
سنقوم بإضافة المزيد لمحاولة تحسين طريقة عرض صفحات الويب هذه.

283
00:20:04,680 --> 00:20:08,375
هذا لا يزال غير مرتاح لي.

284
00:20:08,375 --> 00:20:12,920
ومن الواضح أنه لا يزال هناك مجال لل تحسين.

285
00:20:12,920 --> 00:20:16,290
قد يكون هذا وقتًا مناسبًا لك للقيام بتعليق git مع

286
00:20:16,290 --> 00:20:21,470
الرسالة Bootstrap Grid Part One.