1
00:00:03,550 --> 00:00:05,885
في المحاضرة السابقة،

2
00:00:05,885 --> 00:00:08,860
تعلمنا عن التصميم المتجاوب.

3
00:00:08,860 --> 00:00:12,300
كما ذكرنا بإيجاز أن نظام شبكة Bootstrap

4
00:00:12,300 --> 00:00:16,505
مصمم لدعم مواقع الويب المتجاوبة.

5
00:00:16,505 --> 00:00:20,275
كيف تدعم شبكة بوتسترابس هذا؟

6
00:00:20,275 --> 00:00:23,765
وما الذي تنطوي عليه شبكة Bootstrap بالضبط،

7
00:00:23,765 --> 00:00:27,710
والتي تمكننا من تصميم مواقع استجابة؟

8
00:00:27,710 --> 00:00:32,535
دعونا نتحدث قليلا المزيد من التفاصيل حول نظام شبكة Bootstrap،

9
00:00:32,535 --> 00:00:36,700
وكيف يدعم الاستجابة بعد ذلك.

10
00:00:36,700 --> 00:00:45,450
رأينا استخدام العلامة الوصفية لإطار العرض في الدرس السابق،

11
00:00:45,450 --> 00:00:53,590
عندما قمنا بالتمرين الأولي على إعداد Bootstrap في صفحة index.html الخاصة بنا.

12
00:00:53,590 --> 00:00:58,790
أشرت بإيجاز إلى هذا السطر بالذات في التعليمات البرمجية ثم.

13
00:00:58,790 --> 00:01:05,015
دعونا نحاول أن نفهم لماذا نستخدم هذا في صفحة index.html لدينا.

14
00:01:05,015 --> 00:01:08,090
ما نحدده هنا هو أنه

15
00:01:08,090 --> 00:01:14,555
عندما يتم

16
00:01:14,555 --> 00:01:20,970
تقديم صفحة الويب الخاصة بنا من قبل المتصفح في جهاز معين، فإن عرضه في المتصفح سيأخذ في الاعتبار حجم الشاشة

17
00:01:20,970 --> 00:01:28,080
ويكيف تلقائيًا عرض الصفحة إلى عرض شاشة الأجهزة.

18
00:01:28,080 --> 00:01:32,090
وبهذه الطريقة، لدينا فصول متجاوبة،

19
00:01:32,090 --> 00:01:35,740
وفصول CSS المضمنة في إطار واجهة المستخدم لدينا،

20
00:01:35,740 --> 00:01:39,030
ثم يضمن ذلك أن صفحة الويب الخاصة بنا يتم

21
00:01:39,030 --> 00:01:42,855
تقديمها بشكل صحيح لحجم الشاشة المحدد هذا.

22
00:01:42,855 --> 00:01:46,930
هذا هو المكان الذي يأتي نظام الشبكة Bootstrap لإنقاذنا

23
00:01:46,930 --> 00:01:51,000
ويمكننا من تصميم مواقع استجابة.

24
00:01:51,000 --> 00:01:53,480
لذلك مرة أخرى، مع التأكيد على هذه النقطة،

25
00:01:53,480 --> 00:01:57,100
تم تصميم شبكة Bootstrap لتكون استجابة.

26
00:01:57,100 --> 00:02:01,525
لقد رأيت بالفعل ما يعنيه هذا في المحاضرة السابقة،

27
00:02:01,525 --> 00:02:07,845
والمتنقلة أولاً، والتي ناقشناها بالفعل في المحاضرة السابقة ثم السوائل،

28
00:02:07,845 --> 00:02:11,055
والتكيف تلقائيًا مع عرض الشاشة.

29
00:02:11,055 --> 00:02:16,220
تستفيد شبكة Bootstrap من تخطيط CSS flexbox.

30
00:02:16,220 --> 00:02:19,860
تخطيط CSS flexbox الذي يتم دعمه

31
00:02:19,860 --> 00:02:23,955
من قبل الإصدارات الأحدث من المتصفحات المختلفة،

32
00:02:23,955 --> 00:02:30,070
يتيح خيارات تخطيط أكثر بساطة ومرونة في CSS.

33
00:02:30,070 --> 00:02:31,980
الآن، فإن المناقشة الفعلية

34
00:02:31,980 --> 00:02:36,800
لكيفية عمل تخطيط CSS flexbox خارج نطاق هذه الدورة،

35
00:02:36,800 --> 00:02:41,040
وسوف نقيد أنفسنا على كيفية استخدام CSS

36
00:02:41,040 --> 00:02:45,565
flexbox بواسطة Bootstrap لنظام الشبكة الخاص به. في

37
00:02:45,565 --> 00:02:54,710
وقت سابق كان Bootstrap نظام الشبكة الخاص به الذي كان يسبق تخطيط CSS flexbox،

38
00:02:54,710 --> 00:02:58,840
ولكن أحدث إصدار من Bootstrap

39
00:02:58,840 --> 00:03:06,650
جعل تخطيط CSS flexbox كمعيار لشبكة Bootstrap.

40
00:03:06,650 --> 00:03:10,375
هذا التخطيط فليكسبوكس يمكن التعامل بسهولة مع

41
00:03:10,375 --> 00:03:17,390
المحتوى الديناميكي ويمكن تكييف الحاويات مع المحتوى الديناميكي،

42
00:03:17,390 --> 00:03:20,780
وأيضا يمكن أن تتكيف بسهولة مع حجم غير معروف من

43
00:03:20,780 --> 00:03:24,890
المحتوى الفعلي المغلقة داخل الحاويات.

44
00:03:24,890 --> 00:03:30,320
كما يدعم تخطيط flexbox تخطيط الاتجاه الملحد.

45
00:03:30,320 --> 00:03:37,084
ما يجلبه تخطيط flexbox إلى شبكات Bootstrap هو القدرة على

46
00:03:37,084 --> 00:03:44,005
القيام بمحاذاة رأسية سهلة للمحتوى داخل عنصر الأصل.

47
00:03:44,005 --> 00:03:48,595
سنرى إستخدام هذا فى التمرين الذى يليه

48
00:03:48,595 --> 00:03:52,625
أيضا، فإنه يسمح بسهولة إعادة ترتيب المحتوى

49
00:03:52,625 --> 00:03:58,170
عبر الأجهزة المختلفة ودقة الشاشة مع مساعدة من استعلامات وسائل الإعلام.

50
00:03:58,170 --> 00:04:03,050
مرة أخرى سنرى قليلا من ذلك في التمرين على كيفية تعزيز

51
00:04:03,050 --> 00:04:08,645
Bootstrap ذلك لدعم طرق مثيرة للاهتمام لوضع المحتوى.

52
00:04:08,645 --> 00:04:11,670
أيضا، هذا المحتوى نفسه،

53
00:04:11,670 --> 00:04:19,275
يمكن أيضا أن تكون حاويات المحتوى مصممة لتكون أعمدة ارتفاع متساوية بحيث

54
00:04:19,275 --> 00:04:25,245
حاوية المحتوى مع أكبر

55
00:04:25,245 --> 00:04:32,915
ارتفاع يحدد ارتفاع جميع الحاويات المتبقية التي وضعت في نفس الصف.

56
00:04:32,915 --> 00:04:39,375
دعونا الآن نتحدث عن مزيد من التفاصيل حول شبكة Bootstrap وكيف تعمل في الواقع.

57
00:04:39,375 --> 00:04:41,400
الطريقة التي تعمل بها شبكة Bootstrap،

58
00:04:41,400 --> 00:04:48,765
هي عن طريق تطبيق حاوية بالإضافة إلى الطبقة الخارجية.

59
00:04:48,765 --> 00:04:51,815
قد نستخدم div

60
00:04:51,815 --> 00:04:57,075
لتحديد العنصر الذي نطبق عليه فئة الحاوية بشكل عام.

61
00:04:57,075 --> 00:05:03,855
الحاوية هي الوحدة الخارجية التي يتم فيها وضع المحتوى الفعلي.

62
00:05:03,855 --> 00:05:10,220
يدعم Bootstrap كل من فئة الحاوية التي هي تخطيط عرض ثابت،

63
00:05:10,220 --> 00:05:16,010
مما يعني أن المحتوى نفسه يقتصر على عرض ثابت على الشاشة.

64
00:05:16,010 --> 00:05:22,420
تمكن فئة الحاوية هذه هذا العرض الثابت

65
00:05:22,420 --> 00:05:25,920
من التكيف تلقائيًا مع حجم الشاشة باستخدام استعلامات الوسائط بحيث

66
00:05:25,920 --> 00:05:29,695
يأتي التصميم المتجاوب في عملية الإنقاذ الخاصة بنا.

67
00:05:29,695 --> 00:05:36,340
في وقت لاحق، سنرى كيف ستتكيف هذه الحاوية مع أحجام الشاشة المختلفة.

68
00:05:36,340 --> 00:05:39,490
الآن، لدينا أيضا مرونة استخدام في

69
00:05:39,490 --> 00:05:42,684
السائل حاوية الكلاسيكية الأخرى

70
00:05:42,684 --> 00:05:49,200
التي تمكن الحاوية من التكيف تلقائيا مع حجم الشاشة.

71
00:05:49,200 --> 00:05:50,855
لكن حاوية العرض الثابتة،

72
00:05:50,855 --> 00:05:56,270
تعمل على إصلاح حجم عرض التخطيط الفعلي.

73
00:05:56,270 --> 00:06:01,370
داخل الحاوية، سيتم وضع المحتوى في شكل صفوف،

74
00:06:01,370 --> 00:06:04,770
لذلك عادة ما نقوم به هو داخل

75
00:06:04,770 --> 00:06:08,360
وخارج div الذي نطبق عليه فئة الحاوية، ونحن

76
00:06:08,360 --> 00:06:12,440
«سوف تشمل div الداخلي الذي سنطبق عليه فئة الصف.

77
00:06:12,440 --> 00:06:17,550
لذلك، سيتم تقسيم المحتوى نفسه عموديا إلى صفوف متعددة.

78
00:06:17,550 --> 00:06:21,000
وبمجرد تقسيم هذا إلى صفوف، داخل كل صف،

79
00:06:21,000 --> 00:06:25,995
يمكنك بعد ذلك تخطيط المحتوى باستخدام الأعمدة.

80
00:06:25,995 --> 00:06:28,810
لذلك،

81
00:06:28,810 --> 00:06:34,565
سيتم تقسيم كل صف في Bootstrap، إلى 12 عمودًا متساويًا الحجم.

82
00:06:34,565 --> 00:06:43,820
الآن، يمكنك تصميم المحتوى الخاص بك لاحتلال أي عدد من هذه الأعمدة ال 12.

83
00:06:43,820 --> 00:06:48,900
لذلك، وحقيقة أن المحتوى نفسه يتكيف مع

84
00:06:48,900 --> 00:06:51,310
عرض الشاشة والصف نفسه الذي يتم

85
00:06:51,310 --> 00:06:54,710
وضعه داخل الحاوية سوف يتكيف تلقائيًا مع عرض الشاشة،

86
00:06:54,710 --> 00:06:58,120
وكذلك الأعمدة،

87
00:06:58,120 --> 00:07:01,320
سيتم تحديد الأعمدة الـ 12.

88
00:07:01,320 --> 00:07:05,010
سيتم تحديد عرضهم من قبل الصف في حد ذاته.

89
00:07:05,010 --> 00:07:08,520
لذلك، مما يعني أنه بالنسبة لأحجام شاشة مختلفة،

90
00:07:08,520 --> 00:07:12,470
مهما كان المحتوى الذي تقوم بتخطيطه كل هذه الأعمدة الـ 12 سيتم ضبط

91
00:07:12,470 --> 00:07:18,220
نفسه تلقائيًا إلى العرض المسموح به للمحتوى.

92
00:07:18,220 --> 00:07:21,990
لذا، هذه هي الطريقة التي يتم بها

93
00:07:21,990 --> 00:07:27,370
تضمين الاستجابة في طريقة شبكة Bootstrap لوضع المحتوى.

94
00:07:27,370 --> 00:07:30,285
لذا، كيف نقوم بالضبط بتخطيط المحتوى؟

95
00:07:30,285 --> 00:07:33,845
سنتحدث عن ذلك في الشرائح القليلة القادمة

96
00:07:33,845 --> 00:07:36,315
شبكة Bootstrap نفسها،

97
00:07:36,315 --> 00:07:45,160
ويتيح لنا خمس فئات لتحديد أحجام الشاشة المختلفة بشكل افتراضي.

98
00:07:45,160 --> 00:07:49,870
هناك فئة افتراضية تستهدف جميع أحجام الشاشة،

99
00:07:49,870 --> 00:07:53,210
بدءًا من صغيرة جدًا إلى كبيرة جدًا.

100
00:07:53,210 --> 00:07:59,205
لذا فإن النطاق الكامل لعرض الشاشة في شروط Bootstrap،

101
00:07:59,205 --> 00:08:02,884
ينقسم إلى

102
00:08:02,884 --> 00:08:07,405
أحجام شاشة صغيرة وصغيرة ومتوسطة وكبيرة جدًا جدًا.

103
00:08:07,405 --> 00:08:11,180
ثم ننظر في كيفية

104
00:08:11,180 --> 00:08:16,350
تحديد هذه الفئات المختلفة من أحجام الشاشة بالتفصيل في واحدة من الشرائح اللاحقة.

105
00:08:16,350 --> 00:08:18,540
لذلك، ضمن التعليمات البرمجية الخاصة

106
00:08:18,540 --> 00:08:22,830
بك، سوف تحدد مواصفات التخطيط عن طريق

107
00:08:22,830 --> 00:08:29,060
تحديد sm لحجم الشاشة الصغيرة،

108
00:08:29,060 --> 00:08:32,195
md للمتوسط، lg للكبير،

109
00:08:32,195 --> 00:08:35,905
و xl لأحجام الشاشة الكبيرة الإضافية.

110
00:08:35,905 --> 00:08:37,400
لذلك، عند القيام بالتخطيط،

111
00:08:37,400 --> 00:08:40,345
كما رأينا في الشريحة السابقة،

112
00:08:40,345 --> 00:08:45,405
يتم تقسيم كل صف في نظام شبكة Bootstrap إلى 12 عمودًا.

113
00:08:45,405 --> 00:08:50,905
الآن، سنقوم بتخطيط المحتوى باستخدام ما يسمى فئات العمود.

114
00:08:50,905 --> 00:08:52,450
بالنسبة لفئات الأعمدة،

115
00:08:52,450 --> 00:08:59,162
يمكننا تحديد كيفية إجراء التخطيط لعرض الشاشة المختلفة.

116
00:08:59,162 --> 00:09:04,735
انظر إلى تفاصيل هذا في الشرائح اللاحقة لاحقًا.

117
00:09:04,735 --> 00:09:11,020
ولكن اسمحوا لي أن ألفت انتباهكم بسرعة إلى كيفية تحديد أحجام الأعمدة.

118
00:09:11,020 --> 00:09:13,655
قد يحددون أحجام الأعمدة كعمود،

119
00:09:13,655 --> 00:09:19,485
وهي واحدة من الفئات التي سيقولونها col-sm

120
00:09:19,485 --> 00:09:25,360
للصغيرة و col-md المتوسطة والكبيرة والكبيرة الزائدة وهلم جرا.

121
00:09:25,360 --> 00:09:29,810
الآن، يتم استخدام فئات الأعمدة هذه لتحديد

122
00:09:29,810 --> 00:09:38,260
بالضبط عدد الأعمدة في صف واحد سوف تشغل كل جزء من المحتوى.

123
00:09:38,260 --> 00:09:40,015
كيف يعمل هذا؟

124
00:09:40,015 --> 00:09:42,215
سنرى ذلك في الشريحة التالية

125
00:09:42,215 --> 00:09:45,565
لذا، بالعودة إلى شبكة Bootstrap

126
00:09:45,565 --> 00:09:50,345
لدينا، لنفترض أن لدينا قطعة من المحتوى ونريد وضع سلام المحتوى.

127
00:09:50,345 --> 00:09:54,915
يمكننا تحديد أن هذا المحتوى مغلق داخل div آخر،

128
00:09:54,915 --> 00:09:57,815
والذي نطبق

129
00:09:57,815 --> 00:10:00,390
عليه فئة العمود، على سبيل المثال، col-sm-5.

130
00:10:00,390 --> 00:10:08,560
لذلك، في هذه الحالة، ما نحدده هو أنه بالنسبة لأحجام الشاشات الصغيرة إلى الكبيرة، فإن

131
00:10:08,560 --> 00:10:15,890
هذه القطعة من المحتوى ستشغل خمسة أعمدة من تلك الأعمدة الـ 12.

132
00:10:15,890 --> 00:10:17,505
الآن، أنت سَتَسْألُني فوراً،

133
00:10:17,505 --> 00:10:19,835
ماذا عن التسخينِ الإضافيِ؟

134
00:10:19,835 --> 00:10:23,465
إذا لم يتم تحديده بشكل صريح للخزانة الذكية الإضافية

135
00:10:23,465 --> 00:10:27,120
من خلال عرض الأعمدة الـ 12 بالكامل،

136
00:10:27,120 --> 00:10:31,575
فيمكنها تحديد

137
00:10:31,575 --> 00:10:38,135
النطاق الذي سيشغله تخطيط العمود عدد الأعمدة.

138
00:10:38,135 --> 00:10:39,890
لذلك، في هذه الحالة بالذات،

139
00:10:39,890 --> 00:10:42,470
عندما أحدد أنني أسميها فقط سم-5،

140
00:10:42,470 --> 00:10:48,295
ما أعنيه هو أن هذا المحتوى المحدد الذي يتم تضمينه داخل تلك ديف،

141
00:10:48,295 --> 00:10:52,375
سيشغل خمسة أعمدة لجميع أحجام الشاشة،

142
00:10:52,375 --> 00:10:56,595
من الصغيرة على طول الطريق إلى كبيرة إضافية.

143
00:10:56,595 --> 00:11:00,595
الآن، نرى الآن أنه من أصل 12 عمودًا،

144
00:11:00,595 --> 00:11:02,515
قمنا بالفعل باحتلال خمسة أعمدة.

145
00:11:02,515 --> 00:11:05,070
لا يزال هناك سبعة أعمدة أخرى متبقية.

146
00:11:05,070 --> 00:11:09,925
يمكنني أخذ جزء آخر من المحتوى ثم وضعه على يمين هذا، من

147
00:11:09,925 --> 00:11:14,085
خلال الدفاع عن div آخر ثم تطبيق العمود sM-7.

148
00:11:14,085 --> 00:11:15,855
الآن، في هذه الحالة،

149
00:11:15,855 --> 00:11:18,065
ترى أن 5 زائد 7 يساوي 12.

150
00:11:18,065 --> 00:11:22,900
لذلك،

151
00:11:22,900 --> 00:11:25,530
سيتم الآن وضع هذين القطعتين من المحتوى التي يتم تضمينها في divs، جنبا

152
00:11:25,530 --> 00:11:30,070
إلى جنب، ومجموعهم يحتل عرض العمود 12 بأكمله.

153
00:11:30,070 --> 00:11:35,765
لذا، هذه هي الطريقة التي يمكننا بها تحديد والعمل مع الأعمدة 12

154
00:11:35,765 --> 00:11:42,630
في تحديد تخطيط الطبقة الحالية.

155
00:11:42,630 --> 00:11:46,960
باستخدام تخطيط مربع المرن CSS،

156
00:11:46,960 --> 00:11:51,660
يدعم Bootstrap أيضًا ما يسمى أعمدة التخطيط التلقائي.

157
00:11:51,660 --> 00:11:52,905
لذلك، في هذه الحالة،

158
00:11:52,905 --> 00:11:55,380
يمكنني ببساطة تحديد

159
00:11:55,380 --> 00:12:00,060
عمود sm دون تحديد عدد الأعمدة التي من المفترض أن يشغلها.

160
00:12:00,060 --> 00:12:07,570
ولكن في حالة تحديد ثلاثة عمود عرض Doobs sm في heml 5 الخاص بي،

161
00:12:07,570 --> 00:12:13,575
فإن شبكة bootstrap ستضع هذه المحتويات تلقائيًا داخل تلك divs

162
00:12:13,575 --> 00:12:14,905
، جنبًا إلى جنب،

163
00:12:14,905 --> 00:12:18,875
بحيث يحصل كل واحد منهم على ثلث العرض الإجمالي.

164
00:12:18,875 --> 00:12:22,220
لذلك، بما أن لدينا 12 عمودًا هنا،

165
00:12:22,220 --> 00:12:26,045
فسيحصل كل واحد من هذه الثلاثة على أربعة أعمدة لكل منها.

166
00:12:26,045 --> 00:12:32,525
ويتم الاعتناء بذلك تلقائيًا بواسطة آلية تخطيط bootstraps.

167
00:12:32,525 --> 00:12:35,550
الآن، يمكننا تحديد

168
00:12:35,550 --> 00:12:40,375
عدد الأعمدة التي يشغلها جزء معين من المحتوى بشكل صريح.

169
00:12:40,375 --> 00:12:45,625
لذلك، على سبيل المثال، لنفترض أنني حدد ثلاث فئات أعمدة،

170
00:12:45,625 --> 00:12:49,565
ولكن الطبقة الوسطى أحدد العمود sm 6.

171
00:12:49,565 --> 00:12:52,615
ثم ما يحدث هو، عندما يقوم bootstrap

172
00:12:52,615 --> 00:12:55,760
بالتخطيط، سيشغل الجزء الأوسط ستة أعمدة،

173
00:12:55,760 --> 00:13:01,885
ثم سيشغل الجزء الأيسر والأيمن من المحتوى ما تم إيقافه.

174
00:13:01,885 --> 00:13:04,785
لذلك، من أصل 12 الأعمدة التي لدينا،

175
00:13:04,785 --> 00:13:08,630
إذا 6 الأعمدة التي تحتلها الجزء الأوسط من المحتوى،

176
00:13:08,630 --> 00:13:12,855
ثم تركنا معنا 6 أعمدة أخرى والتي سيتم

177
00:13:12,855 --> 00:13:17,965
تقسيمها بالتساوي بين محتويات والجانبين من هذا العمود الأوسط.

178
00:13:17,965 --> 00:13:23,585
لذلك، كل واحد منهم سوف تحصل على أعمدة مجانية من الفضاء لكل منهما.

179
00:13:23,585 --> 00:13:27,730
لذا، هذه هي الطريقة التي يتم بها التخطيط تلقائيًا باستخدام Bootstrap.

180
00:13:27,730 --> 00:13:34,110
في التمرين، سنرى مجموعات مختلفة من استخدام هذا النوع من

181
00:13:34,110 --> 00:13:43,680
المواصفات لعدد الأعمدة التي ستشغلها كل قطعة من المحتوى في تخطيط الألوان.

182
00:13:43,680 --> 00:13:49,135
يلخص هذا الجدول الطريقة التي يعامل بها Bootstrap

183
00:13:49,135 --> 00:13:54,860
شبكات الشاشة المختلفة وبالمقابل كيفية تعريف شبكات الشاشة هذه.

184
00:13:54,860 --> 00:13:57,095
لذلك، كما حددت سابقًا،

185
00:13:57,095 --> 00:14:04,580
يقسم Bootstrap نطاق عرض الشاشة بأكمله إلى 5 فئات.

186
00:14:04,580 --> 00:14:12,890
الشاشات الصغيرة الإضافية هي تلك التي تكون شبكاتها أقل من 776 بكسل.

187
00:14:12,890 --> 00:14:22,090
الشاشات الصغيرة هي تلك التي تتراوح بين 576 وأقل من 768 بكسل. يتم

188
00:14:31,380 --> 00:14:34,685
التعامل مع الشاشات المتوسطة من 768 إلى 992، كبيرة من 992 إلى 1200 وأي شيء عن عرض 1200 بكسل لتكون شاشة كبيرة إضافية.

189
00:14:34,685 --> 00:14:39,390
لذا، هذه هي الطريقة التي يتم بها تكوين شبكة Bootstrap الافتراضية.

190
00:14:39,390 --> 00:14:43,570
الآن، بمجرد الحصول على راحة مع Bootstrap،

191
00:14:43,570 --> 00:14:48,595
يمكنك أيضًا تكوين هذه الأقسام بنفسك.

192
00:14:48,595 --> 00:14:50,770
ولكن بالنسبة لهذه الدورة،

193
00:14:50,770 --> 00:14:56,210
سنبقى مع التكوين الافتراضي الذي يدعمه bootstrap.

194
00:14:56,210 --> 00:14:59,195
الآن، سلوك الشبكة في هذه الحالة،

195
00:14:59,195 --> 00:15:01,825
هو أن كل ما تم وضعه لصغيرة إضافية،

196
00:15:01,825 --> 00:15:04,885
سيكون أفقيا في جميع الأوقات،

197
00:15:04,885 --> 00:15:09,235
بالنسبة للبت الأعلى سيتم انهارها إلى عرض 2start،

198
00:15:09,235 --> 00:15:13,040
ولكن أفقي حول نقاط الاستراحة.

199
00:15:13,040 --> 00:15:17,855
سنرى كيف يعمل هذا في فترة قصيرة مع بعض الأمثلة.

200
00:15:17,855 --> 00:15:24,980
الآن، رأينا استخدام الحاوية في الشريحة السابقة.

201
00:15:24,980 --> 00:15:28,545
بالنسبة للشاشات الصغيرة الإضافية،

202
00:15:28,545 --> 00:15:32,895
يتم تحديد عرض الحاوية تلقائيًا بواسطة عرض الشاشة.

203
00:15:32,895 --> 00:15:34,575
ولكن بالنسبة للصغيرة والمتوسطة

204
00:15:34,575 --> 00:15:36,045
والكبيرة والكبيرة الزائدة،

205
00:15:36,045 --> 00:15:39,425
يكون عرض الحاوية كما هو محدد.

206
00:15:39,425 --> 00:15:42,600
لذلك، إذا كنت تستخدم div مع حاوية فئة،

207
00:15:42,600 --> 00:15:46,105
ثم للشاشات الصغيرة هو 540 بكسل.

208
00:15:46,105 --> 00:15:52,330
لذلك، ستلاحظ أنه إذا كان لديك عرض شاشة بين 576 إلى 768،

209
00:15:52,330 --> 00:15:56,485
فسيتم وضع المحتوى الخاص بك في 540 بكسل،

210
00:15:56,485 --> 00:16:00,670
وسيتم توسيط في عرض الشاشة.

211
00:16:00,670 --> 00:16:08,435
لذلك، سيتم ترك المساحة المتبقية كهوامش على جانبي هذا المحتوى.

212
00:16:08,435 --> 00:16:12,795
وبالمثل، بالنسبة للوسط، يكون 720 بكسل وما إلى ذلك.

213
00:16:12,795 --> 00:16:17,640
الآن، ثم يمكنك تحديد عدد الأعمدة التي يشغلها كل محتوى.

214
00:16:17,640 --> 00:16:20,885
ثم البادئات فئة العمود التي ستستخدمها

215
00:16:20,885 --> 00:16:26,670
هي.col صغيرة جدًا، .col-sm للصغيرة،

216
00:16:26,670 --> 00:16:29,420
على طول الطريق إلى كبيرة جدًا.

217
00:16:29,420 --> 00:16:31,625
إذا قمت بتحديد شيء مع.col-md،

218
00:16:31,625 --> 00:16:36,530
فهذا ينطبق على الشاشات المتوسطة إلى الكبيرة الإضافية.

219
00:16:36,530 --> 00:16:41,785
لذلك، كلما قمت بتحديد أي col وبعض الأرقام،

220
00:16:41,785 --> 00:16:47,895
فإن ذلك ينطبق على حجم الشاشة المحدد وكل شيء عن حجم الشاشة هذا.

221
00:16:47,895 --> 00:16:51,035
الآن، في جميع حالات حجم الشاشة،

222
00:16:51,035 --> 00:16:54,955
يتم تعريف عدد الأعمدة ليكون 12 عمودًا.

223
00:16:54,955 --> 00:17:02,345
تم تصميم الشبكة في حالة bootstrap لتكون 12 عمودًا وهذا قابل للتكوين،

224
00:17:02,345 --> 00:17:04,830
ولكن القيمة الافتراضية هي 12 عمودًا.

225
00:17:04,830 --> 00:17:10,355
السبب في اختيار 12 هو أن 12 هو مضاعف جيد من اثنين، ثلاثة،

226
00:17:10,355 --> 00:17:11,755
أربعة وهلم جرا.

227
00:17:11,755 --> 00:17:14,965
لذلك يمنحك الكثير من المرونة من حيث

228
00:17:14,965 --> 00:17:19,065
عدد الأعمدة التي تختارها لوضع المحتوى الخاص بك.

229
00:17:19,065 --> 00:17:22,345
بين كل عمود، لذلك إذا قمت بوضع

230
00:17:22,345 --> 00:17:25,510
قطعتين من المحتوى جنبًا إلى جنب مع divs الخاصة بهم،

231
00:17:25,510 --> 00:17:31,035
فبين هاتين القطعتين من المحتوى سيكونان مزراب صغير سيتم تركه.

232
00:17:31,035 --> 00:17:37,255
المساحة البيضاء الفارغة التي سيتم تركها بعيدًا عن عرض المزراب،

233
00:17:37,255 --> 00:17:41,030
وهو 30 بكسل فقط افتراضيًا.

234
00:17:41,030 --> 00:17:48,600
لذلك، 15 بكسل هو من قطعة واحدة من المحتوى و 15 بكسل من جزء آخر من المحتوى.

235
00:17:48,600 --> 00:17:53,470
سيتم ترك SumTotal معًا 30 بكسل من المساحة البيضاء بين قطعتي المحتوى.

236
00:17:53,470 --> 00:17:57,465
فكر في كيفية

237
00:17:57,465 --> 00:18:01,530
إجراء تخطيط عمود الصحيفة وتبدأ في رؤية المراسلات بين

238
00:18:01,530 --> 00:18:04,970
تخطيط عمود الصحيفة وكيف تقوم

239
00:18:04,970 --> 00:18:10,815
شبكة bootstrap بتخطيط المحتوى على ذلك الملعب.

240
00:18:10,815 --> 00:18:14,725
تتيح لك شبكة Bootastrap القيام بمحتوى المستوى التالي،

241
00:18:14,725 --> 00:18:20,710
بحيث يمكنك تضمين المحتوى داخل المحتوى ثم القيام بتخطيط المحتوى المتداخل.

242
00:18:20,710 --> 00:18:23,790
أيضا، فإنه يدعم الإزاحات.

243
00:18:23,790 --> 00:18:28,712
سنرى استخدام الإزاحات أيضًا في بعض الأمثلة لاحقًا.

244
00:18:28,712 --> 00:18:36,555
لذلك دعونا ننظر إلى المثال الأول لدينا لكيفية تطبيق فئات العمود بوتسترابس،

245
00:18:36,555 --> 00:18:41,515
وكيف سيتم تقديمها في الواقع على أحجام الشاشة المختلفة.

246
00:18:41,515 --> 00:18:47,310
في ما يلي مثال على الحالة التي تقدمت بها إلى اثنين من divs،

247
00:18:47,310 --> 00:18:53,510
واصلة العمود 12 ثم عمود واصلة sm خمسة

248
00:18:53,510 --> 00:18:56,050
للقطعة الحمراء من المحتوى

249
00:18:56,050 --> 00:19:00,980
وللآخر قمت بتطبيق واصلة العمود 12 والعمود sm سبعة.

250
00:19:00,980 --> 00:19:06,045
وبالتالي فإن الطريقة التي سيتم بها وضع هذا المحتوى هي لشاشات صغيرة إضافية،

251
00:19:06,045 --> 00:19:10,690
سيتم تكديس قطعتين من المحتوى واحدة فوق الأخرى.

252
00:19:10,690 --> 00:19:15,450
لذلك سيتم تكديس واحد أحمر على رأس البحر الأخضر اللون واحد.

253
00:19:15,450 --> 00:19:19,010
ولكن بالنسبة للشاشات الصغيرة إلى الكبيرة،

254
00:19:19,010 --> 00:19:22,310
سيتم وضع قطعتين من المحتوى جنبًا إلى جنب.

255
00:19:22,310 --> 00:19:27,490
والسبب في ذلك هو لأننا قلنا عمود sm خمسة والعمود sm سبعة للاثنين.

256
00:19:27,490 --> 00:19:31,510
لذلك بالنسبة للصغيرة إلى الكبيرة جدًا، يتم وضعها جنبًا إلى جنب

257
00:19:31,510 --> 00:19:36,210
بحيث يحتل المحتوى الأحمر

258
00:19:36,210 --> 00:19:45,945
خمسة أعمدة في أقصى اليسار وسيشغل المحتوى الأخضر البحري الأعمدة السبعة الصحيحة من الصف الخاص بك، على

259
00:19:45,945 --> 00:19:50,440
طول الطريق من أحجام الشاشة الصغيرة إلى الكبيرة جدًا.

260
00:19:50,440 --> 00:19:55,605
إذن هذه هي الطريقة التي نحدد بها تخطيط المحتوى لأحجام الشاشة المختلفة.

261
00:19:55,605 --> 00:20:00,220
يوفر Bootstrap أيضًا فئات إضافية تسمى

262
00:20:00,220 --> 00:20:07,055
فئات الواصلة Order والتي تسمح لك بإعادة ترتيب المحتوى على الشاشة.

263
00:20:07,055 --> 00:20:11,440
على سبيل المثال، إذا قمت بتطبيق أمر sm أولاً، فسيتم دفع

264
00:20:11,440 --> 00:20:15,200
طلب بعض الطبقة الأخيرة إلى divs،

265
00:20:15,200 --> 00:20:19,265
كما هو موضح في المثال هنا، في هذه الحالة،

266
00:20:19,265 --> 00:20:26,160
سيتم دفع div الذي تقوم بتطبيق النظام sm الأخير عليه إلى

267
00:20:26,160 --> 00:20:29,390
الجانب الأيمن من الشاشة

268
00:20:29,390 --> 00:20:33,125
وسيتم دفع الأمر sm div الأول إلى الجانب الأيسر من الشاشة.

269
00:20:33,125 --> 00:20:38,570
لذا، يسمح لك تطبيق فئات الترتيب هذه بإعادة ترتيب المحتوى على البرنامج النصي.

270
00:20:38,570 --> 00:20:45,000
ليس هذا فقط، يسمح لك النظام sm أيضًا بتحديد نفس الترتيب

271
00:20:45,000 --> 00:20:51,750
sm واحد لطلب sm 12 لتحديد الترتيب الذي يحتاج المحتوى إلى عرضه على الشاشة.

272
00:20:51,750 --> 00:20:53,850
لذا باستخدام رقم أكبر،

273
00:20:53,850 --> 00:20:57,395
يمكنك تحويل المحتوى إلى الجانب الأيمن

274
00:20:57,395 --> 00:21:01,795
من الصف وسيحول عدد أصغر المحتوى إلى الجانب الأيسر من الصف.

275
00:21:01,795 --> 00:21:05,785
سنرى مثالا على ذلك أيضا في التمرين.

276
00:21:05,785 --> 00:21:10,850
الدعم المختلط المثير للاهتمام الذي يجلبه Bootstrap Grid مع استخدام

277
00:21:10,850 --> 00:21:16,195
تخطيط Flexbox هو المحاذاة الرأسية للمحتوى.

278
00:21:22,315 --> 00:21:27,915
لم يكن لدى إصدارات Bootstrap السابقة، مثل Bootstrap 3 والإصدارات السابقة، القدرة على إجراء محاذاة رأسية للمحتوى.

279
00:21:27,915 --> 00:21:34,870
مع استخدام Flexbox لتصميم شبكة Bootstrap في Bootstrap أربعة،

280
00:21:34,870 --> 00:21:41,365
نحصل على المرونة التي يجلبها CSS Flexbox من حيث القيام المحاذاة الرأسية.

281
00:21:41,365 --> 00:21:46,295
لذلك إذا كنت تريد أن يكون المحتوى مركزًا عموديًا،

282
00:21:46,295 --> 00:21:48,370
فعندئذ إلى الصف،

283
00:21:48,370 --> 00:21:52,765
يمكنك تطبيق الفئة المسماة «محاذاة مركز العناصر».

284
00:21:52,765 --> 00:21:55,585
لذلك في هذه الحالة، أيا كان المحتوى الذي تم

285
00:21:55,585 --> 00:22:00,750
وضعه، سيتم وضعه بشكل عمودي داخل هذا الصف معين.

286
00:22:00,750 --> 00:22:03,560
وبالتالي فإن المحتوى الذي يحتل

287
00:22:03,560 --> 00:22:08,780
أكبر ارتفاع سيكون هو المحتوى الذي سيتم

288
00:22:08,780 --> 00:22:16,905
محاذاة ما تبقى منه عندما يتم وضعه في هذا الصف أو إذا قمت بتحديد ارتفاع الصف مسبقًا،

289
00:22:16,905 --> 00:22:24,935
فسيتم تركيز كل المحتوى عموديًا داخل هذا الصف المحدد هناك.

290
00:22:24,935 --> 00:22:30,795
ليس ذلك فقط، تدعم شبكة Bootstrap أيضًا المحاذاة الأفقية للمحتوى.

291
00:22:30,795 --> 00:22:32,400
دعونا ننظر إلى مثال.

292
00:22:32,400 --> 00:22:35,060
لذلك إذا قمت بتحديد المحتوى الخاص بك مثل هذا.

293
00:22:35,060 --> 00:22:40,320
قل، لديك ثلاثة أعمدة وأول واحد تقوم بتحديد عمود فئة div ثلاثة،

294
00:22:40,320 --> 00:22:44,140
ثم العمود الأوسط الذي ستقوله عمود فئة div تلقائي.

295
00:22:44,140 --> 00:22:47,010
سأعود إلى ذلك العمود التلقائي في فترة قصيرة.

296
00:22:47,010 --> 00:22:50,045
واليمين يقول عمود فئة div 3.

297
00:22:50,045 --> 00:22:53,065
لذلك في هذه الحالة، ما نحدده هو أن

298
00:22:53,065 --> 00:22:58,540
الأجزاء اليسرى واليمنى من المحتوى ستشغل ثلاثة أعمدة لكل منهما.

299
00:22:58,540 --> 00:23:02,120
الوسط، عندما أقول، «عمود تلقائي»،

300
00:23:02,120 --> 00:23:07,200
فهذا يعني أن عدد الأعمدة التي

301
00:23:07,200 --> 00:23:14,090
يشغلها هذا div معين سيتم تحديده تلقائيًا من خلال المحتوى الذي يتم تضمينه داخل هناك.

302
00:23:14,090 --> 00:23:16,840
وبناءً على المحتوى،

303
00:23:16,840 --> 00:23:21,710
سيقوم عدد الأعمدة التي يشغلها div بضبط نفسه تلقائيًا.

304
00:23:21,710 --> 00:23:25,070
في هذه الحالة بالذات، في هذا المخطط،

305
00:23:25,070 --> 00:23:31,040
يتم استيعاب هذا المحتوى الخاص ضمن أربعة أعمدة.

306
00:23:31,040 --> 00:23:34,985
حتى الآن لديك أربعة أعمدة يتم استخدامها من قبل div المركز،

307
00:23:34,985 --> 00:23:38,020
وثلاثة أعمدة على اليسار وثلاثة أعمدة على اليمين.

308
00:23:38,020 --> 00:23:40,650
حتى مجموع المجموع، لديك 10 أعمدة.

309
00:23:40,650 --> 00:23:43,730
لذلك لديك عمودين يتم تركهما فارغين.

310
00:23:43,730 --> 00:23:46,070
الآن، إذا قمت بتحديد الصف،

311
00:23:46,070 --> 00:23:50,165
فإنك تحدد ضبط مركز المحتوى، ثم،

312
00:23:50,165 --> 00:23:54,570
سيتم توسيط المحتوى بأكمله في هذا الصف معين فيما

313
00:23:54,570 --> 00:23:59,365
يتعلق بالصف الأفقي.

314
00:23:59,365 --> 00:24:02,080
يمكنك أيضًا الحصول على المحتوى المبرر لليسار،

315
00:24:02,080 --> 00:24:05,584
ومبرر لليمين، واثنين من الخيارات الأخرى.

316
00:24:05,584 --> 00:24:09,260
التفاصيل موجودة في وثائق bootstraps.

317
00:24:09,260 --> 00:24:13,755
يتيح لك Bootstrap أيضًا القيام بإزاحة الأعمدة.

318
00:24:13,755 --> 00:24:16,725
كيف يعمل هذا؟ دعونا ننظر إلى مثال.

319
00:24:16,725 --> 00:24:18,710
في هذا العمود إزاحة،

320
00:24:18,710 --> 00:24:21,320
يمكننا تحديد جزء من المحتوى،

321
00:24:21,320 --> 00:24:27,750
إضافة إلى ذلك إذا قمنا بتطبيق الفئة كوصلة إزاحة sm واصلة واحدة.

322
00:24:27,750 --> 00:24:33,585
ما نحدده هو للشاشات الصغيرة إلى الكبيرة الإضافية،

323
00:24:33,585 --> 00:24:38,425
يجب أن يتم تحويل جزء المحتوى هذا إلى اليمين بواسطة عمود واحد.

324
00:24:38,425 --> 00:24:41,970
لذلك عندما يتم وضع هذا المحتوى، كما ترون،

325
00:24:41,970 --> 00:24:49,560
يتم ترك عمود واحد في أقصى اليسار فارغًا ويتم تحويل المحتوى إلى اليمين بواسطة عمود واحد.

326
00:24:49,560 --> 00:24:52,925
ويمكنك تخطيط المحتوى المتبقي على الجانب الأيمن.

327
00:24:52,925 --> 00:24:55,860
لذلك مجموع المجموع، يمكنك أن ترى أن اثنين من divs سوف

328
00:24:55,860 --> 00:24:59,670
تحتل 11 عمودا ولكن عمود واحد إزاحة إلى اليمين.

329
00:24:59,670 --> 00:25:05,910
إذن هذه هي الطريقة التي يمكننا بها التحكم في تخطيط المحتوى باستخدام إزاحة العمود.

330
00:25:05,910 --> 00:25:07,380
لذلك كما ترون،

331
00:25:07,380 --> 00:25:11,280
باستخدام مواصفات حجم العمود،

332
00:25:11,280 --> 00:25:13,540
والمحاذاة الرأسية والأفقية،

333
00:25:13,540 --> 00:25:15,975
والإزاحة، والدفع والسحب،

334
00:25:15,975 --> 00:25:18,635
والمرن الأول والمرن الأخير،

335
00:25:18,635 --> 00:25:23,925
ونحن قادرون على الحصول على الكثير من السيطرة على كيفية وضع

336
00:25:23,925 --> 00:25:29,825
محتويات لعرض الشاشة المختلفة وأحجام الشاشة المختلفة .

337
00:25:29,825 --> 00:25:36,800
يذهب Bootstrap إلى أبعد من ذلك من خلال السماح لك بتضمين المحتوى داخل divs.

338
00:25:36,800 --> 00:25:39,585
على سبيل المثال، إذا قمت بتحديد اثنين من divs،

339
00:25:39,585 --> 00:25:43,130
كما ترى مع العمود sm خمسة والعمود sm سبعة،

340
00:25:43,130 --> 00:25:45,725
سيتم وضع اثنين من المحتويات كما هو موضح هنا.

341
00:25:45,725 --> 00:25:48,265
الآن، داخل div الأيمن،

342
00:25:48,265 --> 00:25:50,630
يمكنني مرة أخرى

343
00:25:50,630 --> 00:25:58,080
الدخول وتقسيم عرض div إلى صف ثم سيعطيني هذا الصف تلقائيًا

344
00:25:58,080 --> 00:26:04,960
12 عمودًا آخر لهذا الجزء من الشاشة ثم يمكنني بعد ذلك القيام بالتخطيط باستخدام

345
00:26:04,960 --> 00:26:13,330
تعشيش divs والقيام بالتخطيط لأجزاء مختلفة من هذا العمود .

346
00:26:13,330 --> 00:26:15,595
لذلك التعشيش مثل هذا،

347
00:26:15,595 --> 00:26:23,570
يجلب لك المزيد من المرونة في الطريقة التي تضع بها المحتوى في الملعب الخاص بك.

348
00:26:23,570 --> 00:26:27,910
مع كل النقاش حول نظام شبكة Bootstrap وكيف

349
00:26:27,910 --> 00:26:34,280
تدعم شبكة Bootstrap طرقًا مختلفة لوضع المحتوى،

350
00:26:34,280 --> 00:26:39,670
سنقوم الآن، ننتقل إلى مجموعتنا التالية من التمارين.

351
00:26:39,670 --> 00:26:45,820
سنقوم بتطبيق شبكة Bootstrap على صفحة index.html الخاصة بنا

352
00:26:45,820 --> 00:26:52,770
من أجل القيام بتخطيط المحتوى داخل أو صفحة index.html.

353
00:26:52,770 --> 00:26:57,350
سنستخدم أيضًا بعض فئات CSS المخصصة.