1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 في هذا التمرين، سنلقي نظرة على دعم Bootstrap للأزرار والنماذج. 3 00:00:11,490 --> 00:00:17,293 لذلك سنقوم بتضمين بعض الأزرار ومجموعة الأزرار في صفحة الويب الخاصة بنا. 4 00:00:17,293 --> 00:00:24,190 وننظر أيضًا في تصميم النماذج وتصميم النماذج باستخدام فئات Bootstrap. 5 00:00:25,780 --> 00:00:31,080 للبدء، انتقل إلى صفحة التعليمات وقم 6 00:00:31,080 --> 00:00:36,900 بتنزيل ملف contactus.html.zip الذي قدمناه هناك. 7 00:00:36,900 --> 00:00:39,798 لذلك انقر بزر الماوس الأيمن على ذلك، 8 00:00:39,798 --> 00:00:44,969 ثم احفظ هذا الرابط في مجلد الارتباك الخاص بك. 9 00:00:48,512 --> 00:00:49,568 كما، 10 00:00:54,264 --> 00:01:01,598 ملف الاتصال. html.zip. 11 00:01:01,598 --> 00:01:08,580 ثم مرة واحدة يتم تحميل ملف مضغوط، بفك ضغط الملف للحصول على صفحة contactus.html. 12 00:01:09,740 --> 00:01:11,580 ثم يمكنك حذف ملف مضغوط. 13 00:01:13,440 --> 00:01:18,764 بمجرد فك ضغط الملف والحصول على صفحة contactus.html، 14 00:01:18,764 --> 00:01:23,084 ستلاحظ أنه عند تحميل هذه الصفحة في 15 00:01:23,084 --> 00:01:28,107 متصفحك باستخدام localhost:3000/ contactus.html، 16 00:01:28,107 --> 00:01:34,748 فسترى أن هذه الصفحة بالفعل تم تشكيلها مسبقًا مع بعض المحتوى. 17 00:01:34,748 --> 00:01:38,550 لذلك يمكنك ملاحظة أن لديك بالفعل شريط التنقل هناك. 18 00:01:38,550 --> 00:01:42,846 لدينا جومبوترون مهيأة بالفعل بالنسبة لنا. 19 00:01:42,846 --> 00:01:48,061 وستلاحظون أن لدي فتات الخبز 20 00:01:48,061 --> 00:01:52,190 والاتصال بنا متجهين هنا 21 00:01:52,190 --> 00:01:57,730 ثم سترى بعض المعلومات الإضافية، العنوان هنا. 22 00:01:57,730 --> 00:02:04,180 وأيضًا، ستلاحظ أن التذييل قد تم تكوينه بالفعل. 23 00:02:04,180 --> 00:02:06,580 ولكن ستلاحظ شيئين هنا، 24 00:02:06,580 --> 00:02:11,820 ستلاحظ أن هناك سطر هنا يقول مجموعات الأزرار تذهب هنا 25 00:02:11,820 --> 00:02:15,678 ثم سطر واحد آخر هنا يقول النموذج يذهب هنا. 26 00:02:15,678 --> 00:02:20,280 لذلك نحن ذاهبون لاستبدال هذين مع مجموعة زر ونموذج. 27 00:02:20,280 --> 00:02:25,380 وعلى طول الطريق، تعلم دعم Bootstrap للأزرار والنماذج. 28 00:02:25,380 --> 00:02:31,015 قبل المضي قدما، والآن بعد أن لدينا ثلاث صفحات في موقعنا على الانترنت، 29 00:02:31,015 --> 00:02:34,585 انها فكرة جيدة بالنسبة لنا لربطها معا، 30 00:02:34,585 --> 00:02:39,525 سواء في شريط التنقل أو في الروابط في تذييل الصفحة. 31 00:02:39,525 --> 00:02:45,165 دعونا تعديل هذين حتى نتمكن من التنقل بين هذه الصفحات الثلاث بسهولة. 32 00:02:45,165 --> 00:02:52,008 حتى الذهاب إلى صفحة contactus.html، ستلاحظ أنه في شريط التنقل، 33 00:02:52,008 --> 00:02:56,816 لدي بالفعل الروابط إلى index.html إعداد بشكل صحيح. 34 00:02:58,908 --> 00:03:03,568 وستلاحظ أنه في الأسفل 35 00:03:03,568 --> 00:03:08,450 هنا لديك رابط الاتصال هنا. 36 00:03:08,450 --> 00:03:15,550 ولكن لم يتم تكوين الرابط المقابل للحول بشكل صحيح. 37 00:03:15,550 --> 00:03:19,905 لذلك انتقل إلى هذا الرابط هنا ثم قم بتحديث ذلك إلى 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 الاتصال بنا رابط يمكن أن تترك وحدها على هذا النحو. 40 00:03:27,788 --> 00:03:31,050 ثم حفظ التغييرات. 41 00:03:31,050 --> 00:03:35,070 الآن وبالمثل، انتقل إلى تذييل هذه الصفحة. 42 00:03:35,070 --> 00:03:40,975 وستلاحظ أنه في التذييل لدينا هذه الروابط الثلاثة هنا. 43 00:03:40,975 --> 00:03:45,215 وهذا قد يكون نقطة جيدة لاستبدال الروابط 44 00:03:45,215 --> 00:03:48,015 مع الروابط إلى الصفحات المقابلة. 45 00:03:48,015 --> 00:03:54,342 لذلك سأقول، index.html، aboutus.html، 46 00:03:54,342 --> 00:03:59,665 و، contactus.html. 47 00:03:59,665 --> 00:04:01,325 و احفظ التغييرات 48 00:04:01,325 --> 00:04:08,117 وبالمثل، انتقل إلى index.html، ثم في index.html أيضا، 49 00:04:08,117 --> 00:04:12,280 لم يتم إعداد رابط الاتصال بنا. 50 00:04:12,280 --> 00:04:18,640 لذلك دعونا تحديث ذلك إلى contactus.html. 51 00:04:18,640 --> 00:04:21,900 ثم وبالمثل، قم بتحديث الروابط في التذييل. 52 00:04:23,050 --> 00:04:27,258 انتقل أيضا إلى aboutus.html ثم إصلاح الروابط حتى هناك. 53 00:04:27,258 --> 00:04:32,540 حتى في aboutus.html أيضا، في رأس أنا ذاهب لإصلاح الرابط. 54 00:04:37,461 --> 00:04:41,690 وأيضا في تذييل aboutus.html. 55 00:04:41,690 --> 00:04:44,050 حتى الآن عندما تذهب إلى موقع الويب الخاص 56 00:04:44,050 --> 00:04:49,290 بك، ستتمكن من الانتقال مرة أخرى إلى صفحتك الرئيسية، إلى صفحتك حول. 57 00:04:49,290 --> 00:04:52,950 ومن الصفحة حول، يمكنك حتى العودة إلى صفحة جهات الاتصال. 58 00:04:52,950 --> 00:04:57,780 لذلك 59 00:04:57,780 --> 00:05:01,480 يجب أن تكون جميع الروابط بين الصفحات الثلاث في الرؤوس المقابلة، وكذلك التذييلات، هنا الإعداد. 60 00:05:01,480 --> 00:05:06,500 بحيث إذا قمت بالنقر فوق أي واحد من هذه سوف يأخذك إلى الصفحة المناسبة. 61 00:05:08,190 --> 00:05:12,660 الآن هو الوقت المناسب لبدء العمل على الأزرار التي سنقوم 62 00:05:12,660 --> 00:05:17,040 بتضمينها في صفحة contactus.html لدينا. 63 00:05:17,040 --> 00:05:23,060 لذلك ما سأفعله هو أنني سوف استبدال هذا الخط مع رمز 64 00:05:23,060 --> 00:05:25,580 للزر ومجموعة زر 65 00:05:25,580 --> 00:05:30,465 وبعد ذلك، سنعود لشرح كيفية عمل هذا الشيء كله. 66 00:05:30,465 --> 00:05:34,650 فتح contactus.html في محررنا، 67 00:05:34,650 --> 00:05:40,402 سنقوم بتحديد المكان الذي يوجد فيه هذا البيان، مجموعة زر يذهب هنا، موجود. 68 00:05:40,402 --> 00:05:44,230 ثم سأقوم باستبدال ذلك بالرمز المقابل 69 00:05:44,230 --> 00:05:46,920 لمجموعة الأزرار هذه أولاً. 70 00:05:46,920 --> 00:05:51,600 ثم سأعود لشرح كيفية عمل هذا الرمز. 71 00:05:51,600 --> 00:05:56,570 لذلك دعونا حفظ التغييرات، ومن ثم نلقي نظرة على ما 72 00:05:56,570 --> 00:06:00,920 تبدو مجموعة الأزرار هذه في متصفحنا. 73 00:06:02,550 --> 00:06:07,224 الذهاب إلى متصفحك، يمكنك الآن أن ترى أنه في 74 00:06:07,224 --> 00:06:12,310 صفحة الويب الخاصة بنا تم إنشاء مجموعة الأزرار. 75 00:06:12,310 --> 00:06:15,040 حتى تتمكن من رؤية أن هناك ثلاثة أزرار هنا، 76 00:06:15,040 --> 00:06:17,540 أزرار الاتصال، سكايب والبريد الإلكتروني. 77 00:06:17,540 --> 00:06:21,990 الآن، يتم ربط كل هذه الثلاثة معا في شريط واحد أو 78 00:06:21,990 --> 00:06:26,800 شريط زر واحد أو ما هو في شروط Bootstrap تسمى مجموعة زر. 79 00:06:26,800 --> 00:06:31,350 لذلك دعونا ننظر في كيف نذهب حول بناء شيء من هذا القبيل في 80 00:06:31,350 --> 00:06:32,390 رمز بوتستراب. 81 00:06:33,530 --> 00:06:41,530 حتى هنا لدي كل من نافذة المتصفح ورمز بلدي مفتوحة جنبا إلى جنب. 82 00:06:41,530 --> 00:06:44,990 لذلك دعونا نلقي نظرة على كيفية إنشاء رمز الزر هذا. 83 00:06:44,990 --> 00:06:48,536 إلقاء نظرة على التعليمات البرمجية، لاحظت أن 84 00:06:48,536 --> 00:06:53,745 الأزرار يتم تضمينها داخل div هنا. 85 00:06:53,745 --> 00:06:57,060 إلى div، نطبق الفصل، btn-group. 86 00:06:57,060 --> 00:07:02,255 لذا، إذا كان لديك مجموعة من الأزرار التي تريد الانضمام إليها معًا 87 00:07:02,255 --> 00:07:06,225 وتقديمها كمجموعة من الأزرار، كشريط من الأزرار، 88 00:07:06,225 --> 00:07:10,990 فستستخدم div مع فئة مجموعة الأزرار 89 00:07:10,990 --> 00:07:14,540 والدور كمجموعة هنا إلى ذلك div. 90 00:07:14,540 --> 00:07:18,332 الآن داخل ذلك، ستلاحظ أنني أستخدم 91 00:07:18,332 --> 00:07:20,550 العلامة، a، لتحديد الأزرار الثلاثة. 92 00:07:20,550 --> 00:07:23,590 لذلك دعونا ننظر في كيفية تعريف الزر الثلاثة. 93 00:07:23,590 --> 00:07:26,430 دعونا ننظر في كيفية تعريف زر الاتصال. 94 00:07:26,430 --> 00:07:30,030 لذلك هذا الخط معين يحدد زر الاتصال. 95 00:07:30,030 --> 00:07:33,718 لذلك أقول، أ، الدور يساوي الزر. 96 00:07:33,718 --> 00:07:38,375 لذلك هذا، a، علامة هنا، 97 00:07:38,375 --> 00:07:42,565 أنا استخدامه كزر هنا. 98 00:07:42,565 --> 00:07:44,955 لهذا السبب أحدد الدور كزر. 99 00:07:44,955 --> 00:07:46,545 لذلك هذا مهم. 100 00:07:46,545 --> 00:07:49,591 ثم ننظر إلى الطبقات التي أطبقها على هذا. 101 00:07:49,591 --> 00:07:54,926 لذا فإن أول واحد هو فئة btn. فئة 102 00:07:54,926 --> 00:07:59,880 btn هي فئة زر Bootstrap. 103 00:07:59,880 --> 00:08:03,720 لذلك سيتم عرض ذلك كزر Bootstrap الكلاسيكي. 104 00:08:03,720 --> 00:08:07,300 الجزء الثاني يقول هو بتن الابتدائي. 105 00:08:07,300 --> 00:08:10,940 لذلك، هذا هو ما يحدد لون الزر هنا. 106 00:08:10,940 --> 00:08:15,910 لذلك، في هذه الحالة هذا اللون الزر أزرق. 107 00:08:15,910 --> 00:08:18,750 وهكذا، هذا هو اللون الأساسي في Bootstrap. 108 00:08:18,750 --> 00:08:20,670 حتى btn الابتدائي. 109 00:08:20,670 --> 00:08:25,510 ثم بعد ذلك، انظر إلى استخدام href هنا. 110 00:08:25,510 --> 00:08:30,850 لذلك، بما أن هذه علامة A، يمكنني استخدام سمة href في هذه العلامة A. 111 00:08:30,850 --> 00:08:33,610 لذا، تشير السمة href إلى رقم الهاتف. 112 00:08:35,110 --> 00:08:40,940 وبعد ذلك لاحظت أنني أستخدم رمز الخط هنا للهاتف. 113 00:08:40,940 --> 00:08:47,560 هذا هو السبب في أنني لدي فئة اتحاد كرة القدم فا الهاتف وبعد ذلك بعد مكالمة كلمة. 114 00:08:47,560 --> 00:08:53,170 لذا، هذا هو ما يمكّن من بناء هذا 115 00:08:53,170 --> 00:08:58,550 الزر الأزرق، الذي يتم تضمينه في شريط الأزرار هذا هنا. 116 00:08:58,550 --> 00:09:04,150 وبالمثل، فإن التالي، لاحظت أن هذا يقول أيضا زر الدور. 117 00:09:04,150 --> 00:09:07,795 ثم كما تذهب من خلال، ترى أن btn-معلومات. 118 00:09:07,795 --> 00:09:12,235 BTN-Info يعطيها لون أزرق فاتح في اللون. 119 00:09:12,235 --> 00:09:18,665 لذلك، افتراضيا btn-info يشير إلى زر أزرق فاتح اللون هنا. 120 00:09:18,665 --> 00:09:22,975 وبعد ذلك، يمكنك أن ترى أن لدي سكايب محددة هنا. 121 00:09:22,975 --> 00:09:28,172 ثم الثالث الذي، هو زر أخضر هناك مع البريد الإلكتروني. 122 00:09:28,172 --> 00:09:34,542 لاحظ أن أحدد الحروف دور = فئة زر = btn btn-النجاح. 123 00:09:34,542 --> 00:09:38,132 لذلك، عندما تقول btn-النجاح، سيكون هذا الزر الأخضر هنا. 124 00:09:38,132 --> 00:09:44,102 لذلك، لديك بعض الألوان التي تم تعريفها بالفعل في Bootstrap. 125 00:09:44,102 --> 00:09:48,322 يشير الأساسي إلى اللون الأزرق في لأول نجاح أزرق فاتح يشير إلى 126 00:09:49,390 --> 00:09:54,250 اللون الأخضر، ثم لديك تحذير من شأنه أن يكون لون أصفر شاحب، ومن 127 00:09:54,250 --> 00:09:56,150 ثم خطر، وهو اللون الأحمر. 128 00:09:56,150 --> 00:09:59,763 لذا، هذه هي الألوان الافتراضية التي تم إعدادها في Bootstrap. 129 00:10:01,712 --> 00:10:06,602 ثم الإعداد href، مع mailto هنا، 130 00:10:06,602 --> 00:10:10,140 ثم بعد ذلك، لديك. 131 00:10:11,972 --> 00:10:16,030 الخط كرمز هنا ثم البريد الإلكتروني هناك. 132 00:10:16,030 --> 00:10:21,410 لذلك يتم وضع هذه العلامات الثلاثة الإلكترونية، والتي تعمل حاليًا كأزرار، 133 00:10:21,410 --> 00:10:26,780 في جانب تلك div، والتي تعمل كمجموعة btn-group. 134 00:10:26,780 --> 00:10:32,100 لذا، هذه هي الطريقة التي نعرض بها مجموعة من الأزرار في Bootstrap. 135 00:10:32,100 --> 00:10:34,470 إذا كنت تريد فقط زر واحد، 136 00:10:34,470 --> 00:10:37,220 كل ما عليك القيام به هو تضمين واحد فقط من هذه الخطوط هناك. 137 00:10:38,270 --> 00:10:41,130 لذلك، يمكنك أيضًا استخدام علامة الزر. 138 00:10:41,130 --> 00:10:44,270 إذا كنت تستخدم علامة الزر، فلن تحتاج إلى تحديد الدور، 139 00:10:44,270 --> 00:10:46,730 بدلاً من ذلك فقط تقول زر الكتابة. 140 00:10:46,730 --> 00:10:49,700 لأن الزر يمكن أن يكون بمثابة زر إرسال هناك. 141 00:10:49,700 --> 00:10:54,140 حتى في وقت لاحق، في أشكال سوف ننظر في استخدام علامة زر، 142 00:10:54,140 --> 00:10:57,040 لإنشاء زر ليتم تضمينها في النموذج لدينا. 143 00:10:58,600 --> 00:11:03,900 الاستمرار في التمرين، ستكون الخطوة التالية هي البدء، 144 00:11:03,900 --> 00:11:08,790 وتطوير النموذج الذي سنقوم بتضمينه في صفحة contactus.html. 145 00:11:08,790 --> 00:11:13,350 سنفعل ذلك خطوة بخطوة، بحيث في كل خطوة نتعلم قليلا من 146 00:11:13,350 --> 00:11:17,610 كيفية تضمين بعض العناصر في شكلها. 147 00:11:17,610 --> 00:11:24,480 لذلك، كبداية، عندما تذهب إلى صفحة contactus.html، 148 00:11:24,480 --> 00:11:29,430 هناك حق، سترى هذا البيان يسمى، نموذج يذهب هنا. 149 00:11:29,430 --> 00:11:34,771 الآن، ما سأقوم به هو تغيير هذا من col-sm 150 00:11:34,771 --> 00:11:39,480 إلى col-md، بحيث بالنسبة 151 00:11:39,480 --> 00:11:44,290 لأحجام الشاشة الصغيرة إلى الصغيرة، سيتم وضع شكلي 152 00:11:44,290 --> 00:11:49,352 في احتلال كامل عرض الشاشة، لأنه يستخدم col-xs-12. 153 00:11:49,352 --> 00:11:53,024 ولكن من شاشة متوسطة الحجم على الأجنحة، 154 00:11:53,024 --> 00:11:57,290 سوف تشغل 9 أعمدة فقط من 12 عمودًا. 155 00:11:57,290 --> 00:11:59,600 لذلك، دعونا نبدأ في بناء النموذج. 156 00:11:59,600 --> 00:12:05,470 لذا، ما سأقوم به هو، سأقوم باستبدال هذا، بأول جزء من الشفرة. 157 00:12:06,580 --> 00:12:11,300 سنقوم بتضمين حقلين في نموذجنا، 158 00:12:11,300 --> 00:12:14,280 للاسم الأول واسم العائلة للمستخدم. 159 00:12:14,280 --> 00:12:17,440 اسمحوا لي أن أضيف في التعليمات البرمجية، ثم سنلقي نظرة على النتيجة. 160 00:12:17,440 --> 00:12:19,750 وبعد ذلك، سنعود وفحص الشفرة. 161 00:12:19,750 --> 00:12:23,190 لذلك، إضافة في التعليمات البرمجية في هذه المرحلة، 162 00:12:23,190 --> 00:12:27,820 كما هو الحال دائما هذه مقتطفات التعليمات البرمجية في التعليمات. 163 00:12:27,820 --> 00:12:30,510 لذلك، اسمحوا لي أن حفظ التغييرات. 164 00:12:30,510 --> 00:12:35,690 ثم سنعود وننظر إلى ما يبدو عليه هذا النموذج في المتصفح. 165 00:12:35,690 --> 00:12:40,250 إلقاء نظرة على النموذج، سترى أن لديهم الآن موضوعين في النموذج هنا. 166 00:12:42,060 --> 00:12:46,790 أول واحد، لديه تسمية على الجانب الأيسر قائلا الاسم 167 00:12:46,790 --> 00:12:49,780 الأول ثم لديك مربع الإدخال هنا. 168 00:12:49,780 --> 00:12:52,800 ثم اسم العائلة، ثم مربع الإدخال هنا. 169 00:12:52,800 --> 00:12:56,710 الآن لاحظت أيضا أن هذا النموذج وضعت، 170 00:12:56,710 --> 00:13:00,510 بحيث هذا الجزء تحتل نصف جزء من الشاشة، 171 00:13:00,510 --> 00:13:03,620 والجزء المتبقي يجري احتلالها من قبل الجزء المتبقي من الشاشة. 172 00:13:03,620 --> 00:13:08,400 لقد بدأتِ تتسائلين كيف يمكننا فعل هذا؟ 173 00:13:09,720 --> 00:13:15,095 هل تساعدنا شبكة Bootstrap على اتخاذ قرار بشأن هذه الأحجام. 174 00:13:15,095 --> 00:13:18,725 ذلك سَيَكُونُ a سؤال جيد جداً لَك لتَسْألُه نفسك. 175 00:13:18,725 --> 00:13:21,695 دعونا نرى الرمز وفهم كيف يبدو. 176 00:13:21,695 --> 00:13:26,595 قبل أن نفعل ذلك، دعونا نلقي نظرة على نفس تخطيط النماذج، 177 00:13:26,595 --> 00:13:29,595 في حجم الشاشة الصغيرة جدا. 178 00:13:29,595 --> 00:13:32,795 لذلك، والتبديل إلى حجم الشاشة الصغيرة جدا. 179 00:13:32,795 --> 00:13:34,425 لذلك سنذهب إلى غالاكسي S5. 180 00:13:35,490 --> 00:13:40,060 لاحظت، كيف يتم وضع النموذج في حجم الشاشة الصغيرة الإضافية. 181 00:13:40,060 --> 00:13:44,304 لذلك، سترى أن التسمية في الأعلى، 182 00:13:44,304 --> 00:13:50,590 ثم المربع نفسه، مربع الإدخال نفسه هو القاع، وبالمثل للاسم الأخير. 183 00:13:50,590 --> 00:13:53,420 لذا، لاحظت أن Bootstrap. 184 00:13:53,420 --> 00:13:57,500 بالمناسبة، فإنه يوفر تلك الطبقات النموذج. 185 00:13:57,500 --> 00:14:02,460 تلقائيًا، يجعل النموذج الخاص بك مستجيبًا، بحيث عندما 186 00:14:02,460 --> 00:14:07,450 يتم وضعه على أحجام شاشة مختلفة، سيتم وضع النموذج بشكل مناسب، 187 00:14:07,450 --> 00:14:12,550 بحيث لن يتم سحقه بالكامل على أحجام الشاشة الصغيرة. 188 00:14:13,610 --> 00:14:17,220 ولكن بالنسبة لأحجام الشاشة الأكبر، لأن لديك عقارات أكبر، 189 00:14:17,220 --> 00:14:23,480 فأنت قادر على تمديد النموذج، للاستفادة من المساحة الإضافية التي لديك. 190 00:14:24,830 --> 00:14:31,150 إلقاء نظرة على شفرة المصدر هذه، والنموذج جنبًا إلى جنب، ومن الواضح 191 00:14:31,150 --> 00:14:36,140 أن أول شيء تلاحظه، هو أن النموذج يبدأ بعلامة النموذج هنا. 192 00:14:36,140 --> 00:14:40,160 لذلك، شكل ثم نموذج الإغلاق، علامة هنا. 193 00:14:40,160 --> 00:14:45,970 لذلك، داخل هناك، كنت تصف أجزاء مختلفة من النموذج الخاص بك. 194 00:14:45,970 --> 00:14:49,150 لذلك، دعونا نلقي نظرة على كيفية إنشاء الاسم الأول، 195 00:14:49,150 --> 00:14:54,390 الاسم الأخير الواضح كما يبدو يجب أن يستخدم نهجا مشابها. 196 00:14:54,390 --> 00:15:01,240 لذلك، في الافتراضي، ما تلاحظه هو أن هناك div هنا. 197 00:15:01,240 --> 00:15:06,480 عنصر div هنا، مع div الإغلاق هنا. 198 00:15:06,480 --> 00:15:10,515 لذلك يحتوي عنصر div هذا على فئة تسمى مجموعة النموذج. 199 00:15:11,920 --> 00:15:15,108 ثم تليها فئة صف. 200 00:15:15,108 --> 00:15:17,080 لذا فإن فئة مجموعة النموذج بشكل أساسي، 201 00:15:17,080 --> 00:15:22,580 تقول أن ما هو داخل هذا div سيتم التعامل معه كمجموعة من العناصر. 202 00:15:22,580 --> 00:15:26,120 وبعد ذلك سيتم وضعها وفقا لذلك. 203 00:15:26,120 --> 00:15:30,902 والجزء الثاني، ترى استخدام الصف هنا. 204 00:15:30,902 --> 00:15:35,740 لذلك، سترى أن صف مجموعة Bootstrap يأتي في اللعب هنا. 205 00:15:35,740 --> 00:15:40,610 وهكذا هذه المجموعة نموذج معين، يمكن وضعها 206 00:15:40,610 --> 00:15:45,480 باستخدام الصف وفئات العمود التي لديك من شبكة Bootstrap. 207 00:15:45,480 --> 00:15:48,506 حتى الآن، إذا قمت بتطبيق الصف على هذا div، 208 00:15:48,506 --> 00:15:52,956 مهما كان داخل هناك، يمكنك استخدام فئات العمود، 209 00:15:52,956 --> 00:15:58,741 لتحديد بالضبط مقدار المساحة التي سيشغلها كل منهم على الشاشة. 210 00:15:58,741 --> 00:16:05,390 الآن، بحيث يجعل الأمر أكثر وضوحًا، لذلك ترفق مجموعة النماذج هذه. 211 00:16:05,390 --> 00:16:06,650 هذه الوحدة 212 00:16:06,650 --> 00:16:08,570 ونحن في طريقنا لرؤية هذا تكرار 213 00:16:08,570 --> 00:16:14,460 مرارا وتكرارا عندما نقوم بتصميم عناصر مختلفة من النموذج. 214 00:16:14,460 --> 00:16:20,020 ثم، أسفل ذلك، ترى علامة التسمية هذه هنا. 215 00:16:20,020 --> 00:16:25,180 بالنسبة لعلامة التسمية، هناك سمات معينة تم تعيينها إليها. 216 00:16:25,180 --> 00:16:28,740 لذلك ترى أن علامة التسمية تستخدم الاسم الأول. 217 00:16:28,740 --> 00:16:33,650 لذلك هذا الملصق هو لشيء مع اسم المعرف الأول. 218 00:16:33,650 --> 00:16:37,690 لذلك الذي هو مربع الإدخال الذي يتبع الحق تحت ذلك. 219 00:16:37,690 --> 00:16:39,790 نحن ذاهبون للنظر في ذلك في فترة قصيرة. 220 00:16:39,790 --> 00:16:46,136 ثم انظر إلى الفئات التي يتم تطبيقها على فئة التسمية، col-md-2. 221 00:16:46,136 --> 00:16:50,029 وهذا يعني أنه بالنسبة للشاشات المتوسطة إلى الكبيرة الإضافية، 222 00:16:50,029 --> 00:16:56,040 فإن هذا العنصر بالذات سيشغل عمودين من المساحة. 223 00:16:56,040 --> 00:16:57,884 ومن ثم لاحظ الآخر. 224 00:16:57,884 --> 00:17:00,764 مكتوب، شكل كول-ملصق 225 00:17:00,764 --> 00:17:05,957 لذلك تحدد تسمية col-form بشكل أساسي 226 00:17:05,957 --> 00:17:11,780 أنه يجب وضع هذه التسمية لتكون محاذاة مع 227 00:17:11,780 --> 00:17:18,270 العنصر الآخر الذي يشكل جزءًا من مجموعة النماذج هذه. 228 00:17:18,270 --> 00:17:20,576 لذلك، في هذه الحالة، مربع الإدخال. 229 00:17:20,576 --> 00:17:24,508 وهذا يعني أيضا 230 00:17:24,508 --> 00:17:29,868 أن التسمية تصطف في الوسط، 231 00:17:29,868 --> 00:17:35,550 أفقيا مع مربع الإدخال. 232 00:17:35,550 --> 00:17:39,535 لذلك هذا هو السبب في أننا نستخدم فئة كول-فورم التسمية. 233 00:17:39,535 --> 00:17:43,725 إذا لم تقم بتطبيق هذا، فسيتم 234 00:17:43,725 --> 00:17:48,185 محاذاة التسمية الخاصة بك إلى أعلى مربع الإدخال الخاص بك. 235 00:17:48,185 --> 00:17:53,551 أي النموذج الخاص بك لن تبدو كبيرة على أحجام الشاشة المتوسطة إلى الكبيرة جدا. 236 00:17:53,551 --> 00:17:59,727 الآن، على الجانب الأيسر، بالطبع، لأن نافذة المتصفح هذه يتم سحقها، 237 00:17:59,727 --> 00:18:05,360 لذلك يتم عرض العرض في حجم شاشة صغيرة أو إضافية صغيرة هنا. 238 00:18:05,360 --> 00:18:11,650 لذلك هذا هو السبب في أنك ترى التسمية التراص فوق مربع الإدخال هنا. 239 00:18:11,650 --> 00:18:14,560 لذلك هذا هو التسمية التي تحدد. 240 00:18:14,560 --> 00:18:18,380 لذلك إذا كان لديك تسمية تريد تعيينها لعنصر، لذلك 241 00:18:18,380 --> 00:18:20,890 هذه هي الطريقة التي ستقوم بتعيين التسمية. 242 00:18:20,890 --> 00:18:25,740 أسفل هنا، ترى فئة div كول-مد-10. 243 00:18:25,740 --> 00:18:29,120 لذلك هذا يحتل 10 المتبقية من 12 عمودا. 244 00:18:29,120 --> 00:18:31,670 حتى اثنين من الأعمدة التي يشغلها التسمية. 245 00:18:31,670 --> 00:18:36,070 والأعمدة العشرة المتبقية التي يشغلها هذا، ولكن محاطة داخل div. 246 00:18:36,070 --> 00:18:38,230 وداخل هذا div، 247 00:18:38,230 --> 00:18:43,493 ترى أن هناك عنصر علامة إدخال هناك مع نص النوع. 248 00:18:43,493 --> 00:18:49,734 مما يعني أن مربع الإدخال هذا يقبل إدخال النص. 249 00:18:49,734 --> 00:18:52,170 والفصل، انظر إلى الصف هنا. 250 00:18:52,170 --> 00:18:54,800 إنها تقول التحكم في الشكل 251 00:18:54,800 --> 00:18:57,730 هذا مهم لتطبيقه على مربع الإدخال هنا. 252 00:18:57,730 --> 00:19:01,301 حتى نموذج التحكم، ومعرف الاسم الأول. 253 00:19:01,301 --> 00:19:04,550 والاسم الذي هو الاسم الأول 254 00:19:04,550 --> 00:19:07,630 ثم العنصر النائب الاسم الأول. 255 00:19:07,630 --> 00:19:12,840 لذا فإن العنصر النائب هو ما يظهر داخل المربع كعنصر نائب 256 00:19:12,840 --> 00:19:14,610 لمربع الإدخال. 257 00:19:14,610 --> 00:19:17,470 لذلك يتم تعيين كل هذه السمات. 258 00:19:17,470 --> 00:19:18,690 والأهم من ذلك، 259 00:19:18,690 --> 00:19:23,810 لاحظ استخدام فئة التحكم في النموذج التي يتم تطبيقها على نوع الإدخال. 260 00:19:23,810 --> 00:19:29,960 إذن هذه هي الطريقة التي تقوم بهيكلة هذين العنصرين في النموذج الخاص بك. 261 00:19:29,960 --> 00:19:35,425 لأحجام الشاشة الصغيرة وأدناه، فإنه يكدس الأمرين. 262 00:19:35,425 --> 00:19:37,118 ولكن بالنسبة لمتوسط إلى كبير إضافي، 263 00:19:37,118 --> 00:19:41,500 رأيت أنه يضعهم أفقياً جنباً إلى جنب. 264 00:19:41,500 --> 00:19:45,645 وينطبق الشيء نفسه على رمز اسم العائلة أيضًا. 265 00:19:45,645 --> 00:19:49,670 سيكون مشابهًا جدًا لكيفية تنظيم الاسم الأول. 266 00:19:49,670 --> 00:19:54,380 لذلك أود منك أن تنفق قليلا من الوقت في إلقاء نظرة على هذا الرمز أيضا. 267 00:19:54,380 --> 00:19:58,150 بحيث ترون، بناء على فهمك لهذا، 268 00:19:58,150 --> 00:20:00,230 كيف يتم تنسيق هذا أيضا. 269 00:20:01,550 --> 00:20:08,360 النوع التالي من الحدث الرسمي الذي سنضيفه هو عنصر مجموعة الإدخال. 270 00:20:08,360 --> 00:20:09,330 اسمحوا لي أن أضيف في التعليمات البرمجية. 271 00:20:09,330 --> 00:20:13,111 سننظر في ما يتضح أن النموذج. 272 00:20:13,111 --> 00:20:15,560 وبعد ذلك سنعود وفحص الشفرة 273 00:20:15,560 --> 00:20:19,542 حتى هنا، بعد div الثاني، بعد حقل اسم العائلة، 274 00:20:19,542 --> 00:20:24,840 سأقوم بتضمين رمز العنصر التالي هنا. 275 00:20:25,880 --> 00:20:28,142 ثم دعونا حفظ التغييرات. 276 00:20:28,142 --> 00:20:30,466 وبعد ذلك، على الفور، 277 00:20:30,466 --> 00:20:36,360 سترى بضعة أشياء إضافية تضاف إلى النموذج الخاص بك. 278 00:20:36,360 --> 00:20:38,975 تشاهد حقل رقم هاتف تمت إضافته هنا. 279 00:20:38,975 --> 00:20:42,985 هذا، من نظرته، ترى أن هذا مشابه جدا لذلك. 280 00:20:42,985 --> 00:20:45,335 لذلك أنا لن أشرح رمز لهذا. 281 00:20:45,335 --> 00:20:48,110 هذا يجب أن يكون واضحا جدا بالنسبة لك لفهم. 282 00:20:48,110 --> 00:20:52,073 ومن ثم يجب أن يكون حقل البريد الإلكتروني هذا واضحًا جدًا بالنسبة 283 00:20:52,073 --> 00:20:53,747 لك لفهمه. 284 00:20:53,747 --> 00:20:56,537 لأن هذا يبدو مشابهًا جدًا لاسم العائلة. 285 00:20:56,537 --> 00:21:02,477 باستثناء أنه لهذا، حقل الإدخال، سيتم تعيين النوع إلى البريد الإلكتروني. 286 00:21:02,477 --> 00:21:06,739 بحيث يتم 287 00:21:06,739 --> 00:21:10,094 تلقائيا تشغيل قدرات التحقق من النموذج المدمج في المتصفح الخاص بك. 288 00:21:10,094 --> 00:21:14,113 بحيث عندما تكتب شيئًا لا يبدو وكأنه بريد إلكتروني، 289 00:21:14,113 --> 00:21:16,860 فستشتكي بشكل مناسب. 290 00:21:16,860 --> 00:21:21,780 لذلك دعونا نفحص هذا الجزء بالذات من النموذج هنا. 291 00:21:21,780 --> 00:21:27,500 لاحظ أنه في هذه الحالة، نقوم بإضافة الأقواس اليسرى 292 00:21:27,500 --> 00:21:31,430 والقوس الأيمن إلى مربع الإدخال هذا. 293 00:21:31,430 --> 00:21:36,570 إذن كيف تضيف أشياء إلى صندوقك هكذا؟ 294 00:21:36,570 --> 00:21:41,330 إلقاء نظرة على التعليمات البرمجية هنا في المحرر الخاص 295 00:21:41,330 --> 00:21:45,750 بك، ترى أنه لا يزال لديك صف مجموعة النموذج الذي تفهمه بالفعل. 296 00:21:45,750 --> 00:21:50,942 وأسفل هنا، لديك نوع عنصر الإدخال telnum معرف عنصر، 297 00:21:50,942 --> 00:21:54,460 وهلم جرا، والتي يجب أن تكون واضحة جدا بالنسبة لك. 298 00:21:54,460 --> 00:21:57,360 لذا لا أعتقد أنني بحاجة لشرح هذا الجزء لك 299 00:21:57,360 --> 00:22:04,366 لاحظ كيف أستخدم فئات عمود الشبكة في Bootstrap لكل من هذه. 300 00:22:04,366 --> 00:22:08,060 لذلك يتم إعطاء التسمية كول-مد-2. 301 00:22:08,060 --> 00:22:12,062 ومن ثم رقم الهاتف الأول يعطى 302 00:22:12,062 --> 00:22:16,880 كول-xs-7 كول-سم-6 و كول-مد-7 هنا. 303 00:22:16,880 --> 00:22:23,100 وبهذه الطريقة، رقم الهاتف، يتم وضع هذا العنصر بشكل صحيح. 304 00:22:23,100 --> 00:22:27,310 ولكن، على وجه الخصوص، دعونا نولي اهتماما لهذا الجزء. 305 00:22:27,310 --> 00:22:31,470 لذلك هذا واحد هنا هو داخل هذا ديف. 306 00:22:32,670 --> 00:22:36,250 حتى داخل هذا div، لاحظ الطبقة المعطاة لها. 307 00:22:36,250 --> 00:22:38,689 الصف يقول المدخلات مجموعة. 308 00:22:38,689 --> 00:22:43,587 وهذا يعني بشكل أساسي أن كل ما هو داخل هذا div سيتم التعامل معه 309 00:22:43,587 --> 00:22:45,350 كمجموعة من العناصر هنا. 310 00:22:45,350 --> 00:22:49,030 لذلك هذا هو السبب في أن الطبقة المعطاة هي مجموعة المدخلات. 311 00:22:49,030 --> 00:22:53,600 الآن، لإضافة شيء من هذا القبيل، سوف تستخدم 312 00:22:53,600 --> 00:22:59,000 فئة تسمى المدخلات مجموعة الملحق. 313 00:22:59,000 --> 00:23:04,490 ثم لاحظ أنني أستخدم div لعقد هذا العنصر. 314 00:23:04,490 --> 00:23:08,200 يمكنني استخدام أي شيء هنا، ولكن div يأتي في متناول اليدين هنا. 315 00:23:08,200 --> 00:23:12,980 لذلك أقول فئة div الإدخال/المجموعة الملحق. 316 00:23:12,980 --> 00:23:16,250 ثم نوع div الإغلاق داخل، حيث، 317 00:23:16,250 --> 00:23:18,500 لاحظ أن لدي الأقواس اليسرى. 318 00:23:18,500 --> 00:23:25,477 لذلك هذا هو ما يسمح لك لإضافة في بعض 319 00:23:25,477 --> 00:23:30,963 الزائدة الإضافية إلى مربع الإدخال الخاص بك هنا. 320 00:23:30,963 --> 00:23:38,390 وبالمثل، فإن واحد أدناه هنا هو أيضا قوس الحق في مجموعة المدخلات - الملحق. 321 00:23:38,390 --> 00:23:42,350 لذلك هذا هو ما يضيف قوس الحق الآخر هنا. 322 00:23:42,350 --> 00:23:46,270 الآن، بين هذين، بالطبع، لديك نوع الإدخال. 323 00:23:46,270 --> 00:23:51,094 المدخلات مع نوع الهاتف والطبقة شكل التحكم، معرف، اسم، 324 00:23:51,094 --> 00:23:54,310 العنصر النائب، كل شيء في مكان هنا. 325 00:23:54,310 --> 00:23:57,190 لذلك هذا ليس سوى جزء رمز المنطقة. 326 00:23:57,190 --> 00:24:02,049 حتى إذا كنت تستخدم هذه المجموعة المدخلات جنبا إلى جنب مع المدخلات مجموعة الإضافات 327 00:24:02,049 --> 00:24:04,440 مثل هذا على أي من الجانبين. 328 00:24:04,440 --> 00:24:10,070 سيتم إضافة هذه الأشياء إلى عنصر الإدخال الخاص بك مثل هذا. 329 00:24:10,070 --> 00:24:15,880 هذا يوفر لك طريقة لطيفة لتصميم النموذج الخاص بك مع بعض المضافة في. 330 00:24:15,880 --> 00:24:20,170 على سبيل المثال، إذا كان لديك حقل يقبل 331 00:24:22,450 --> 00:24:27,360 المال كإدخال، فيمكنك ببساطة إضافة علامة دولار إلى الجانب الأيسر 332 00:24:27,360 --> 00:24:33,050 للإشارة إلى المستخدم إلى أن هذا حقل يأخذ قيمة العملة في الوقت الحالي. 333 00:24:33,050 --> 00:24:37,558 الآن في هذه الحالة، يأخذ هذا الحقل في رمز المنطقة. 334 00:24:37,558 --> 00:24:43,330 وإذا رأيت كيف يتم كتابة رموز المنطقة في الولايات المتحدة 335 00:24:43,330 --> 00:24:47,640 وكندا، فأنت تعرف أنها محاطة داخل قوس اليسار واليمين. 336 00:24:47,640 --> 00:24:52,680 لذلك، هذا ما يسمح لي بتحديد شيء من هذا القبيل في النموذج الخاص بي هناك. 337 00:24:53,900 --> 00:24:56,460 مجموعتي التالية من العناصر التي سأقوم بإضافتها إلى 338 00:24:56,460 --> 00:25:01,530 النموذج الخاص بي هي مربع اختيار واختيار. 339 00:25:01,530 --> 00:25:03,460 لذا، كيف نضيف ذلك؟ 340 00:25:03,460 --> 00:25:09,014 لذا، إذا كنت معتادًا على نماذج HTML، فأنت تفهم كيفية عمل التحديد 341 00:25:09,014 --> 00:25:13,070 وتفهم كيفية عمل مربعات الاختيار في نماذج HTML. 342 00:25:13,070 --> 00:25:15,880 الآن، يمنحك Bootstrap بعض 343 00:25:15,880 --> 00:25:20,080 الفئات الإضافية التي تمكنك من تنسيق هذه العناصر بشكل مناسب. 344 00:25:20,080 --> 00:25:21,740 لذلك، اسمحوا لي أن أضيف في الاقتباس. 345 00:25:23,400 --> 00:25:25,120 دعونا حفظ التغييرات. 346 00:25:25,120 --> 00:25:29,695 نلقي نظرة على ما ينتج عن ذلك في النموذج هنا. 347 00:25:29,695 --> 00:25:32,480 ثم ألقِ نظرة على الشفرة 348 00:25:32,480 --> 00:25:38,060 لذلك هنا، ترى أن لدي مربع الاختيار وبعض الرسائل هنا. 349 00:25:38,060 --> 00:25:45,372 ثم هذا هو محدد الذي يسمح لي للاختيار من بين مجموعة من الخيارات هنا. 350 00:25:47,324 --> 00:25:53,309 الآن النموذج كما هو موجود هنا هو ما سترى في 351 00:25:53,309 --> 00:25:56,080 أحجام الشاشة الصغيرة والصغيرة جدا. 352 00:25:56,080 --> 00:25:59,940 دعونا نلقي نظرة على ذلك على حجم شاشة أكبر. 353 00:25:59,940 --> 00:26:04,740 نفس النموذج عند وضعه على 354 00:26:04,740 --> 00:26:06,760 أحجام الشاشة المتوسطة إلى الكبيرة الإضافية سيبدو مثل هذا. 355 00:26:06,760 --> 00:26:11,440 حتى تتمكن من معرفة كيفية وضع رقم هاتف جهة الاتصال هنا، 356 00:26:11,440 --> 00:26:14,500 ويتم وضع البريد الإلكتروني هنا. 357 00:26:14,500 --> 00:26:19,825 لذا لاحظ أن هذه التسميات 358 00:26:19,825 --> 00:26:26,510 تصطف إلى خط في الوسط مع الصناديق هنا. 359 00:26:26,510 --> 00:26:32,640 هذا ما تحققه فئة تسمية نموذج col أولاً. 360 00:26:32,640 --> 00:26:36,940 الآن، دعونا نركز على هذا الذي أضفناه للتو. 361 00:26:36,940 --> 00:26:40,060 هنا، نرى أن لدينا مربع اختيار المضافة في. 362 00:26:40,060 --> 00:26:43,312 وبعد ذلك، حقل نصي هنا. 363 00:26:43,312 --> 00:26:44,650 لذا هل يمكننا الاتصال بك؟ 364 00:26:44,650 --> 00:26:51,370 لذلك، على سبيل المثال، تتوقع من المستخدم إما التحقق من ذلك وإيقاف تشغيله. 365 00:26:51,370 --> 00:26:53,500 فما هو سبب مربع الاختيار؟ 366 00:26:53,500 --> 00:26:56,330 وبالمثل، يمكن أن يكون لديك أزرار الاختيار. 367 00:26:56,330 --> 00:27:02,020 يدعم Bootstrap أزرار الاختيار المتوفرة في نماذج HTML. 368 00:27:02,020 --> 00:27:05,650 وتوفير بعض الطبقات لتصميمها بشكل صحيح. 369 00:27:05,650 --> 00:27:10,850 ثم هذا هو بالطبع المحدد الذي يسمح لك بالاختيار من بين الخيارات. 370 00:27:10,850 --> 00:27:13,113 حتى العودة والنظر في التعليمات البرمجية. 371 00:27:13,113 --> 00:27:15,250 دعونا نرى كيف يتم تنفيذ ذلك. 372 00:27:16,340 --> 00:27:22,030 العودة لإلقاء نظرة على التعليمات البرمجية، ترى أن هذا واحد هو مرة أخرى نموذج 373 00:27:22,030 --> 00:27:28,630 ديف صف مجموعة هنا الذي يرفق شيئين هنا. 374 00:27:28,630 --> 00:27:32,859 واحد هو نموذج الاختيار 375 00:27:32,859 --> 00:27:38,731 كول-مد-6 إزاحة مد-2. 376 00:27:38,731 --> 00:27:45,120 لذلك هذا هو ما يرفق مربع اختيار داخل هذا العنصر div. 377 00:27:45,120 --> 00:27:53,902 ثم أسفل هنا لدي فئة ديف، كول-مد-3 إزاحة مد-1. 378 00:27:53,902 --> 00:27:59,979 لذلك لاحظ أن هنا، وهذا يقول نموذج الاختيار كول-مد-6 إزاحة مد-2. 379 00:27:59,979 --> 00:28:04,197 السبب في أنني أفعل إزاحة مد-2 هو ليس لدي تسمية. 380 00:28:04,197 --> 00:28:08,166 لذلك كنت عادة استخدام عمودين للتسميات. 381 00:28:08,166 --> 00:28:13,160 لذلك بما أن مربع الاختيار هذا يجب أن محاذاة نفسها إلى الجانب الأيمن في النموذج. 382 00:28:13,160 --> 00:28:16,591 لذلك هذا هو السبب في أنني استخدمت إزاحة مد-2 هنا. 383 00:28:16,591 --> 00:28:22,654 ثم داخل هنا تقول فئة التسمية = «نموذج التحقق من التسمية». 384 00:28:22,654 --> 00:28:28,042 ثم يوفر علامة الإدخال 385 00:28:28,042 --> 00:28:32,790 هنا مع مربع الاختيار نوع. 386 00:28:32,790 --> 00:28:35,070 إذن هذه هي الطريقة التي تقوم بها بإنشاء مربع اختيار. 387 00:28:35,070 --> 00:28:38,300 ثم الفئة، فئة Bootstrap التي ستقوم بتطبيقها على 388 00:28:38,300 --> 00:28:41,768 مربع الاختيار الخاص بك هي إدخال التحقق من النموذج. 389 00:28:41,768 --> 00:28:49,390 ثم يكون الاسم والقيمة الأولية فارغين. 390 00:28:49,390 --> 00:28:54,262 وبعد ذلك، هذا هو التسمية الفعلية التي تراها يتم 391 00:28:54,262 --> 00:28:58,670 تطبيقها على مربع الاختيار هذا هناك. 392 00:28:58,670 --> 00:29:04,260 لذلك لاحظ كيف يتم وضع هذين داخل علامة التسمية هنا. 393 00:29:04,260 --> 00:29:09,070 إذن هذه هي الطريقة التي تقوم بها بإنشاء مربع اختيار مع تصنيفه 394 00:29:09,070 --> 00:29:12,980 ثم ضع ذلك في النموذج الخاص بك هنا. 395 00:29:12,980 --> 00:29:15,840 لذلك هذا هنا يستخدم نموذج الاختيار التسمية. 396 00:29:15,840 --> 00:29:19,880 ثم هنا، يجب أن يكون لديك مربع اختيار، نوع الإدخال = «مربع الاختيار»، 397 00:29:19,880 --> 00:29:21,340 ثم قم بتسمية نفسها. 398 00:29:21,340 --> 00:29:23,620 إذا هنا ترى قوية، هل يمكننا الاتصال بك؟ 399 00:29:23,620 --> 00:29:29,770 لهذا السبب يتم عرضه بحروف جريئة بجوار مربع الاختيار هنا. 400 00:29:29,770 --> 00:29:37,390 الآن أدناه في التعليمات البرمجية، لديك فئة div col-md-3 إزاحة md-1. 401 00:29:37,390 --> 00:29:40,760 لذلك هذا يحتل ثلاثة أعمدة داخل عمود واحد إزاحة. 402 00:29:40,760 --> 00:29:42,980 وبالتالي فإن مجموع أربعة أعمدة هنا. 403 00:29:42,980 --> 00:29:50,113 لذلك هذا واحد هو كول-مد-6 زائد 2، وهذا هو ثمانية أعمدة. 404 00:29:50,113 --> 00:29:51,480 حتى 8 زائد 4، 12. 405 00:29:51,480 --> 00:29:55,140 بحيث يعتني بك 12 عمودًا لشبكتك هناك. 406 00:29:55,140 --> 00:30:01,740 الآن داخل هذا، ترى تحديد مطبق هنا. 407 00:30:02,880 --> 00:30:07,320 الآن هذا هو الخيار المحدد الذي يدعم نماذج ملف HTML. 408 00:30:07,320 --> 00:30:09,240 وانظر إلى الفصل المطبق على هذا. 409 00:30:09,240 --> 00:30:12,870 وتقول class = «form-control» إلى التحديد. 410 00:30:12,870 --> 00:30:15,830 ثم تعطي الخيارات في التحديد هنا. 411 00:30:15,830 --> 00:30:18,638 حتى