1
00:00:03,750 --> 00:00:11,555
يبحث التمرين التالي في طرق عرض المحتوى على صفحة الويب الخاصة بنا.

2
00:00:11,555 --> 00:00:17,190
ينظرون إلى كيف يمكننا تضمين الجداول في صفحة الويب الخاصة بنا وكيف يمكننا

3
00:00:17,190 --> 00:00:23,845
تصميم تلك الجداول باستخدام فصول Bootstrap لجداول التصميم،

4
00:00:23,845 --> 00:00:27,720
بما في ذلك تصميم الجداول المتجاوب.

5
00:00:27,720 --> 00:00:30,860
سننظر أيضًا في مكون آخر متعدد الاستخدامات

6
00:00:30,860 --> 00:00:34,290
متوفر في Bootstrap يسمى كبطاقة.

7
00:00:34,290 --> 00:00:39,125
تسمح لك البطاقة بعرض المحتوى بملايين الطرق.

8
00:00:39,125 --> 00:00:44,495
لذلك سننظر في طريقتين مختلفتين لاستخدام بطاقة لعرض المحتوى.

9
00:00:44,495 --> 00:00:49,275
في وقت لاحق، سوف نرى استخدام البطاقات مرارا وتكرارا

10
00:00:49,275 --> 00:00:56,635
للتصاميم المستقبلية لأجزاء معينة من موقعنا على الانترنت.

11
00:00:56,635 --> 00:01:02,520
للبدء، افتح صفحة aboutus.html.

12
00:01:02,520 --> 00:01:06,035
نحن ذاهبون لإدراج جدول ورقتين

13
00:01:06,035 --> 00:01:10,215
في صفحة aboutus.html لعرض بعض البطاقة.

14
00:01:10,215 --> 00:01:19,130
أولا، دعونا انتقل ببطء إلى أسفل حتى بعد تلك البطاقة للحصول على معلومات القيادة،

15
00:01:19,130 --> 00:01:23,170
وهناك الحق أنا ذاهب لتقديم ديف آخر

16
00:01:23,170 --> 00:01:28,045
الذي أنا ذاهب إلى أرفق الجدول هنا.

17
00:01:28,045 --> 00:01:31,640
لذلك، سوف أعرض صفًا جديدًا هنا،

18
00:01:31,640 --> 00:01:38,135
مع الفصل كصف صف المحتوى.

19
00:01:38,135 --> 00:01:41,185
وداخل هذا div،

20
00:01:41,185 --> 00:01:51,205
سنقدم عمودًا يستضيف الجدول هنا.

21
00:01:51,205 --> 00:01:55,850
لذلك، سوف أعرض عمود، العمود 12،

22
00:01:55,870 --> 00:02:05,045
العمود سم-9 وإغلاق ديف.

23
00:02:05,045 --> 00:02:11,605
وداخل div، اسمحوا لي أن أعطي عنوان هنا

24
00:02:11,605 --> 00:02:21,940
حقائق وأرقام وإغلاق h2.

25
00:02:23,490 --> 00:02:29,770
مباشرة بعد ذلك، اسمحوا لي أن أعرض ديف آخر،

26
00:02:33,140 --> 00:02:43,320
أن العمود الطبقات سم والعمود سم-3 وإغلاق هذا ديف هناك.

27
00:02:43,320 --> 00:02:46,850
الآن نحن ذاهبون إلى ترك div الثاني فارغة.

28
00:02:46,850 --> 00:02:53,140
أنا ذاهب لملء الجدول في ديف الأول هنا

29
00:02:53,140 --> 00:03:00,435
وبعد ذلك سوف نلقي نظرة سريعة على الجدول بعد أن أضيف في التعليمات البرمجية للجدول.

30
00:03:00,435 --> 00:03:04,525
حتى هنا لقد أدرجت في التعليمات البرمجية للجدول.

31
00:03:04,525 --> 00:03:12,190
دعونا نلقي نظرة سريعة على الطاولة ومن ثم سنعود لمناقشة هذا الرمز هنا.

32
00:03:12,190 --> 00:03:20,075
الذهاب إلى صفحة «حول» التي كنا نعمل عليها بالفعل من وقت سابق،

33
00:03:20,075 --> 00:03:23,080
بعد قسم قيادة الشركات،

34
00:03:23,080 --> 00:03:27,645
سترى صف جديد هنا يقدم الجدول.

35
00:03:27,645 --> 00:03:30,270
لذلك، لاحظ كيف يتم تصميم الجدول،

36
00:03:30,270 --> 00:03:36,695
لذلك لدينا رأس مع h2 المدرجة هناك،

37
00:03:36,695 --> 00:03:40,465
ولكن دعونا نركز خصيصا على هذا الجدول.

38
00:03:40,465 --> 00:03:43,735
لذلك ترى أن هذا الجدول قد تم تصميمه

39
00:03:43,735 --> 00:03:48,125
باستخدام بعض فئات Bootstrap المستخدمة لتحسين الجدول.

40
00:03:48,125 --> 00:03:54,735
تم تقديم رأس مع خلفية داكنة،

41
00:03:54,735 --> 00:04:00,770
ومن ثم تم تصميم جميع القواعد في مثل هذه الطريقة أن الصفوف البديلة هي

42
00:04:00,770 --> 00:04:07,295
في لون مختلف بحيث يمكنك التمييز بوضوح بين صفوف هذا الجدول.

43
00:04:07,295 --> 00:04:13,185
هذا هو ما يشار إليه في شروط Bootstrap كجدول مخطط.

44
00:04:13,185 --> 00:04:17,360
هذا مثال واحد على كيفية تصميم جدول. من

45
00:04:17,360 --> 00:04:23,250
المثير للاهتمام الآن، إذا نظرت إلى نفس الجدول في جهاز صغير،

46
00:04:23,250 --> 00:04:25,420
ستلاحظ أن الجدول لا يزال

47
00:04:25,420 --> 00:04:29,450
مرئيًا باستثناء أن هذا الجدول يصبح الآن قابلاً للتمرير.

48
00:04:29,450 --> 00:04:34,280
لذلك، سيتم عرض أي شيء يمكن عرضه داخل المحتوى

49
00:04:34,280 --> 00:04:39,120
ويمكن تمرير بقية الجدول أفقيا في مكانه.

50
00:04:39,120 --> 00:04:47,840
لذلك هذا هو المكون المتجاوب لدعم Bootstrap للجداول في العمل.

51
00:04:47,840 --> 00:04:52,120
الآن دعونا نذهب ونلقي نظرة على التعليمات البرمجية نفسها.

52
00:04:52,120 --> 00:04:54,970
الآن من الواضح أن هذا الجدول هو واضح إلى حد

53
00:04:54,970 --> 00:04:57,924
ما، لديه مجموعة من الصفوف وبعض الأعمدة.

54
00:04:57,924 --> 00:05:02,070
لذلك عليك أن تتوقع مني استخدام

55
00:05:02,070 --> 00:05:06,365
علامات th، td و tr النموذجية هناك.

56
00:05:06,365 --> 00:05:08,225
التبديل مرة أخرى إلى التعليمات البرمجية،

57
00:05:08,225 --> 00:05:12,490
ستلاحظ أنني أرفق هذا الجدول داخل

58
00:05:12,490 --> 00:05:16,840
div الذي قمت بتطبيق جدول الفئة استجابة.

59
00:05:16,840 --> 00:05:19,700
لذلك هذا هو ما يجعل هذا الجدول يستجيب بحيث على

60
00:05:19,700 --> 00:05:24,490
شاشات أصغر يمكنك تمرير أفقيا الجدول.

61
00:05:24,490 --> 00:05:26,720
الآن للجدول نفسه،

62
00:05:26,720 --> 00:05:29,800
لاحظ كيف طبقت فئتين.

63
00:05:29,800 --> 00:05:31,230
واحد هو فئة الجدول،

64
00:05:31,230 --> 00:05:34,825
لذلك هذا هو تجاوز

65
00:05:34,825 --> 00:05:39,375
عرض الجدول الافتراضي على المتصفحات من خلال توفير فئات Bootstrap الخاصة.

66
00:05:39,375 --> 00:05:41,760
والثاني يقول الجدول مخطط.

67
00:05:41,760 --> 00:05:48,280
لذلك هذا هو ما يصمم جدول مع صفوف بديلة بألوان مختلفة هنا.

68
00:05:48,280 --> 00:05:50,610
ثم الرأس نفسه،

69
00:05:50,610 --> 00:05:55,050
حتى تتمكن من رؤية أن الرؤوس الموصوفة هنا مع الطبقة thead-dark،

70
00:05:55,050 --> 00:05:57,925
لذلك هذا يجعل الرأس مظلمة.

71
00:05:57,925 --> 00:06:06,630
ثم سترى الجدول رسم نفسه وصفها هنا مع العلامات عشر هنا.

72
00:06:06,630 --> 00:06:09,480
لذلك هذا هو تعريف الجدول القياسي.

73
00:06:09,480 --> 00:06:16,410
إن جسم الجدول نفسه هو استخدام html القياسي لـ tr،

74
00:06:16,410 --> 00:06:22,760
و td، والعناصر التي كنت معتادًا عليها بالفعل في html5.

75
00:06:22,760 --> 00:06:27,180
لذلك، هذا هو ما يتم بناء الجدول مع،

76
00:06:27,180 --> 00:06:31,075
ومن ثم إغلاق الجسم الجدول. لذا هذا حول هذا الموضوع

77
00:06:31,075 --> 00:06:36,670
لذلك نحن كل ما هو فريد من نوعه حول Bootstrap نفسه هو تطبيق

78
00:06:36,670 --> 00:06:40,060
فئات Bootstrap المحددة هذه على

79
00:06:40,060 --> 00:06:47,130
عنصر الجدول نفسه لتصميمه بشكل أكبر،

80
00:06:47,130 --> 00:06:51,360
لتتناسب مع صفحة ويب تصميم Bootstrap.

81
00:06:51,360 --> 00:06:55,360
المكون التالي الذي سأقوم بإضافته إلى

82
00:06:55,360 --> 00:06:59,595
صفحة aboutus.html هو مكون بطاقة في Bootstrap.

83
00:06:59,595 --> 00:07:02,650
يسمح لنا مكون البطاقة بعرض المحتوى

84
00:07:02,650 --> 00:07:06,850
عن طريق تعيينه بعيدًا عن باقي المحتوى.

85
00:07:06,850 --> 00:07:12,925
الآن هنا، التمرير إلى الصف الأول هنا،

86
00:07:12,925 --> 00:07:16,925
هناك لدينا تاريخنا في استخدام div الثاني،

87
00:07:16,925 --> 00:07:20,915
لاحظ أن div الأول يشغل بالفعل col-sM-6،

88
00:07:20,915 --> 00:07:23,915
div الثاني فارغ حاليًا.

89
00:07:23,915 --> 00:07:25,355
لذا إلى هذا div،

90
00:07:25,355 --> 00:07:31,320
سأضيف في الفصل باسم col-sm.

91
00:07:31,320 --> 00:07:40,670
بعد ذلك، الخوض في هذا div سأعرض div آخر إلى بطاقة الفصل هنا.

92
00:07:40,670 --> 00:07:42,325
حتى داخل تلك ديف،

93
00:07:42,325 --> 00:07:46,755
وأنا ذاهب لبناء بطاقة بلدي لعرض بعض المحتوى هنا.

94
00:07:46,755 --> 00:07:53,870
حتى في هذا div، سوف نقدم h3 أن

95
00:07:53,870 --> 00:08:05,235
الطبقة كما بطاقة رأس bg-الابتدائي.

96
00:08:05,235 --> 00:08:08,110
لذلك سترى أنه سيتم عرض هذا h3

97
00:08:08,110 --> 00:08:12,755
كرأس بطاقة مع تلك الخلفية كأساسي

98
00:08:12,755 --> 00:08:21,165
ثم النص الأبيض الذي ستحدد فئة Bootstrap النص ليكون أبيض اللون.

99
00:08:21,165 --> 00:08:24,715
ثم داخل هذا H3،

100
00:08:24,715 --> 00:08:31,090
أنا ذاهب لتقديم عنوان هذه البطاقة هنا

101
00:08:31,090 --> 00:08:37,580
وهو «حقائق في لمحة».

102
00:08:37,580 --> 00:08:41,950
حتى أتمكن من عرض بعض المحتوى داخل هذا div هنا.

103
00:08:41,950 --> 00:08:44,915
الآن، إلى هذه البطاقة،

104
00:08:44,915 --> 00:08:48,520
بعد ذلك أنا ذاهب إلى إضافة في div الداخلية آخر

105
00:08:48,520 --> 00:08:55,950
هنا مع الطبقة كما بطاقة الجسم،

106
00:08:55,950 --> 00:08:59,080
وداخل هذه البطاقة الجسم سيكون

107
00:08:59,080 --> 00:09:03,370
المحتوى الفعلي الذي تم عرضه في هذه البطاقة.

108
00:09:03,370 --> 00:09:10,310
دعونا حفظ التغييرات ثم انتقل وإلقاء نظرة بسرعة على صفحة الويب الخاصة بنا.

109
00:09:10,310 --> 00:09:12,100
الذهاب إلى صفحة الويب الخاصة بنا،

110
00:09:12,100 --> 00:09:15,860
يمكننا أن نرى بالفعل البطاقة تتشكل في صفحة الويب الخاصة بنا،

111
00:09:15,860 --> 00:09:19,620
حتى تتمكن من رؤية أن النصف الأيسر يشغله التاريخ

112
00:09:19,620 --> 00:09:24,085
والنصف الأيمن سترى البطاقة وضعت في مكانها.

113
00:09:24,085 --> 00:09:27,135
دعونا نضيف بعض المحتوى إلى هذه البطاقة.

114
00:09:27,135 --> 00:09:29,140
الذهاب إلى كتلة البطاقة هذه،

115
00:09:29,140 --> 00:09:32,220
والآن سأستخدم قائمة وصف

116
00:09:32,220 --> 00:09:36,080
وهذه القائمة الوصف في Bootstrap تسمح لي

117
00:09:36,080 --> 00:09:45,705
بتطبيق فئات الصف والعمود عليها وبالتالي تنسيق المحتوى في الداخل.

118
00:09:45,705 --> 00:09:48,360
حتى داخل هذه القائمة الوصف،

119
00:09:48,360 --> 00:09:52,190
وأنا ذاهب لإضافة

120
00:09:54,890 --> 00:10:00,110
في dt أن الطبقة و col-6 هنا،

121
00:10:00,110 --> 00:10:03,420
وهذا يعني أن هذا سوف تحتل ستة أعمدة

122
00:10:03,420 --> 00:10:07,085
داخل هذه القائمة الوصف التي هي في حد ذاتها صف هنا.

123
00:10:07,085 --> 00:10:13,785
حتى التعشيش كما ترون القادمة إلى الصورة هنا.

124
00:10:13,785 --> 00:10:16,250
لذا إلى هذا dt،

125
00:10:16,250 --> 00:10:20,190
سأقوم بإضافة عنوان الوصف هذا هنا،

126
00:10:20,190 --> 00:10:25,470
ثم أدناه سأضيف في dd مع

127
00:10:25,470 --> 00:10:33,330
الفصل col-6 هنا وبعد ذلك يمكنني أن أضيف في بعض السياق هنا.

128
00:10:36,960 --> 00:10:40,310
و هنا

129
00:10:41,880 --> 00:10:46,755
دعونا حفظ التغييرات ونلقي نظرة سريعة على بطاقتنا.

130
00:10:46,755 --> 00:10:50,445
الذهاب إلى بطاقتنا، يمكنك الآن أن ترى كيف

131
00:10:50,445 --> 00:10:55,265
تسمح لي قائمة الوصف بعرض المعلومات.

132
00:10:55,265 --> 00:11:02,700
داخل بطاقتي، يمكنك أن ترى الجانب الأيسر والجانب الأيمن عرض بوضوح.

133
00:11:02,700 --> 00:11:07,035
هنا نحن الاستفادة من قائمة الوصف،

134
00:11:07,035 --> 00:11:09,215
وإضافة في المعلومات هناك.

135
00:11:09,215 --> 00:11:14,590
اسمحوا لي أن أنهي الأجزاء المتبقية هنا بإضافة في التعليمات البرمجية،

136
00:11:14,590 --> 00:11:19,745
ثم أعود وألقي نظرة على النسخة النهائية من هذه البطاقة.

137
00:11:19,745 --> 00:11:22,850
هنا، يمكنك أن ترى أنني قد أكملت إضافة

138
00:11:22,850 --> 00:11:25,895
في الأجزاء المتبقية من قائمة الوصف الخاصة بي.

139
00:11:25,895 --> 00:11:31,155
دعونا نذهب ونلقي نظرة سريعة على النسخة النهائية من تلك البطاقة.

140
00:11:31,155 --> 00:11:33,290
إلقاء نظرة على البطاقة،

141
00:11:33,290 --> 00:11:34,620
وكيف تتشكل.

142
00:11:34,620 --> 00:11:39,340
هنا، يمكنك الآن أن ترى كيف يمكننا الاستفادة من بطاقة لعرض

143
00:11:39,340 --> 00:11:41,760
بعض المحتوى في صفحة الويب الخاصة بنا

144
00:11:41,760 --> 00:11:44,725
وتمييزه عن بقية المحتوى إلى صفحة الويب.

145
00:11:44,725 --> 00:11:50,325
لذا، فإن البطاقة عبارة عن مكون متعدد الاستخدامات يسمح لنا بعرض محتوى كهذا.

146
00:11:50,325 --> 00:11:52,500
دعونا نواصل مع هذا التمرين،

147
00:11:52,500 --> 00:11:56,785
مضيفا في بطاقة أخرى إلى صفحة الويب هذه.

148
00:11:56,785 --> 00:12:01,410
دعونا الآن نعود مرة أخرى إلى صفحة aboutus.html لدينا.

149
00:12:01,410 --> 00:12:06,170
والحق تحت البطاقة التي قمنا بإضافتها سابقا،

150
00:12:06,170 --> 00:12:14,790
وأنا ذاهب لإضافة في ديف آخر مع فئة «كول-12" هنا.

151
00:12:14,790 --> 00:12:16,910
ثم، داخل هذا div،

152
00:12:16,910 --> 00:12:24,670
سأقوم ببناء بطاقة أخرى هنا لعرض بعض المعلومات الإضافية.

153
00:12:24,670 --> 00:12:26,495
حتى داخل هذا ديف،

154
00:12:26,495 --> 00:12:30,210
وسوف بناء بطاقة مع

155
00:12:30,210 --> 00:12:38,915
فئة «بطاقة الجسم bg-light بطاقة.»

156
00:12:38,915 --> 00:12:45,580
لذلك، سترى أنني أطبق كل من البطاقة وجسم البطاقة إلى نفس div هنا.

157
00:12:45,580 --> 00:12:49,300
وهذا يعني أن هذه البطاقة معينة لن يكون لها

158
00:12:49,300 --> 00:12:54,835
أي رأس بطاقة ولكن بدلا من ذلك يحتوي فقط على بطاقة الجسم هنا.

159
00:12:54,835 --> 00:12:59,545
وبعد ذلك، أيضا، يعني ضوء bg أن الخلفية ستكون في لون تلاشى.

160
00:12:59,545 --> 00:13:05,120
إلى حد ما من لون رمادي إضافة إلى الخلفية.

161
00:13:05,120 --> 00:13:10,495
لذلك هذا أيضا تسعى هذه البطاقة بغض النظر عن بقية المحتوى هنا.

162
00:13:10,495 --> 00:13:12,815
الآن، داخل هذه البطاقة،

163
00:13:12,815 --> 00:13:16,250
سأستفيد من رمز كتلة لعرض

164
00:13:16,250 --> 00:13:20,700
بعض المعلومات المضحكة المثيرة للاهتمام هناك.

165
00:13:20,700 --> 00:13:23,980
لذلك سأستخدم blockquote.

166
00:13:23,980 --> 00:13:30,965
هذا هو أيضا علامة HTML هنا.

167
00:13:30,965 --> 00:13:37,005
ثم إلى هذا، سأقوم بتطبيق فئة blockquote من Bootstrap.

168
00:13:37,005 --> 00:13:42,590
لذلك يقوم Bootstrap بتصميم هذا blockquote بطريقته الخاصة.

169
00:13:42,980 --> 00:13:46,429
لذلك دعونا نغلق هذا القلوب.

170
00:13:46,429 --> 00:13:47,870
وداخل هذا blockquote،

171
00:13:47,870 --> 00:13:51,910
سأقوم بتضمين اقتباس هنا.

172
00:13:51,910 --> 00:13:54,320
لذلك سأبدأ مع p،

173
00:13:54,320 --> 00:13:56,760
وتطبيق فئة تسمى mb-0.

174
00:13:56,760 --> 00:14:02,920
و mb-0 هي فئة الأداة المساعدة التي يوفرها Bootstrap.

175
00:14:02,920 --> 00:14:05,775
ما يعنيه هذا هو الهامش السفلي صفر.

176
00:14:05,775 --> 00:14:09,640
لهذا على وجه الخصوص، أيا كان تضمينه في هذه العلامة p،

177
00:14:09,640 --> 00:14:12,135
سيكون لدينا هامش سفلي من الصفر.

178
00:14:12,135 --> 00:14:15,865
وهذا يساعدني على عرض المحتوى بشكل صحيح هنا.

179
00:14:15,865 --> 00:14:24,900
حتى هنا أنا ذاهب لإضافة في المحتوى الفعلي هناك،

180
00:14:49,850 --> 00:14:54,970
ومن ثم إغلاق هذا ص لذلك هذا ص يحتوي على الاقتباس الفعلي.

181
00:14:54,970 --> 00:14:56,560
الآن، إلى هذا الاقتباس،

182
00:14:56,560 --> 00:14:59,180
بحيث ترى أنه في المحتوى الخاص بك،

183
00:14:59,180 --> 00:15:05,320
يمكنك أيضًا تضمين عروض الأسعار في شفرتك هناك.

184
00:15:05,320 --> 00:15:10,730
لذلك، يمكنني أيضًا إضافة تذييل مع الفصل الدراسي.

185
00:15:10,730 --> 00:15:14,900
لذلك اسمحوا لي أن دفع المسافة البادئة للتذييل.

186
00:15:14,900 --> 00:15:20,080
لذا فإن هذا التذييل هو أيضًا فئة يدعمها blockquote.

187
00:15:20,080 --> 00:15:26,620
لذلك كل ما قمت بتضمينه في blockquote،

188
00:15:28,570 --> 00:15:31,105
جنبا إلى جنب مع تذييل الصفحة،

189
00:15:31,105 --> 00:15:39,540
سوف تمكنك من عرض مؤلف هذا الاقتباس.

190
00:15:40,420 --> 00:15:45,620
لذلك أنا هنا بما في ذلك المؤلف،

191
00:15:45,620 --> 00:15:49,165
ثم واحد آخر.

192
00:15:49,165 --> 00:15:58,860
باستخدام الاستشهاد، يمكنني حتى الاستشهاد بمصدر هذا الاقتباس.

193
00:16:01,740 --> 00:16:04,790
لذا يمكنك أن ترى ذلك

194
00:16:24,870 --> 00:16:32,955
مرة أخرى، هذا هو مجرد بعض الاقتباس الذي أستخدمه فقط للمتعة لتظهر لك،

195
00:16:32,955 --> 00:16:35,355
وأيضا في نفس الوقت توضيح،

196
00:16:35,355 --> 00:16:42,405
كيف يعمل blockquote،

197
00:16:42,405 --> 00:16:47,800
وأيضا كيف يمكننا إنشاء نوع آخر من البطاقة في Bootstrap.

198
00:16:47,800 --> 00:16:55,845
لذلك مع هذا، أضفنا في التعليمات البرمجية لعرض blockquote هنا.

199
00:16:55,845 --> 00:16:57,890
لذلك اسمحوا لي أن أرى إذا كان هذا التغيير،

200
00:16:57,890 --> 00:17:04,995
وبعد ذلك سوف نذهب ونلقي نظرة على كيفية عرض هذا الاقتباس في صفحتنا على شبكة الإنترنت.

201
00:17:04,995 --> 00:17:09,270
الذهاب إلى المتصفح، في صفحتنا،

202
00:17:09,270 --> 00:17:14,310
يمكنك أن ترى أن تاريخنا والحقائق في لمحة يتم عرضها جنبا إلى جنب.

203
00:17:14,310 --> 00:17:22,360
أسفل ذلك، لدي هذه القطعة الطويلة من المحتوى هنا.

204
00:17:22,360 --> 00:17:27,850
دعونا نلقي نظرة على نفس الصفحة في شاشة صغيرة إضافية.

205
00:17:27,850 --> 00:17:29,250
لذلك في شاشة صغيرة إضافية،

206
00:17:29,250 --> 00:17:33,840
يمكنك أن ترى أن التاريخ والحقائق مكدسة في الأعلى،

207
00:17:33,840 --> 00:17:38,120
والاقتباس هو أسفل هنا في بطاقتها الخاصة.

208
00:17:38,120 --> 00:17:40,130
حتى تتمكن من رؤية ورقتين،

209
00:17:40,130 --> 00:17:42,225
واحدة أسفل أخرى هنا،

210
00:17:42,225 --> 00:17:45,860
ومن ثم الجدول نفسه عرض في الجزء السفلي.

211
00:17:45,860 --> 00:17:50,685
وبالتالي فإن الجدول نفسه هو جدول للتمرير هنا.

212
00:17:50,685 --> 00:17:54,885
لذلك مع هذا، نكمل هذا التمرين.

213
00:17:54,885 --> 00:17:56,330
لذلك في هذا التمرين،

214
00:17:56,330 --> 00:18:05,950
تعلمنا كيف يمكننا استخدام الجداول والبطاقات لعرض المحتوى في صفحة الويب الخاصة بنا.

215
00:18:05,950 --> 00:18:08,690
الآن بعد أن أكملنا هذا التمرين

216
00:18:08,690 --> 00:18:12,610
، حان الوقت للقيام بالتزام git.