1
00:00:03,910 --> 00:00:06,210
حزام على الأحذية الخاصة بك،

2
00:00:06,210 --> 00:00:08,470
ودعونا نبدأ مع Bootstrap.

3
00:00:08,470 --> 00:00:13,045
أنا متأكد من أن أصابعك حكة للحصول على يديك حول Bootstrap.

4
00:00:13,045 --> 00:00:18,250
لذلك، الخطوة الأولى، انتقل إلى

5
00:00:18,250 --> 00:00:22,280
تعليمات التمرين التي تتبع هذا الفيديو

6
00:00:22,280 --> 00:00:27,805
في صفحة دورة Bootstrap على Coursera.

7
00:00:27,805 --> 00:00:29,840
ثم في التعليمات،

8
00:00:29,840 --> 00:00:35,520
سترى رابطا لهذا الملف Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
قم بتنزيل ملف zip إلى جهاز الكمبيوتر الخاص بك.

10
00:00:39,695 --> 00:00:46,610
أيضا،

11
00:00:46,610 --> 00:00:52,995
سيتم أيضا إعطاء التعليمات خطوة بخطوة التي يتم توضيحها في هذا الفيديو في تعليمات التمرين التي تتبع هذا الفيديو.

12
00:00:52,995 --> 00:01:00,595
هناك، سيكون لديك حق الوصول إلى أي من مقتطفات الشفرة التي تحتاجها لهذا التمرين.

13
00:01:00,595 --> 00:01:04,920
و سيكون هذا هو الحال بالنسبة لجميع التدريبات في المستقبل أيضا.

14
00:01:04,920 --> 00:01:08,125
لذا، إذا كنت بحاجة إلى الحصول على مقتطفات الشفرة،

15
00:01:08,125 --> 00:01:10,145
فهذا هو المكان الذي ستجدها فيه.

16
00:01:10,145 --> 00:01:12,180
بمجرد تنزيل ملف zip، قم

17
00:01:12,180 --> 00:01:16,230
بنقل ملف zip هذا إلى موقع مناسب على جهاز الكمبيوتر الخاص بك.

18
00:01:16,230 --> 00:01:23,375
لذا، هنا، قمت بنقله إلى مجلد اسمه كورسيرا على جهاز الكمبيوتر الخاص بي،

19
00:01:23,375 --> 00:01:27,145
وبعد ذلك لدي ملف مضغوط مع هذا الاسم الطويل هناك.

20
00:01:27,145 --> 00:01:28,765
فقط قم بفك ضغط الملف

21
00:01:28,765 --> 00:01:30,445
بمجرد فك ضغط الملف،

22
00:01:30,445 --> 00:01:36,715
ستجد مجلدًا باسم Bootstrap4 تم إنشاؤه في جهاز الكمبيوتر الخاص بك.

23
00:01:36,715 --> 00:01:38,965
داخل المجلد Bootstrap4،

24
00:01:38,965 --> 00:01:42,450
سترى مجلد آخر اسمه الارتباك، هناك.

25
00:01:42,450 --> 00:01:46,260
انتقل إلى مجلد الارتباك وسترى ملفين هناك،

26
00:01:46,260 --> 00:01:49,600
index.html وملف package.json.

27
00:01:49,600 --> 00:01:53,795
الآن، افتح إطار أوامر أو

28
00:01:53,795 --> 00:02:00,290
محطة طرفية ثم انتقل إلى هذا المجلد في إطار الأوامر أو المحطة الطرفية.

29
00:02:00,290 --> 00:02:05,125
في موجه الأوامر، اكتب npm install.

30
00:02:05,125 --> 00:02:09,150
لاحظ أن لدي بالفعل ملف package.json هناك.

31
00:02:09,150 --> 00:02:12,745
لذلك يتم تكوين ملف package.json بحيث يتم تثبيت

32
00:02:12,745 --> 00:02:19,200
تبعية تطوير خادم lite-إذا قمت بكتابة تثبيت npm.

33
00:02:19,200 --> 00:02:21,150
لذا، بمجرد كتابة تثبيت npm،

34
00:02:21,150 --> 00:02:27,160
سترى أنه سيتم تثبيت خادم lite-في مجلد node_modules لكل منهما.

35
00:02:27,160 --> 00:02:30,415
بمجرد اكتمال ذلك،

36
00:02:30,415 --> 00:02:35,930
افتح هذا المجلد في المحرر المفضل لديك.

37
00:02:35,930 --> 00:02:39,060
بمجرد فتح المجلد في المحرر الخاص بك،

38
00:02:39,060 --> 00:02:45,170
قم بإنشاء ملف.gitignore

39
00:02:45,170 --> 00:02:50,530
ثم ضع node_modules في ملف gitignore وحفظه.

40
00:02:50,530 --> 00:02:54,940
لذلك هذا هو التأكد من أنه عند القيام gitcommit،

41
00:02:54,940 --> 00:02:57,615
لن يتم الالتزام مجلد node_modules.

42
00:02:57,615 --> 00:03:05,475
بعد ذلك، حان الوقت للذهاب وجلب Bootstrap للاستخدام في مشروعنا.

43
00:03:05,475 --> 00:03:08,050
قبل أن نجلب Bootstrap

44
00:03:08,050 --> 00:03:11,810
، دعنا نفعل الالتزام بالحالة الحالية للملف.

45
00:03:11,810 --> 00:03:18,535
لذلك، قم بـ git init وتهيئة مستودع git الخاص بك.

46
00:03:18,535 --> 00:03:21,600
ثم يمكنك التحقق من حالة git،

47
00:03:21,600 --> 00:03:25,290
وسترى أن هذه الملفات تحتاج إلى الالتزام بها،

48
00:03:25,290 --> 00:03:29,315
إضافة جميع الملفات،

49
00:03:29,315 --> 00:03:38,885
gitcommit -m «الإعداد الأولي».

50
00:03:38,885 --> 00:03:43,745
إذن هذه هي نقطة البداية للمجلد الخاص بك في هذه اللحظة.

51
00:03:43,745 --> 00:03:52,785
لذلك، مع هذا، تم الآن التزام نقطة البداية لمشروع الويب الخاص بك إلى git.

52
00:03:52,785 --> 00:03:57,770
الآن يمكنك إعداد هذا git لمزامنة مع مستودع عبر الإنترنت،

53
00:03:57,770 --> 00:04:00,800
تمامًا كما تحدثنا عنه في تمارين git.

54
00:04:00,800 --> 00:04:05,690
لذلك يمكنك إعداد مستودع إما على Bitbucket أو على Github ثم

55
00:04:05,690 --> 00:04:11,430
مزامنة هذا المشروع إلى مستودع git هذا.

56
00:04:11,430 --> 00:04:15,265
خطوتنا التالية هي الذهاب وجلب Bootstrap.

57
00:04:15,265 --> 00:04:25,260
للقيام بذلك، أضف نوع المطالبة npm تثبيت bootstrap @4 .0.0 وأيضًا -

58
00:04:25,260 --> 00:04:29,470
save، والسماح بتثبيت Bootstrap.

59
00:04:29,470 --> 00:04:31,880
بمجرد تثبيت Bootstrap،

60
00:04:31,880 --> 00:04:35,535
ندرك أننا بحاجة أيضًا إلى تثبيت نظير له،

61
00:04:35,535 --> 00:04:38,975
وهو jQuery بالإضافة إلى Popper.js.

62
00:04:38,975 --> 00:04:46,350
لذلك دعونا المضي قدما وتثبيت كل من مسج و Popper.js في هذا المجلد المشروع.

63
00:04:46,350 --> 00:04:50,905
لذلك، للقيام بذلك، إضافة نوع المطالبة npm تثبيت

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
و Popper.js @1 .12.9 —حفظ.

66
00:05:03,185 --> 00:05:06,385
الآن، كلما قمت بتثبيت أي من حزم npm،

67
00:05:06,385 --> 00:05:11,620
أقوم بتحديد إصدار الحزمة التي يجب عليك تثبيتها بشكل صريح.

68
00:05:11,620 --> 00:05:17,580
والسبب في ذلك هو أنني أريد أن أتأكد من أنه كما تذهب من خلال هذا التمرين،

69
00:05:17,580 --> 00:05:19,500
فإن جميع الخطوات تعمل بشكل صحيح.

70
00:05:19,500 --> 00:05:25,380
لذلك أنا تحديد الإصدار الدقيق من وحدات npm ليتم تثبيتها.

71
00:05:25,380 --> 00:05:33,235
لذلك، هنا، نحن تثبيت الإصدار مسج 3.3.1 و Popper.js الإصدار 1.12.9.

72
00:05:33,235 --> 00:05:40,895
وفي وقت لاحق، أيضا، سأحدد الإصدارات الدقيقة من الوحدات التي سيتم تثبيتها.

73
00:05:40,895 --> 00:05:44,130
لذلك دعونا المضي قدما وتثبيت هذه.

74
00:05:46,530 --> 00:05:49,030
وبمجرد تثبيتها،

75
00:05:49,030 --> 00:05:51,055
يمكننا الذهاب إلى الخطوة التالية.

76
00:05:51,055 --> 00:05:55,615
بالعودة إلى مجلد مشروعنا،

77
00:05:55,615 --> 00:05:58,070
سترى أنه إذا ذهبت إلى node_modules،

78
00:05:58,070 --> 00:06:02,675
سترى مجلدًا هناك يدعى Bootstrap.

79
00:06:02,675 --> 00:06:04,865
وداخل المجلد المسمى Bootstrap،

80
00:06:04,865 --> 00:06:07,845
ستجد مجلدًا باسم dist.

81
00:06:07,845 --> 00:06:09,910
لذلك، داخل مجلد dist،

82
00:06:09,910 --> 00:06:13,705
ستجد مجلدين فرعيين باسم CSS و js.

83
00:06:13,705 --> 00:06:15,775
إذا ذهبت إلى مجلد CSS،

84
00:06:15,775 --> 00:06:20,820
فستجد مجموعة كاملة من ملفات CSS precompiled هنا.

85
00:06:20,820 --> 00:06:27,630
واحد الذي يهمنا في البداية هو بوتستراب min.css.

86
00:06:27,630 --> 00:06:31,620
هذا هو الملف الذي سنقوم بتضمينه

87
00:06:31,620 --> 00:06:36,020
في ملف index.html الخاص بنا من أجل الاستفادة من Bootstrap في مشروعنا.

88
00:06:36,020 --> 00:06:38,820
وبالمثل، بالذهاب إلى مجلد js،

89
00:06:38,820 --> 00:06:42,165
سترى أن هناك ملف min.js Bootstrap.

90
00:06:42,165 --> 00:06:45,680
سنقوم بتضمين ذلك أيضًا في index.htm الخاص بنا.

91
00:06:45,680 --> 00:06:48,790
لذا ستكون هذه الخطوة التالية التي ستروني أقوم بها

92
00:06:48,790 --> 00:06:51,215
قبل أن نذهب إلى الخطوة التالية،

93
00:06:51,215 --> 00:06:55,550
دعونا نبدأ لدينا ليت الخادم حتى نتمكن من رؤية التغييرات التي نجريها

94
00:06:55,550 --> 00:07:01,860
على index.html تنعكس على الفور في صفحة الويب لدينا في الوقت الحقيقي.

95
00:07:01,860 --> 00:07:03,630
لذلك دعونا نبدأ خوادم لايت.

96
00:07:03,630 --> 00:07:07,240
لذا، اكتب نوع المطالبة npm start،

97
00:07:07,240 --> 00:07:09,915
ومن ثم يجب أن يبدأ تشغيل خادم lite-server الخاص بك.

98
00:07:09,915 --> 00:07:13,485
يمكنك الآن أن ترى، على الشاشة،

99
00:07:13,485 --> 00:07:21,785
محرر بلدي على اليسار والإصدار الحالي من صفحة index.html على اليمين.

100
00:07:21,785 --> 00:07:23,215
لذلك، كما ترون،

101
00:07:23,215 --> 00:07:27,615
لقد قمت بالفعل بتكوين صفحة index.html مع بعض المحتوى.

102
00:07:27,615 --> 00:07:33,820
تبدو صفحة الويب هذه كصفحة الويب النموذجية لأستاذ علوم الكمبيوتر.

103
00:07:33,820 --> 00:07:41,170
دعونا الآن فتح صفحة index.html في المحرر لدينا.

104
00:07:41,170 --> 00:07:45,645
ثم في الجزء الرئيسي من صفحة index.html،

105
00:07:45,645 --> 00:07:47,360
مباشرة قبل العنوان،

106
00:07:47,360 --> 00:07:49,935
وأنا ذاهب للصق في قليلا من التعليمات البرمجية.

107
00:07:49,935 --> 00:07:53,730
يتم إعطاء مقتطف الشفرة هذا في التعليمات.

108
00:07:53,730 --> 00:07:56,740
لذلك يمكنك ببساطة نسخ ولصق مقتطف الشفرة هذا،

109
00:07:56,740 --> 00:08:00,765
وسأمشي إليك خلال ما يحاول مقتطف الشفرة هذا القيام به.

110
00:08:00,765 --> 00:08:05,585
ستلاحظ أن لدي ثلاث علامات وصفية هنا.

111
00:08:05,585 --> 00:08:09,130
أول واحد يقول charset = «utf-8".

112
00:08:09,130 --> 00:08:11,860
لذلك هذا هو ونيكود الذي سيتم استخدامه.

113
00:08:11,860 --> 00:08:17,675
السطر الثاني الذي يقول meta name = «viewport»،

114
00:08:17,675 --> 00:08:21,100
سأعود وشرح هذا الخط الخاص

115
00:08:21,100 --> 00:08:25,745
لك في الدرس التالي عندما سننظر في تصميم الويب المتجاوب.

116
00:08:25,745 --> 00:08:30,100
الآن، اسمحوا لي أن ألفت انتباهكم إلى هذا الخط بالذات الذي

117
00:08:30,100 --> 00:08:34,840
يقول الرابط rel=« stylesheet»، ثم href.

118
00:08:34,840 --> 00:08:43,495
لاحظ أنني أحدد href باسم «node_modules/bootstrap/dist/css/bootstrap.min.css».

119
00:08:43,495 --> 00:08:49,150
لذلك ما أقوم بتحديده هو أن ملف bootstrap.min.css،

120
00:08:49,150 --> 00:08:52,970
الذي يحتوي على فئات CSS المقابلة لـ Bootstrap التي قمنا

121
00:08:52,970 --> 00:08:57,995
بتنزيلها باستخدام الآلية الوقائية الوطنية إلى مجلد node_modules الخاص بنا،

122
00:08:57,995 --> 00:09:05,350
سأقوم بتضمين ذلك في رأس صفحة index.html الخاصة بي.

123
00:09:05,350 --> 00:09:09,370
لذلك تحتاج إلى تضمين فئات CSS التي يوفرها Bootstrap.

124
00:09:09,370 --> 00:09:15,150
تحتاج أيضًا إلى تضمين فئات JavaScript التي يوفرها Bootstrap،

125
00:09:15,150 --> 00:09:19,445
والتي سنقوم بها في أسفل هذه الصفحة.

126
00:09:19,445 --> 00:09:23,465
الذهاب إلى أسفل هذه الصفحة، لاحظ،

127
00:09:23,465 --> 00:09:27,400
قبل علامة النص الختامي مباشرة،

128
00:09:27,400 --> 00:09:32,820
سأقوم بلصق الشفرة لتضمين جميع البرامج النصية هناك.

129
00:09:32,820 --> 00:09:35,105
لذلك، للقيام بذلك،

130
00:09:35,105 --> 00:09:41,300
أنا فقط لصق في ثلاثة أسطر للبرنامج النصي لتشمل مسج،

131
00:09:41,300 --> 00:09:45,085
Popper.js، وأيضا بوتستراب min.js.

132
00:09:45,085 --> 00:09:48,635
ولاحظ الترتيب الذي قمت بتضمين هذا.

133
00:09:48,635 --> 00:09:50,895
لذا فإن Bootstrap في الأسفل.

134
00:09:50,895 --> 00:09:57,340
ثم، بما أن Bootstrap يعتمد على كل من jQuery و Popper بهذا الترتيب،

135
00:09:57,340 --> 00:09:59,945
لذلك سأقوم أولاً بإدخال jQuery.

136
00:09:59,945 --> 00:10:03,835
ثم بعد ذلك، ونحن إدخال بوبر، ثم أخيرا،

137
00:10:03,835 --> 00:10:09,585
بوتستراب min.js في الجزء السفلي من ملف index.html.

138
00:10:09,585 --> 00:10:18,665
الآن، يتم تضمين هذا في أسفل الصفحة.

139
00:10:18,665 --> 00:10:24,360
لأنه عندما تقوم بتحميل الصفحة من خادم ويب،

140
00:10:24,360 --> 00:10:26,430
فأنت تريد تحميل فئات CSS على الفور بحيث تبدأ الصفحة في العرض،

141
00:10:26,430 --> 00:10:29,810
عندما يتم جلب JavaScript،

142
00:10:29,810 --> 00:10:33,395
يجب تنفيذ JavaScript من أجل إجراء تغييرات

143
00:10:33,395 --> 00:10:34,970
على صفحتك باستخدام شفرة JavaScript، سوف يستغرق قليلا من الوقت.

144
00:10:34,970 --> 00:10:38,060
لذلك لا تريد أن ينتظر المستخدم

145
00:10:38,060 --> 00:10:43,805
تحميل الصفحة بأكملها قبل أن يرى شيئًا في نافذة المتصفح الخاصة به.

146
00:10:43,805 --> 00:10:48,720
لهذا السبب نقوم عادة بتحميل فئات جافا سكريبت

147
00:10:48,720 --> 00:10:55,325
في نهاية صفحة html الخاصة بنا قبل تقنية الجسم مباشرة.

148
00:10:55,325 --> 00:10:58,270
بعد إجراء هذه التغييرات،

149
00:10:58,270 --> 00:11:00,065
دعنا نحفظ الملف.

150
00:11:00,065 --> 00:11:04,420
الآن، السبب في أنني عرض

151
00:11:04,420 --> 00:11:09,385
ملف index.html في المحرر الخاص بي وكذلك المتصفح بجانبه هو،

152
00:11:09,385 --> 00:11:13,630
لحظة حفظ التغييرات التي قمت بها على ملف index.html،

153
00:11:13,630 --> 00:11:18,920
لاحظ كيف يتم

154
00:11:18,920 --> 00:11:26,525
تحديث المتصفح لهذا الملف على الفور وانظر Bootstrap بالفعل في العمل على الصفحة.

155
00:11:26,525 --> 00:11:33,150
في الوقت الحالي، سترى أن صفحتك تستخدم Times New Roman لعرض كل المحتوى.

156
00:11:33,150 --> 00:11:36,130
لحظة حفظ صفحة الويب،

157
00:11:36,130 --> 00:11:42,670
لاحظت أن الخطوط المستخدمة على صفحة الويب الخاصة بك قد تغيرت.

158
00:11:42,670 --> 00:11:48,425
الآن، يتم إعداد صفحة الويب الخاصة بك للاستفادة من فئات Bootstrap،

159
00:11:48,425 --> 00:11:53,850
ويستخدم الطباعة الافتراضية Bootstrap لعرض كل المحتوى.

160
00:11:53,850 --> 00:12:01,360
Bootstrap بشكل افتراضي يستخدم Helvetica Neue للخط.

161
00:12:01,360 --> 00:12:06,180
يمكنك تغيير الخط الافتراضي لـ bootstrap وما إلى

162
00:12:06,180 --> 00:12:09,905
ذلك، ولكن ذلك سيكون خارج نطاق مناقشتنا الآن.

163
00:12:09,905 --> 00:12:15,120
لذلك، بمجرد إعداد صفحة index.html الخاصة بك وحفظها،

164
00:12:15,120 --> 00:12:20,710
سترى على الفور Bootstrap القادمة إلى العمل في صفحة الويب الخاصة بنا.

165
00:12:20,710 --> 00:12:23,675
إذن هذه هي الطريقة التي سأستمر بها في التوضيح،

166
00:12:23,675 --> 00:12:27,385
حيث نضيف العديد من برامج التمهيد، وفصول CSS،

167
00:12:27,385 --> 00:12:30,435
والمكونات إلى صفحة الويب الخاصة بنا،

168
00:12:30,435 --> 00:12:35,720
وكيف سيستمر عرض ذلك في متصفحنا في التغيير.

169
00:12:35,720 --> 00:12:44,860
الآن، من الواضح أن عرض الصفحة في متصفحنا لا يزال رهيبا.

170
00:12:44,860 --> 00:12:49,230
انها أفضل من صفحة أساتذة علوم الكمبيوتر النموذجية على شبكة الإنترنت،

171
00:12:49,230 --> 00:12:51,715
ولكن بالتأكيد ليست قابلة للقراءة.

172
00:12:51,715 --> 00:12:58,320
نحن بحاجة الآن إلى تحقيق مختلف فئات CSS

173
00:12:58,320 --> 00:12:59,910
ومكونات جافا سكريبت التي

174
00:12:59,910 --> 00:13:06,960
يوفرها إطار واجهة المستخدم على الويب Bootstrap من أجل تصميم صفحة الويب الخاصة بنا.

175
00:13:06,960 --> 00:13:12,720
ول ذلك سنفعل ذلك خطوة خطوة و نحن نمر بهذا التمرين.

176
00:13:12,720 --> 00:13:18,535
قد يكون هذا وقتًا مناسبًا لك لإجراء التزام git

177
00:13:18,535 --> 00:13:24,355
بالتغييرات التي قمت بها بحيث يتم

178
00:13:24,355 --> 00:13:30,365
حفظ حالة مجلد مشروعك في مستودع git الخاص بك في نهاية هذا التمرين.

179
00:13:30,365 --> 00:13:36,610
الذهاب إلى مجلد الارتباك الخاص بي في علامة تبويب أخرى من نافذة المحطة الطرفية الخاصة بي

180
00:13:36,610 --> 00:13:38,990
، إذا قمت بكتابة حالة git،

181
00:13:38,990 --> 00:13:44,455
أرى الآن أنه تم تعديل ملف index.html وحزمة ملف JSON.

182
00:13:44,455 --> 00:13:47,930
لذلك أنا ذاهب للقيام الالتزام.

183
00:13:59,540 --> 00:14:04,635
لذا، الآن،

184
00:14:04,635 --> 00:14:10,610
تم التزام حالتي للمجلد في نهاية هذا التمرين بمستودع git الخاص بي.

185
00:14:10,610 --> 00:14:13,920
يمكنك مزامنة ذلك مع مستودع الإنترنت الخاص بك بحيث

186
00:14:13,920 --> 00:14:18,390
سيتم حفظ حالة المشروع الخاص بك في هذه المرحلة.

187
00:14:18,390 --> 00:14:24,955
مع هذا، نكمل أول تمرين Bootstrap لدينا.

188
00:14:24,955 --> 00:14:33,210
لقد رأيت الآن كيف يمكننا تكوين Bootstrap لاستخدامها في مشروع الويب الخاص بنا.

189
00:14:33,210 --> 00:14:36,140
ونحن ننتقل إلى التدريبات القليلة القادمة،

190
00:14:36,140 --> 00:14:42,470
ونحن في طريقنا إلى الموظفين الطبقات بوتستراب لتصميم صفحات الويب لدينا.