1
00:00:03,800 --> 00:00:07,660
سنواصل ممارسة شبكة bootstrap

2
00:00:07,660 --> 00:00:11,074
التي بدأنا بها في التمرين السابق.

3
00:00:11,074 --> 00:00:14,535
سنقوم ببعض الأشياء الأخرى

4
00:00:14,535 --> 00:00:18,965
لصفحة index.html الخاصة بنا من أجل تحسين تخطيطها.

5
00:00:18,965 --> 00:00:24,085
سنقوم باستخدام بعض فئات CSS المخصصة وإضافة بعض الألوان

6
00:00:24,085 --> 00:00:30,535
إلى صفحة index.html الخاصة بنا باستخدام فئات CSS المخصصة.

7
00:00:30,535 --> 00:00:39,265
الشيء التالي الذي سأقوم به هو النزول إلى التذييل وبالنسبة لهذا UL هنا،

8
00:00:39,265 --> 00:00:42,790
ستلاحظ أن هذه القائمة عندما تنظر إلى

9
00:00:42,790 --> 00:00:49,705
صفحة الويب الخاصة بنا يتم عرضها في صفحة الويب باستخدام هذه القائمة النقطية هنا.

10
00:00:49,705 --> 00:00:52,820
أنا لست سعيدا جدا مع هذه القائمة النقطية،

11
00:00:52,820 --> 00:00:59,350
أريد إزالة هذه النقاط النقطية ثم ببساطة تظهر لهم فقط الروابط هناك.

12
00:00:59,350 --> 00:01:03,440
لذلك للقيام بذلك، سأستخدم نمط قائمة آخر يسمى

13
00:01:03,440 --> 00:01:08,120
قائمة- unstyled وتطبيق ذلك على علامة UL هناك.

14
00:01:08,120 --> 00:01:09,950
بالعودة إلى صفحة الويب الخاصة بنا،

15
00:01:09,950 --> 00:01:12,425
إلى علامة UL هذه في التذييل،

16
00:01:12,425 --> 00:01:21,520
سأقوم بتطبيق الفصل الدراسي على أنه قائمة غير مصقول،

17
00:01:23,230 --> 00:01:32,275
وهذا من شأنه إزالة تلك الرموز أمام هذه الروابط هناك.

18
00:01:32,275 --> 00:01:40,375
الآن، اسمحوا لي أن أضيف بعض فئات CSS المخصصة إلى صفحة index.html.

19
00:01:40,375 --> 00:01:49,635
للقيام بذلك، سنقوم الآن بإنشاء مجلد هنا وتسميته كمجلد CSS هنا.

20
00:01:49,635 --> 00:01:51,650
داخل مجلد CSS،

21
00:01:51,650 --> 00:01:59,670
سأقوم بإنشاء ملف جديد وتسمية الملف باسم styles.css.

22
00:01:59,670 --> 00:02:02,835
الآن، داخل ملف styles.css،

23
00:02:02,835 --> 00:02:11,685
يمكنني الآن إضافة بعض فئات CSS من أجل تصميم صفحتنا.

24
00:02:11,685 --> 00:02:14,600
اسمحوا لي أن أضيف بعض فئات CSS هنا.

25
00:02:14,600 --> 00:02:18,765
لذلك، أود إضافة صفي الأول كرأس صف.

26
00:02:18,765 --> 00:02:21,035
لذا كما يوحي الاسم، فإن

27
00:02:21,035 --> 00:02:23,770
هذه الفئة أتقدم بطلب إلى الرأس.

28
00:02:23,770 --> 00:02:28,865
وبعد ذلك، سأقوم بتطبيق الهامش

29
00:02:28,865 --> 00:02:34,330
كصفر بكسل تلقائي

30
00:02:34,330 --> 00:02:40,150
ثم الحشو كصفر بكسل تلقائي.

31
00:02:40,150 --> 00:02:41,820
لذلك، هذا هو لرأس الصف.

32
00:02:41,820 --> 00:02:46,100
لذا، سأحصل على هامش صفر وحشو صفر لرأس الصف.

33
00:02:46,100 --> 00:02:48,840
ثم لمحتويات الصف،

34
00:02:48,840 --> 00:02:54,005
لذلك سأقوم بإضافة فئة CSS أخرى تسمى محتوى الصف.

35
00:02:54,005 --> 00:03:01,470
ثم لهذا، سوف أضيف الهامش صفر بكسل السيارات،

36
00:03:01,470 --> 00:03:07,815
ومن ثم الحشو يكون في 50 بكسل،

37
00:03:07,815 --> 00:03:16,170
صفر بكسل، 50 و صفر بكسل.

38
00:03:16,170 --> 00:03:21,060
ثم سأقوم بإضافة حد في

39
00:03:21,060 --> 00:03:28,880
أسفل الصف الخاص بي هنا.

40
00:03:28,880 --> 00:03:35,195
وبعد ذلك، الحدود سأعطيها بكسل واحد ومن ثم نسميها التلال.

41
00:03:35,195 --> 00:03:45,915
وسأقوم بتعيين الحد الأدنى للارتفاع ليكون 400 بكسل للمحتوى هنا.

42
00:03:45,915 --> 00:03:51,910
بهذه الطريقة، ستبدو صفحة الويب الخاصة بي أجمل على الشاشة.

43
00:03:51,910 --> 00:03:55,475
الآن هذا مرة أخرى، عليك أن تحاول أن

44
00:03:55,475 --> 00:03:59,900
ترى حتى تكون راضيا عن الطريقة التي وضعت بها الصفحة.

45
00:03:59,900 --> 00:04:03,560
الآن أيضًا، سأقوم بتضمين

46
00:04:03,560 --> 00:04:08,320
فئة أخرى تسمى التذييل الذي قد يكون قد خمنت بالفعل،

47
00:04:08,320 --> 00:04:13,560
سأقوم بتطبيق على التذييل

48
00:04:13,560 --> 00:04:21,100
وسأقوم بتطبيق لون خلفية على التذييل باسم D1C4E9.

49
00:04:29,140 --> 00:04:32,465
إذا سألتني كيف اخترت اللون،

50
00:04:32,465 --> 00:04:37,630
نظرت فقط إلى اللون ثم كنت سعيدًا بهذا اللون.

51
00:04:37,630 --> 00:04:41,460
يمكنك اختيار أي لون تريد تطبيقه،

52
00:04:41,460 --> 00:04:44,460
ولكن يبدو أن هذا اللون جيد بالنسبة لي.

53
00:04:44,460 --> 00:04:46,950
لذلك، أضفت هذا اللون.

54
00:04:46,950 --> 00:04:50,110
وبالنسبة للحشو، للتذييل،

55
00:04:50,110 --> 00:04:58,890
أود أن أضيف 20 بكسل وصفر بكسل.

56
00:04:59,100 --> 00:05:06,160
الآن، بمجرد إضافة هذه الأنماط إلى ملف CSS الخاص بي،

57
00:05:06,160 --> 00:05:10,610
دعني أطبق ملف CSS على صفحة index.html.

58
00:05:10,610 --> 00:05:12,820
أنا ذاهب إلى صفحة index.html.

59
00:05:12,820 --> 00:05:18,950
من الواضح أنني بحاجة إلى استخدام ملف CSS هذا داخل صفحة index.html الخاصة بي.

60
00:05:18,950 --> 00:05:22,160
حتى مباشرة بعد ملف CSS bootstrap،

61
00:05:22,160 --> 00:05:32,200
سأقوم بعمل رابط وورقة أنماط،

62
00:05:32,970 --> 00:05:39,900
وهذا هو ملف style.css هناك.

63
00:05:39,900 --> 00:05:43,525
لذلك يتم تخزين ملف CSS الخاص بي.

64
00:05:43,525 --> 00:05:49,760
لذلك، سأقوم بتضمين ذلك في صفحة index.html الخاصة بي.

65
00:05:49,760 --> 00:05:56,350
الآن، أنا ذاهب للذهاب إلى الجسم وتطبيق الطبقات التي قمت بإنشائه للتو.

66
00:05:56,350 --> 00:05:57,955
حتى الذهاب إلى الرأس،

67
00:05:57,955 --> 00:06:03,055
وسوف تطبيق فئة رأس الصف إلى ديف في الرأس.

68
00:06:03,055 --> 00:06:07,475
بعد ذلك، بالنسبة للمحتوى،

69
00:06:07,475 --> 00:06:14,085
سأقوم بتطبيق فئات محتوى الصف على الصفوف هناك.

70
00:06:14,085 --> 00:06:21,180
لذلك، إلى الصفوف الثلاثة في المحتوى،

71
00:06:21,190 --> 00:06:26,690
أقوم بتطبيق فئة محتوى الصف ثم الانتقال إلى التذييل،

72
00:06:26,690 --> 00:06:28,325
إلى علامة التذييل،

73
00:06:28,325 --> 00:06:32,315
سأقوم بتطبيق تذييل الفصل هنا،

74
00:06:32,315 --> 00:06:35,240
ثم قم بحفظ التغييرات.

75
00:06:35,240 --> 00:06:38,290
لنذهب ونلقي نظرة على تلك الصفحة الآن

76
00:06:38,290 --> 00:06:40,430
بالانتقال إلى صفحة الويب الخاصة بك،

77
00:06:40,430 --> 00:06:45,970
بدأنا بالفعل نرى بعض التغييرات المثيرة للاهتمام على صفحة الويب.

78
00:06:45,970 --> 00:06:48,960
لذلك، يمكنك الآن أن ترى أن المحتوى

79
00:06:48,960 --> 00:06:52,445
في صفحة الويب قد وضعت أكثر نظافة قليلا.

80
00:06:52,445 --> 00:06:58,290
هذا هو أسفل الحدود التي أضفناها إلى محتوى الصف،

81
00:06:58,290 --> 00:07:03,200
بحيث يمكنك أن ترى أن هناك فصلاً كافيًا بين الصفوف على الرغم

82
00:07:03,200 --> 00:07:08,530
من أن محتويات الصفوف لا تزال موضوعة نحو الأعلى في الصفوف،

83
00:07:08,530 --> 00:07:11,900
بحيث يكون لديك هذه الصفوف الثلاثة ثم انظر إلى التذييل،

84
00:07:11,900 --> 00:07:17,740
يحتوي التذييل الآن على اكتسب لون الخلفية الذي قمت بتطبيقه،

85
00:07:17,740 --> 00:07:26,717
ولاحظ كيف يتم تصميم الروابط مع القائمة غير المصقولة على الجانب الأيسر هنا.

86
00:07:26,717 --> 00:07:33,495
لم ننتهي بعد، وصلنا إلى القيام ببعض التغييرات الأخرى على صفحة index.html،

87
00:07:33,495 --> 00:07:39,320
ومن ثم العودة وإلقاء نظرة على النتيجة النهائية لهذا التمرين.

88
00:07:39,320 --> 00:07:41,485
بالعودة إلى المحرر الخاص بك،

89
00:07:41,485 --> 00:07:46,955
سأقوم بإضافة عدد قليل من فئات CSS إلى بنية أسلوبي،

90
00:07:46,955 --> 00:07:53,290
وهو ملف، لذلك سأذهب إلى هناك ثم أضف فئة تسمى Jumbotron.

91
00:07:53,290 --> 00:07:59,265
لذا، سترى أننا قد طبقنا بالفعل Jumbotron لرأسنا هناك.

92
00:07:59,265 --> 00:08:03,145
الآن، إذا قمت بإضافة المزيد من الخصائص إلى فئة Jumbotron هذه هنا،

93
00:08:03,145 --> 00:08:05,875
فسيتم تطبيق هذا على Jumbotron،

94
00:08:05,875 --> 00:08:11,535
بالإضافة إلى Jumbotron الافتراضي القياسي الذي يتضمن بالفعل bootstrap.

95
00:08:11,535 --> 00:08:13,835
أنا ذاهب لإضافة في عدد قليل من الأشياء الأخرى،

96
00:08:13,835 --> 00:08:17,355
وأنا ذاهب لإضافة في الحشو من

97
00:08:17,735 --> 00:08:28,765
70 و 30 بكسل على محيطها،

98
00:08:29,095 --> 00:08:38,515
ثم هامش صفر بكسل في كل مكان،

99
00:08:38,515 --> 00:08:51,685
وسوف تعيين خلفية هذا إلى 9575CD.

100
00:08:51,685 --> 00:09:01,065
هذا هو إلى حد ما من اللون الأرجواني الداكن الذي يبدو أن تسير بشكل جيد جدا على Jumbotron.

101
00:09:01,065 --> 00:09:03,430
مرة أخرى، عن طريق التجربة والخطأ

102
00:09:03,430 --> 00:09:04,975
، اخترت هذا اللون،

103
00:09:04,975 --> 00:09:11,735
وأيضا لون النص كما أبيض الأزهار.

104
00:09:13,205 --> 00:09:15,305
لذا بالنسبة لـ Jumbotron،

105
00:09:15,305 --> 00:09:18,615
سنقوم بتطبيق تلك الفصول، وأيضًا،

106
00:09:18,615 --> 00:09:24,765
سأقوم بتطبيق فئة أخرى على فئة العنوان.

107
00:09:24,765 --> 00:09:26,520
لدينا عنوان في التذييل،

108
00:09:26,520 --> 00:09:34,685
لذلك أنا ذاهب لتغيير حجم الخط من ذلك إلى 80 في المئة،

109
00:09:34,685 --> 00:09:38,935
خط أصغر قليلا من الخط العادي،

110
00:09:38,955 --> 00:09:43,455
والهامش، وسوف أعطيه صفر بكسل،

111
00:09:43,455 --> 00:09:50,285
واللون، وأنا ذاهب إلى استخدام صفر F، صفر F،

112
00:09:50,285 --> 00:09:52,350
صفر F، صفر F،

113
00:09:52,350 --> 00:09:54,730
ثم حفظ التغييرات.

114
00:09:54,730 --> 00:09:58,730
لذلك إضافة المزيد من فئات CSS

115
00:09:58,730 --> 00:10:01,530
، والعودة إلى index.html.

116
00:10:01,530 --> 00:10:03,475
ما سأقوم به الآن،

117
00:10:03,475 --> 00:10:07,775
هو الانتقال إلى صفوف المحتوى ثم

118
00:10:07,775 --> 00:10:11,990
سأحاول وضع هذا المحتوى في الوسط،

119
00:10:11,990 --> 00:10:14,605
عموديًا في هذا الصف.

120
00:10:14,605 --> 00:10:17,930
هذا هو المكان الذي سوف تأخذ مساعدة من

121
00:10:17,930 --> 00:10:23,050
المحاذاة الرأسية التي تدعم شبكة التمهيد من خلال دعم فليكسبوكس.

122
00:10:23,050 --> 00:10:31,395
للقيام بذلك، أود أن أقول محاذاة مركز العناصر،

123
00:10:31,495 --> 00:10:38,620
لذلك هذا هو الطبقة الأخرى التي أحتاج إلى إضافتها، محاذاة عناصر-مركز.

124
00:10:38,620 --> 00:10:45,475
وسأضيف ذلك إلى الصفين المتبقيين أيضًا، قم

125
00:10:45,475 --> 00:10:51,735
بمحاذاة مركز العناصر إلى الصف الثاني والثالث،

126
00:10:53,185 --> 00:11:01,965
ويجب أن يقوم ذلك بتبرير رأسي لمحتوى الصفوف.

127
00:11:01,965 --> 00:11:03,880
سنرى النتيجة خلال دقيقة

128
00:11:03,880 --> 00:11:06,230
الذهاب إلى أسفل إلى تذييل الصفحة.

129
00:11:06,230 --> 00:11:09,835
في التذييل، ترى أننا استخدمنا

130
00:11:09,835 --> 00:11:13,825
عمود السيارات لمحتوى حقوق الطبع والنشر هذا هناك.

131
00:11:13,825 --> 00:11:18,265
الآن، سأقوم بوضع هذا الحق في الوسط أفقيا

132
00:11:18,265 --> 00:11:24,160
باستخدام فئة مركز المحتوى المبرر،

133
00:11:24,160 --> 00:11:32,755
لذلك هناك محتوى مبرر وعدد قليل من الطبقات الأخرى هناك.

134
00:11:32,755 --> 00:11:35,890
سأستخدم لتبرير فئة مركز المحتوى لذلك.

135
00:11:35,890 --> 00:11:44,605
سيؤدي ذلك بشكل أساسي إلى وضع هذا العمود في وسط الصف هناك.

136
00:11:44,725 --> 00:11:48,560
التي تنطبق على ذلك، وبعد ذلك،

137
00:11:48,560 --> 00:11:51,415
تغيير واحد صغير سأقوم به،

138
00:11:51,415 --> 00:11:53,370
هو هذا div الداخلي هناك،

139
00:11:53,370 --> 00:12:01,665
سأقوم بتطبيق فصل دراسي كمركز نص

140
00:12:01,665 --> 00:12:06,435
لذلك، بحيث تتمحور هذه الروابط على الشاشة.

141
00:12:06,435 --> 00:12:11,340
مع هذه التغييرات، دعونا نذهب ونلقي نظرة على صفحة الويب،

142
00:12:11,340 --> 00:12:14,135
في نهاية هذا التمرين.

143
00:12:14,135 --> 00:12:16,120
الذهاب إلى

144
00:12:16,120 --> 00:12:20,020
صفحتنا على شبكة الإنترنت، بدأت بالفعل تبدو أفضل الآن،

145
00:12:20,020 --> 00:12:25,885
لذلك يمكنك أن ترى الآن أن Jumbotron هو الآن على غرار لون خلفية جديد،

146
00:12:25,885 --> 00:12:28,955
وهو الأرجواني الداكن قليلا هناك،

147
00:12:28,955 --> 00:12:34,980
والحروف هو الآن في اللون الأبيض الأزهار،

148
00:12:34,980 --> 00:12:37,190
قليلا بادئة هناك،

149
00:12:37,190 --> 00:12:44,345
ثم يمكنك الآن أن ترى أن المحتوى في صفوف المحتوى يتم توسيطه عموديًا،

150
00:12:44,345 --> 00:12:47,500
لصفوف المحتوى الثلاثة.

151
00:12:47,500 --> 00:12:54,645
هذا هو استخدام مركز عناصر المحاذاة الذي قمنا بتطبيقه على الصفوف هناك.

152
00:12:54,645 --> 00:12:56,525
ثم الذهاب إلى التذييل،

153
00:12:56,525 --> 00:13:03,380
يمكنك الآن أن ترى أن هذا حق المؤلف له ما يبرره الآن إلى وسط الشاشة.

154
00:13:03,380 --> 00:13:08,155
انظر إلى كيفية تركيز الروابط هنا.

155
00:13:08,155 --> 00:13:15,985
أدركت أنني أريد أيضا أن أضع هذا التوجه عموديا إلى هذا الصف معين،

156
00:13:15,985 --> 00:13:19,855
لذلك دعونا نذهب وتطبيق فئة أخرى لنقل هذا إلى

157
00:13:19,855 --> 00:13:24,540
وسط هذا الصف معين عموديا.

158
00:13:24,540 --> 00:13:27,100
لذلك للقيام بذلك، والعودة إلى الفهرس.

159
00:13:27,100 --> 00:13:34,115
html، في تذييل هذا العمود المحدد الذي يحتوي على تلك،

160
00:13:34,115 --> 00:13:41,795
سأقوم بتطبيق الفصل كمركز محاذاة ذاتي.

161
00:13:41,795 --> 00:13:48,485
يجب تطبيق هذا على div الذي يستخدم فئة العمود.

162
00:13:48,485 --> 00:13:54,185
مع هذا، سيتم محاذاة هذا المحتوى معين إلى مركز الصف.

163
00:13:54,185 --> 00:13:56,570
سيظل المحتوى المتبقي في الأعلى.

164
00:13:56,570 --> 00:13:59,575
دعونا نلقي نظرة نهائية على تذييل الصفحة.

165
00:13:59,575 --> 00:14:01,705
الذهاب إلى التذييل في صفحة الويب الخاصة بنا،

166
00:14:01,705 --> 00:14:06,345
يمكنك الآن أن ترى كيف تم وضع هذا عموديا في المركز.

167
00:14:06,345 --> 00:14:10,715
لا تزال هذه القطعتين من المحتوى محاذاة إلى الجزء العلوي من الصف،

168
00:14:10,715 --> 00:14:15,215
وهذا أمر جيد لأن ذلك يبدو جيدا على هناك،

169
00:14:15,215 --> 00:14:21,340
ولكن هذا واحد لقد سحبه عموديا إلى وسط هذا الصف معين.

170
00:14:21,340 --> 00:14:25,545
مع هذا، نكمل هذا التمرين.

171
00:14:25,545 --> 00:14:30,005
في هذا التمرين، رأينا استخدام فئات CSS المخصصة،

172
00:14:30,005 --> 00:14:35,125
واستخدمنا أيضًا بعض الفئات

173
00:14:35,125 --> 00:14:41,660
لتبرير المحتوى أفقيًا وعموديًا في صفوفنا.

174
00:14:41,660 --> 00:14:45,695
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع الرسالة،

175
00:14:45,695 --> 00:14:48,735
شبكة Bootstrap، الجزء الثاني.