[MUSIC]
في هذا التمرين، سنلقي نظرة على دعم Bootstrap للأزرار والنماذج.
لذلك سنقوم بتضمين بعض الأزرار ومجموعة الأزرار في صفحة الويب الخاصة بنا.
وننظر أيضًا في تصميم النماذج وتصميم النماذج باستخدام فئات Bootstrap.
للبدء، انتقل إلى صفحة التعليمات وقم
بتنزيل ملف contactus.html.zip الذي قدمناه هناك.
لذلك انقر بزر الماوس الأيمن على ذلك،
ثم احفظ هذا الرابط في مجلد الارتباك الخاص بك.
كما،
ملف الاتصال. html.zip.
ثم مرة واحدة يتم تحميل ملف مضغوط، بفك ضغط الملف للحصول على صفحة contactus.html.
ثم يمكنك حذف ملف مضغوط.
بمجرد فك ضغط الملف والحصول على صفحة contactus.html،
ستلاحظ أنه عند تحميل هذه الصفحة في
متصفحك باستخدام localhost:3000/ contactus.html،
فسترى أن هذه الصفحة بالفعل تم تشكيلها مسبقًا مع بعض المحتوى.
لذلك يمكنك ملاحظة أن لديك بالفعل شريط التنقل هناك.
لدينا جومبوترون مهيأة بالفعل بالنسبة لنا.
وستلاحظون أن لدي فتات الخبز
والاتصال بنا متجهين هنا
ثم سترى بعض المعلومات الإضافية، العنوان هنا.
وأيضًا، ستلاحظ أن التذييل قد تم تكوينه بالفعل.
ولكن ستلاحظ شيئين هنا،
ستلاحظ أن هناك سطر هنا يقول مجموعات الأزرار تذهب هنا
ثم سطر واحد آخر هنا يقول النموذج يذهب هنا.
لذلك نحن ذاهبون لاستبدال هذين مع مجموعة زر ونموذج.
وعلى طول الطريق، تعلم دعم Bootstrap للأزرار والنماذج.
قبل المضي قدما، والآن بعد أن لدينا ثلاث صفحات في موقعنا على الانترنت،
انها فكرة جيدة بالنسبة لنا لربطها معا،
سواء في شريط التنقل أو في الروابط في تذييل الصفحة.
دعونا تعديل هذين حتى نتمكن من التنقل بين هذه الصفحات الثلاث بسهولة.
حتى الذهاب إلى صفحة contactus.html، ستلاحظ أنه في شريط التنقل،
لدي بالفعل الروابط إلى index.html إعداد بشكل صحيح.
وستلاحظ أنه في الأسفل
هنا لديك رابط الاتصال هنا.
ولكن لم يتم تكوين الرابط المقابل للحول بشكل صحيح.
لذلك انتقل إلى هذا الرابط هنا ثم قم بتحديث ذلك إلى
aboutus.html.
الاتصال بنا رابط يمكن أن تترك وحدها على هذا النحو.
ثم حفظ التغييرات.
الآن وبالمثل، انتقل إلى تذييل هذه الصفحة.
وستلاحظ أنه في التذييل لدينا هذه الروابط الثلاثة هنا.
وهذا قد يكون نقطة جيدة لاستبدال الروابط
مع الروابط إلى الصفحات المقابلة.
لذلك سأقول، index.html، aboutus.html،
و، contactus.html.
و احفظ التغييرات
وبالمثل، انتقل إلى index.html، ثم في index.html أيضا،
لم يتم إعداد رابط الاتصال بنا.
لذلك دعونا تحديث ذلك إلى contactus.html.
ثم وبالمثل، قم بتحديث الروابط في التذييل.
انتقل أيضا إلى aboutus.html ثم إصلاح الروابط حتى هناك.
حتى في aboutus.html أيضا، في رأس أنا ذاهب لإصلاح الرابط.
وأيضا في تذييل aboutus.html.
حتى الآن عندما تذهب إلى موقع الويب الخاص
بك، ستتمكن من الانتقال مرة أخرى إلى صفحتك الرئيسية، إلى صفحتك حول.
ومن الصفحة حول، يمكنك حتى العودة إلى صفحة جهات الاتصال.
لذلك
يجب أن تكون جميع الروابط بين الصفحات الثلاث في الرؤوس المقابلة، وكذلك التذييلات، هنا الإعداد.
بحيث إذا قمت بالنقر فوق أي واحد من هذه سوف يأخذك إلى الصفحة المناسبة.
الآن هو الوقت المناسب لبدء العمل على الأزرار التي سنقوم
بتضمينها في صفحة contactus.html لدينا.
لذلك ما سأفعله هو أنني سوف استبدال هذا الخط مع رمز
للزر ومجموعة زر
وبعد ذلك، سنعود لشرح كيفية عمل هذا الشيء كله.
فتح contactus.html في محررنا،
سنقوم بتحديد المكان الذي يوجد فيه هذا البيان، مجموعة زر يذهب هنا، موجود.
ثم سأقوم باستبدال ذلك بالرمز المقابل
لمجموعة الأزرار هذه أولاً.
ثم سأعود لشرح كيفية عمل هذا الرمز.
لذلك دعونا حفظ التغييرات، ومن ثم نلقي نظرة على ما
تبدو مجموعة الأزرار هذه في متصفحنا.
الذهاب إلى متصفحك، يمكنك الآن أن ترى أنه في
صفحة الويب الخاصة بنا تم إنشاء مجموعة الأزرار.
حتى تتمكن من رؤية أن هناك ثلاثة أزرار هنا،
أزرار الاتصال، سكايب والبريد الإلكتروني.
الآن، يتم ربط كل هذه الثلاثة معا في شريط واحد أو
شريط زر واحد أو ما هو في شروط Bootstrap تسمى مجموعة زر.
لذلك دعونا ننظر في كيف نذهب حول بناء شيء من هذا القبيل في
رمز بوتستراب.
حتى هنا لدي كل من نافذة المتصفح ورمز بلدي مفتوحة جنبا إلى جنب.
لذلك دعونا نلقي نظرة على كيفية إنشاء رمز الزر هذا.
إلقاء نظرة على التعليمات البرمجية، لاحظت أن
الأزرار يتم تضمينها داخل div هنا.
إلى div، نطبق الفصل، btn-group.
لذا، إذا كان لديك مجموعة من الأزرار التي تريد الانضمام إليها معًا
وتقديمها كمجموعة من الأزرار، كشريط من الأزرار،
فستستخدم div مع فئة مجموعة الأزرار
والدور كمجموعة هنا إلى ذلك div.
الآن داخل ذلك، ستلاحظ أنني أستخدم
العلامة، a، لتحديد الأزرار الثلاثة.
لذلك دعونا ننظر في كيفية تعريف الزر الثلاثة.
دعونا ننظر في كيفية تعريف زر الاتصال.
لذلك هذا الخط معين يحدد زر الاتصال.
لذلك أقول، أ، الدور يساوي الزر.
لذلك هذا، a، علامة هنا،
أنا استخدامه كزر هنا.
لهذا السبب أحدد الدور كزر.
لذلك هذا مهم.
ثم ننظر إلى الطبقات التي أطبقها على هذا.
لذا فإن أول واحد هو فئة btn. فئة
btn هي فئة زر Bootstrap.
لذلك سيتم عرض ذلك كزر Bootstrap الكلاسيكي.
الجزء الثاني يقول هو بتن الابتدائي.
لذلك، هذا هو ما يحدد لون الزر هنا.
لذلك، في هذه الحالة هذا اللون الزر أزرق.
وهكذا، هذا هو اللون الأساسي في Bootstrap.
حتى btn الابتدائي.
ثم بعد ذلك، انظر إلى استخدام href هنا.
لذلك، بما أن هذه علامة A، يمكنني استخدام سمة href في هذه العلامة A.
لذا، تشير السمة href إلى رقم الهاتف.
وبعد ذلك لاحظت أنني أستخدم رمز الخط هنا للهاتف.
هذا هو السبب في أنني لدي فئة اتحاد كرة القدم فا الهاتف وبعد ذلك بعد مكالمة كلمة.
لذا، هذا هو ما يمكّن من بناء هذا
الزر الأزرق، الذي يتم تضمينه في شريط الأزرار هذا هنا.
وبالمثل، فإن التالي، لاحظت أن هذا يقول أيضا زر الدور.
ثم كما تذهب من خلال، ترى أن btn-معلومات.
BTN-Info يعطيها لون أزرق فاتح في اللون.
لذلك، افتراضيا btn-info يشير إلى زر أزرق فاتح اللون هنا.
وبعد ذلك، يمكنك أن ترى أن لدي سكايب محددة هنا.
ثم الثالث الذي، هو زر أخضر هناك مع البريد الإلكتروني.
لاحظ أن أحدد الحروف دور = فئة زر = btn btn-النجاح.
لذلك، عندما تقول btn-النجاح، سيكون هذا الزر الأخضر هنا.
لذلك، لديك بعض الألوان التي تم تعريفها بالفعل في Bootstrap.
يشير الأساسي إلى اللون الأزرق في لأول نجاح أزرق فاتح يشير إلى
اللون الأخضر، ثم لديك تحذير من شأنه أن يكون لون أصفر شاحب، ومن
ثم خطر، وهو اللون الأحمر.
لذا، هذه هي الألوان الافتراضية التي تم إعدادها في Bootstrap.
ثم الإعداد href، مع mailto هنا،
ثم بعد ذلك، لديك.
الخط كرمز هنا ثم البريد الإلكتروني هناك.
لذلك يتم وضع هذه العلامات الثلاثة الإلكترونية، والتي تعمل حاليًا كأزرار،
في جانب تلك div، والتي تعمل كمجموعة btn-group.
لذا، هذه هي الطريقة التي نعرض بها مجموعة من الأزرار في Bootstrap.
إذا كنت تريد فقط زر واحد،
كل ما عليك القيام به هو تضمين واحد فقط من هذه الخطوط هناك.
لذلك، يمكنك أيضًا استخدام علامة الزر.
إذا كنت تستخدم علامة الزر، فلن تحتاج إلى تحديد الدور،
بدلاً من ذلك فقط تقول زر الكتابة.
لأن الزر يمكن أن يكون بمثابة زر إرسال هناك.
حتى في وقت لاحق، في أشكال سوف ننظر في استخدام علامة زر،
لإنشاء زر ليتم تضمينها في النموذج لدينا.
الاستمرار في التمرين، ستكون الخطوة التالية هي البدء،
وتطوير النموذج الذي سنقوم بتضمينه في صفحة contactus.html.
سنفعل ذلك خطوة بخطوة، بحيث في كل خطوة نتعلم قليلا من
كيفية تضمين بعض العناصر في شكلها.
لذلك، كبداية، عندما تذهب إلى صفحة contactus.html،
هناك حق، سترى هذا البيان يسمى، نموذج يذهب هنا.
الآن، ما سأقوم به هو تغيير هذا من col-sm
إلى col-md، بحيث بالنسبة
لأحجام الشاشة الصغيرة إلى الصغيرة، سيتم وضع شكلي
في احتلال كامل عرض الشاشة، لأنه يستخدم col-xs-12.
ولكن من شاشة متوسطة الحجم على الأجنحة،
سوف تشغل 9 أعمدة فقط من 12 عمودًا.
لذلك، دعونا نبدأ في بناء النموذج.
لذا، ما سأقوم به هو، سأقوم باستبدال هذا، بأول جزء من الشفرة.
سنقوم بتضمين حقلين في نموذجنا،
للاسم الأول واسم العائلة للمستخدم.
اسمحوا لي أن أضيف في التعليمات البرمجية، ثم سنلقي نظرة على النتيجة.
وبعد ذلك، سنعود وفحص الشفرة.
لذلك، إضافة في التعليمات البرمجية في هذه المرحلة،
كما هو الحال دائما هذه مقتطفات التعليمات البرمجية في التعليمات.
لذلك، اسمحوا لي أن حفظ التغييرات.
ثم سنعود وننظر إلى ما يبدو عليه هذا النموذج في المتصفح.
إلقاء نظرة على النموذج، سترى أن لديهم الآن موضوعين في النموذج هنا.
أول واحد، لديه تسمية على الجانب الأيسر قائلا الاسم
الأول ثم لديك مربع الإدخال هنا.
ثم اسم العائلة، ثم مربع الإدخال هنا.
الآن لاحظت أيضا أن هذا النموذج وضعت،
بحيث هذا الجزء تحتل نصف جزء من الشاشة،
والجزء المتبقي يجري احتلالها من قبل الجزء المتبقي من الشاشة.
لقد بدأتِ تتسائلين كيف يمكننا فعل هذا؟
هل تساعدنا شبكة Bootstrap على اتخاذ قرار بشأن هذه الأحجام.
ذلك سَيَكُونُ a سؤال جيد جداً لَك لتَسْألُه نفسك.
دعونا نرى الرمز وفهم كيف يبدو.
قبل أن نفعل ذلك، دعونا نلقي نظرة على نفس تخطيط النماذج،
في حجم الشاشة الصغيرة جدا.
لذلك، والتبديل إلى حجم الشاشة الصغيرة جدا.
لذلك سنذهب إلى غالاكسي S5.
لاحظت، كيف يتم وضع النموذج في حجم الشاشة الصغيرة الإضافية.
لذلك، سترى أن التسمية في الأعلى،
ثم المربع نفسه، مربع الإدخال نفسه هو القاع، وبالمثل للاسم الأخير.
لذا، لاحظت أن Bootstrap.
بالمناسبة، فإنه يوفر تلك الطبقات النموذج.
تلقائيًا، يجعل النموذج الخاص بك مستجيبًا، بحيث عندما
يتم وضعه على أحجام شاشة مختلفة، سيتم وضع النموذج بشكل مناسب،
بحيث لن يتم سحقه بالكامل على أحجام الشاشة الصغيرة.
ولكن بالنسبة لأحجام الشاشة الأكبر، لأن لديك عقارات أكبر،
فأنت قادر على تمديد النموذج، للاستفادة من المساحة الإضافية التي لديك.
إلقاء نظرة على شفرة المصدر هذه، والنموذج جنبًا إلى جنب، ومن الواضح
أن أول شيء تلاحظه، هو أن النموذج يبدأ بعلامة النموذج هنا.
لذلك، شكل ثم نموذج الإغلاق، علامة هنا.
لذلك، داخل هناك، كنت تصف أجزاء مختلفة من النموذج الخاص بك.
لذلك، دعونا نلقي نظرة على كيفية إنشاء الاسم الأول،
الاسم الأخير الواضح كما يبدو يجب أن يستخدم نهجا مشابها.
لذلك، في الافتراضي، ما تلاحظه هو أن هناك div هنا.
عنصر div هنا، مع div الإغلاق هنا.
لذلك يحتوي عنصر div هذا على فئة تسمى مجموعة النموذج.
ثم تليها فئة صف.
لذا فإن فئة مجموعة النموذج بشكل أساسي،
تقول أن ما هو داخل هذا div سيتم التعامل معه كمجموعة من العناصر.
وبعد ذلك سيتم وضعها وفقا لذلك.
والجزء الثاني، ترى استخدام الصف هنا.
لذلك، سترى أن صف مجموعة Bootstrap يأتي في اللعب هنا.
وهكذا هذه المجموعة نموذج معين، يمكن وضعها
باستخدام الصف وفئات العمود التي لديك من شبكة Bootstrap.
حتى الآن، إذا قمت بتطبيق الصف على هذا div،
مهما كان داخل هناك، يمكنك استخدام فئات العمود،
لتحديد بالضبط مقدار المساحة التي سيشغلها كل منهم على الشاشة.
الآن، بحيث يجعل الأمر أكثر وضوحًا، لذلك ترفق مجموعة النماذج هذه.
هذه الوحدة
ونحن في طريقنا لرؤية هذا تكرار
مرارا وتكرارا عندما نقوم بتصميم عناصر مختلفة من النموذج.
ثم، أسفل ذلك، ترى علامة التسمية هذه هنا.
بالنسبة لعلامة التسمية، هناك سمات معينة تم تعيينها إليها.
لذلك ترى أن علامة التسمية تستخدم الاسم الأول.
لذلك هذا الملصق هو لشيء مع اسم المعرف الأول.
لذلك الذي هو مربع الإدخال الذي يتبع الحق تحت ذلك.
نحن ذاهبون للنظر في ذلك في فترة قصيرة.
ثم انظر إلى الفئات التي يتم تطبيقها على فئة التسمية، col-md-2.
وهذا يعني أنه بالنسبة للشاشات المتوسطة إلى الكبيرة الإضافية،
فإن هذا العنصر بالذات سيشغل عمودين من المساحة.
ومن ثم لاحظ الآخر.
مكتوب، شكل كول-ملصق
لذلك تحدد تسمية col-form بشكل أساسي
أنه يجب وضع هذه التسمية لتكون محاذاة مع
العنصر الآخر الذي يشكل جزءًا من مجموعة النماذج هذه.
لذلك، في هذه الحالة، مربع الإدخال.
وهذا يعني أيضا
أن التسمية تصطف في الوسط،
أفقيا مع مربع الإدخال.
لذلك هذا هو السبب في أننا نستخدم فئة كول-فورم التسمية.
إذا لم تقم بتطبيق هذا، فسيتم
محاذاة التسمية الخاصة بك إلى أعلى مربع الإدخال الخاص بك.
أي النموذج الخاص بك لن تبدو كبيرة على أحجام الشاشة المتوسطة إلى الكبيرة جدا.
الآن، على الجانب الأيسر، بالطبع، لأن نافذة المتصفح هذه يتم سحقها،
لذلك يتم عرض العرض في حجم شاشة صغيرة أو إضافية صغيرة هنا.
لذلك هذا هو السبب في أنك ترى التسمية التراص فوق مربع الإدخال هنا.
لذلك هذا هو التسمية التي تحدد.
لذلك إذا كان لديك تسمية تريد تعيينها لعنصر، لذلك
هذه هي الطريقة التي ستقوم بتعيين التسمية.
أسفل هنا، ترى فئة div كول-مد-10.
لذلك هذا يحتل 10 المتبقية من 12 عمودا.
حتى اثنين من الأعمدة التي يشغلها التسمية.
والأعمدة العشرة المتبقية التي يشغلها هذا، ولكن محاطة داخل div.
وداخل هذا div،
ترى أن هناك عنصر علامة إدخال هناك مع نص النوع.
مما يعني أن مربع الإدخال هذا يقبل إدخال النص.
والفصل، انظر إلى الصف هنا.
إنها تقول التحكم في الشكل
هذا مهم لتطبيقه على مربع الإدخال هنا.
حتى نموذج التحكم، ومعرف الاسم الأول.
والاسم الذي هو الاسم الأول
ثم العنصر النائب الاسم الأول.
لذا فإن العنصر النائب هو ما يظهر داخل المربع كعنصر نائب
لمربع الإدخال.
لذلك يتم تعيين كل هذه السمات.
والأهم من ذلك،
لاحظ استخدام فئة التحكم في النموذج التي يتم تطبيقها على نوع الإدخال.
إذن هذه هي الطريقة التي تقوم بهيكلة هذين العنصرين في النموذج الخاص بك.
لأحجام الشاشة الصغيرة وأدناه، فإنه يكدس الأمرين.
ولكن بالنسبة لمتوسط إلى كبير إضافي،
رأيت أنه يضعهم أفقياً جنباً إلى جنب.
وينطبق الشيء نفسه على رمز اسم العائلة أيضًا.
سيكون مشابهًا جدًا لكيفية تنظيم الاسم الأول.
لذلك أود منك أن تنفق قليلا من الوقت في إلقاء نظرة على هذا الرمز أيضا.
بحيث ترون، بناء على فهمك لهذا،
كيف يتم تنسيق هذا أيضا.
النوع التالي من الحدث الرسمي الذي سنضيفه هو عنصر مجموعة الإدخال.
اسمحوا لي أن أضيف في التعليمات البرمجية.
سننظر في ما يتضح أن النموذج.
وبعد ذلك سنعود وفحص الشفرة
حتى هنا، بعد div الثاني، بعد حقل اسم العائلة،
سأقوم بتضمين رمز العنصر التالي هنا.
ثم دعونا حفظ التغييرات.
وبعد ذلك، على الفور،
سترى بضعة أشياء إضافية تضاف إلى النموذج الخاص بك.
تشاهد حقل رقم هاتف تمت إضافته هنا.
هذا، من نظرته، ترى أن هذا مشابه جدا لذلك.
لذلك أنا لن أشرح رمز لهذا.
هذا يجب أن يكون واضحا جدا بالنسبة لك لفهم.
ومن ثم يجب أن يكون حقل البريد الإلكتروني هذا واضحًا جدًا بالنسبة
لك لفهمه.
لأن هذا يبدو مشابهًا جدًا لاسم العائلة.
باستثناء أنه لهذا، حقل الإدخال، سيتم تعيين النوع إلى البريد الإلكتروني.
بحيث يتم
تلقائيا تشغيل قدرات التحقق من النموذج المدمج في المتصفح الخاص بك.
بحيث عندما تكتب شيئًا لا يبدو وكأنه بريد إلكتروني،
فستشتكي بشكل مناسب.
لذلك دعونا نفحص هذا الجزء بالذات من النموذج هنا.
لاحظ أنه في هذه الحالة، نقوم بإضافة الأقواس اليسرى
والقوس الأيمن إلى مربع الإدخال هذا.
إذن كيف تضيف أشياء إلى صندوقك هكذا؟
إلقاء نظرة على التعليمات البرمجية هنا في المحرر الخاص
بك، ترى أنه لا يزال لديك صف مجموعة النموذج الذي تفهمه بالفعل.
وأسفل هنا، لديك نوع عنصر الإدخال telnum معرف عنصر،
وهلم جرا، والتي يجب أن تكون واضحة جدا بالنسبة لك.
لذا لا أعتقد أنني بحاجة لشرح هذا الجزء لك
لاحظ كيف أستخدم فئات عمود الشبكة في Bootstrap لكل من هذه.
لذلك يتم إعطاء التسمية كول-مد-2.
ومن ثم رقم الهاتف الأول يعطى
كول-xs-7 كول-سم-6 و كول-مد-7 هنا.
وبهذه الطريقة، رقم الهاتف، يتم وضع هذا العنصر بشكل صحيح.
ولكن، على وجه الخصوص، دعونا نولي اهتماما لهذا الجزء.
لذلك هذا واحد هنا هو داخل هذا ديف.
حتى داخل هذا div، لاحظ الطبقة المعطاة لها.
الصف يقول المدخلات مجموعة.
وهذا يعني بشكل أساسي أن كل ما هو داخل هذا div سيتم التعامل معه
كمجموعة من العناصر هنا.
لذلك هذا هو السبب في أن الطبقة المعطاة هي مجموعة المدخلات.
الآن، لإضافة شيء من هذا القبيل، سوف تستخدم
فئة تسمى المدخلات مجموعة الملحق.
ثم لاحظ أنني أستخدم div لعقد هذا العنصر.
يمكنني استخدام أي شيء هنا، ولكن div يأتي في متناول اليدين هنا.
لذلك أقول فئة div الإدخال/المجموعة الملحق.
ثم نوع div الإغلاق داخل، حيث،
لاحظ أن لدي الأقواس اليسرى.
لذلك هذا هو ما يسمح لك لإضافة في بعض
الزائدة الإضافية إلى مربع الإدخال الخاص بك هنا.
وبالمثل، فإن واحد أدناه هنا هو أيضا قوس الحق في مجموعة المدخلات - الملحق.
لذلك هذا هو ما يضيف قوس الحق الآخر هنا.
الآن، بين هذين، بالطبع، لديك نوع الإدخال.
المدخلات مع نوع الهاتف والطبقة شكل التحكم، معرف، اسم،
العنصر النائب، كل شيء في مكان هنا.
لذلك هذا ليس سوى جزء رمز المنطقة.
حتى إذا كنت تستخدم هذه المجموعة المدخلات جنبا إلى جنب مع المدخلات مجموعة الإضافات
مثل هذا على أي من الجانبين.
سيتم إضافة هذه الأشياء إلى عنصر الإدخال الخاص بك مثل هذا.
هذا يوفر لك طريقة لطيفة لتصميم النموذج الخاص بك مع بعض المضافة في.
على سبيل المثال، إذا كان لديك حقل يقبل
المال كإدخال، فيمكنك ببساطة إضافة علامة دولار إلى الجانب الأيسر
للإشارة إلى المستخدم إلى أن هذا حقل يأخذ قيمة العملة في الوقت الحالي.
الآن في هذه الحالة، يأخذ هذا الحقل في رمز المنطقة.
وإذا رأيت كيف يتم كتابة رموز المنطقة في الولايات المتحدة
وكندا، فأنت تعرف أنها محاطة داخل قوس اليسار واليمين.
لذلك، هذا ما يسمح لي بتحديد شيء من هذا القبيل في النموذج الخاص بي هناك.
مجموعتي التالية من العناصر التي سأقوم بإضافتها إلى
النموذج الخاص بي هي مربع اختيار واختيار.
لذا، كيف نضيف ذلك؟
لذا، إذا كنت معتادًا على نماذج HTML، فأنت تفهم كيفية عمل التحديد
وتفهم كيفية عمل مربعات الاختيار في نماذج HTML.
الآن، يمنحك Bootstrap بعض
الفئات الإضافية التي تمكنك من تنسيق هذه العناصر بشكل مناسب.
لذلك، اسمحوا لي أن أضيف في الاقتباس.
دعونا حفظ التغييرات.
نلقي نظرة على ما ينتج عن ذلك في النموذج هنا.
ثم ألقِ نظرة على الشفرة
لذلك هنا، ترى أن لدي مربع الاختيار وبعض الرسائل هنا.
ثم هذا هو محدد الذي يسمح لي للاختيار من بين مجموعة من الخيارات هنا.
الآن النموذج كما هو موجود هنا هو ما سترى في
أحجام الشاشة الصغيرة والصغيرة جدا.
دعونا نلقي نظرة على ذلك على حجم شاشة أكبر.
نفس النموذج عند وضعه على
أحجام الشاشة المتوسطة إلى الكبيرة الإضافية سيبدو مثل هذا.
حتى تتمكن من معرفة كيفية وضع رقم هاتف جهة الاتصال هنا،
ويتم وضع البريد الإلكتروني هنا.
لذا لاحظ أن هذه التسميات
تصطف إلى خط في الوسط مع الصناديق هنا.
هذا ما تحققه فئة تسمية نموذج col أولاً.
الآن، دعونا نركز على هذا الذي أضفناه للتو.
هنا، نرى أن لدينا مربع اختيار المضافة في.
وبعد ذلك، حقل نصي هنا.
لذا هل يمكننا الاتصال بك؟
لذلك، على سبيل المثال، تتوقع من المستخدم إما التحقق من ذلك وإيقاف تشغيله.
فما هو سبب مربع الاختيار؟
وبالمثل، يمكن أن يكون لديك أزرار الاختيار.
يدعم Bootstrap أزرار الاختيار المتوفرة في نماذج HTML.
وتوفير بعض الطبقات لتصميمها بشكل صحيح.
ثم هذا هو بالطبع المحدد الذي يسمح لك بالاختيار من بين الخيارات.
حتى العودة والنظر في التعليمات البرمجية.
دعونا نرى كيف يتم تنفيذ ذلك.
العودة لإلقاء نظرة على التعليمات البرمجية، ترى أن هذا واحد هو مرة أخرى نموذج
ديف صف مجموعة هنا الذي يرفق شيئين هنا.
واحد هو نموذج الاختيار
كول-مد-6 إزاحة مد-2.
لذلك هذا هو ما يرفق مربع اختيار داخل هذا العنصر div.
ثم أسفل هنا لدي فئة ديف، كول-مد-3 إزاحة مد-1.
لذلك لاحظ أن هنا، وهذا يقول نموذج الاختيار كول-مد-6 إزاحة مد-2.
السبب في أنني أفعل إزاحة مد-2 هو ليس لدي تسمية.
لذلك كنت عادة استخدام عمودين للتسميات.
لذلك بما أن مربع الاختيار هذا يجب أن محاذاة نفسها إلى الجانب الأيمن في النموذج.
لذلك هذا هو السبب في أنني استخدمت إزاحة مد-2 هنا.
ثم داخل هنا تقول فئة التسمية = «نموذج التحقق من التسمية».
ثم يوفر علامة الإدخال
هنا مع مربع الاختيار نوع.
إذن هذه هي الطريقة التي تقوم بها بإنشاء مربع اختيار.
ثم الفئة، فئة Bootstrap التي ستقوم بتطبيقها على
مربع الاختيار الخاص بك هي إدخال التحقق من النموذج.
ثم يكون الاسم والقيمة الأولية فارغين.
وبعد ذلك، هذا هو التسمية الفعلية التي تراها يتم
تطبيقها على مربع الاختيار هذا هناك.
لذلك لاحظ كيف يتم وضع هذين داخل علامة التسمية هنا.
إذن هذه هي الطريقة التي تقوم بها بإنشاء مربع اختيار مع تصنيفه
ثم ضع ذلك في النموذج الخاص بك هنا.
لذلك هذا هنا يستخدم نموذج الاختيار التسمية.
ثم هنا، يجب أن يكون لديك مربع اختيار، نوع الإدخال = «مربع الاختيار»،
ثم قم بتسمية نفسها.
إذا هنا ترى قوية، هل يمكننا الاتصال بك؟
لهذا السبب يتم عرضه بحروف جريئة بجوار مربع الاختيار هنا.
الآن أدناه في التعليمات البرمجية، لديك فئة div col-md-3 إزاحة md-1.
لذلك هذا يحتل ثلاثة أعمدة داخل عمود واحد إزاحة.
وبالتالي فإن مجموع أربعة أعمدة هنا.
لذلك هذا واحد هو كول-مد-6 زائد 2، وهذا هو ثمانية أعمدة.
حتى 8 زائد 4، 12.
بحيث يعتني بك 12 عمودًا لشبكتك هناك.
الآن داخل هذا، ترى تحديد مطبق هنا.
الآن هذا هو الخيار المحدد الذي يدعم نماذج ملف HTML.
وانظر إلى الفصل المطبق على هذا.
وتقول class = «form-control» إلى التحديد.
ثم تعطي الخيارات في التحديد هنا.
حتى الهاتف. والبريد الإلكتروني وهلم جرا.
لذلك هذه هي الطريقة التي تحدد بها خيارات حقل التحديد الخاص بك في النموذج الخاص بك هنا.
لذلك هذا هو استخدام مربعات التحديد والخيار في النموذج الخاص بك.
وبالمثل، إذا تحققت من وثائق Bootstrap سترى استخدام
أزرار الاختيار وعناصر النموذج الأخرى.
بإلقاء نظرة على
شكلنا، نرى الآن أن لدينا العديد من الأشياء التي نحتاجها في شكلنا بالفعل.
لديك الاسم الأول واسم العائلة
لذلك هذا النموذج هو شيء نقوم ببنائه لتمكين المستخدمين من
تقديم ردود الفعل إلى المطعم.
حتى هنا لدينا الاسم الأول واسم
العائلة ورقم هاتف الاتصال ثم رسالة بريد إلكتروني.
وبعد ذلك بالطبع،
خيار للسماح للمستخدم لمعرفة ما إذا كان يمكن الاتصال بها أم لا.
بحيث يتم تنفيذ ذلك باستخدام مربع اختيار ومحدد هنا.
الآن، الشيء الوحيد المتبقي هو زر الإرسال بالنسبة لنا.
لذلك سنضيف زر إرسال إلى هذا النموذج
ثم نلقي نظرة نهائية على النموذج.
قبل أن نضيف زر إرسال، ربما نريد توفير مربع
للمستخدمين لكتابة ملاحظاتهم.
لذلك في هذه الحالة، سأستفيد من منطقة النص لتوفير ذلك.
لذلك اسمحوا لي لصق في التعليمات البرمجية.
وبعد ذلك سنراجع الرمز هنا
لذا فإن هذا الرمز، كما ترى،
div class = «صف form-group» الذي تعرف بالفعل ما يعنيه.
ثم هذا هو التسمية التي كنت تعرف بالفعل كيف يتم بناؤها.
وأسفل ذلك، ترى علامة textarea المستخدمة للنموذج.
لذلك يقول، فئة textarea، مع class = «form-control»،
والتي رأيتها بالفعل من قبل.
ثم معرف واسم ثم عدد الصفوف
لمنطقة النص التي يتم تحديدها هنا.
لذلك، دعونا حفظ التغييرات ونلقي نظرة على النموذج.
إذا إلقاء نظرة على النموذج، ترى أنه جنبا إلى جنب مع هذا، أسفل هنا،
لديك مربع نص كبير يمكن أن يكتب تعليقات التعليقات من قبل المستخدم.
لذا فإن النموذج الخاص بك يحتوي على الاسم الأول، واسم العائلة، ورقم الهاتف
، والبريد الإلكتروني، وموافقة على الاتصال بالمستخدم، ثم مربع ملاحظات.
آخر شيء سيكون زر إرسال.
وأخيرا، دعونا إضافة في زر إرسال إلى النموذج.
حتى بعد ديف، في منطقة النص،
وأنا ذاهب للصق في التعليمات البرمجية للزر إرسال هنا.
لذلك لصق في التعليمات البرمجية للزر إرسال مرة أخرى، والنظر في التعليمات البرمجية، ترى
أن هذا هو فئة ديف = «فورم-غروب الصف» >، والتي كنت تعرف بالفعل من قبل.
ثم هذا يقول، فئة ديف = «أوفسيت-مد-2 كول-مد-10">.
أنت تفهم ما هو ذلك
وبعد ذلك، داخل هذا div، ترى زر يتم تضمينه هنا.
الآن بما أننا رأينا بناء زر باستخدام علامة،
دعونا نولي اهتماما لكيفية بناء زر باستخدام علامة HTML زر.
لذلك إذا كنت تستخدم علامة HTML الزر، فأنت تقول الزر
ثم يتم إرسال النوع.
هذا سيكون بمثابة زر إرسال للنموذج الخاص بي، لذلك
السبب قلت أن النوع هو الإرسال.
قمت بتعيين نوع إلى زر، وسوف يكون بمثابة زر عادي هنا.
ثم إلى هذا أقول، زر الصف، زر الابتدائي.
لذلك هذا هو زر أزرق اللون ثم
يحتوي الزر على هذا النص داخل الزر لإرسال نص الملاحظات داخل الزر.
لذلك دعونا حفظ التغييرات.
لذلك سيكون هذا هو التعديل الأخير على النموذج الخاص بي هنا.
لذلك دعونا حفظ التغييرات ومن ثم الذهاب وإلقاء نظرة على الزر.
بالعودة إلى المتصفح، ترى الآن أنه في النموذج الخاص بك أدناه،
لديك زر إرسال ملاحظات.
لذلك عندما يملأ المستخدم النموذج،
سينقر على زر إرسال ملاحظات لإرسال التعليقات إلى الشركة.
لذلك هذا يكمل تصميم النموذج.
لذلك هذا هو واحد من هذه الأشكال التي يمكنك تضمينها.
هناك العديد من الفئات الأخرى المتوفرة في Bootstrap
لدعم النماذج.
أود أن أحثكم بشدة على استشارة وثائق
النموذج لرؤية الأنواع الأخرى من الفئات المتوفرة لبناء الافتراضي.
لذلك إذا كان لديك من الناحية المفاهيمية في عقلك نموذجًا تريد إنشاءه،
فأنت تبحث فقط عن جميع العناصر المحتملة المختلفة التي تريد تضمينها
في النموذج، ثم قم بتصميم النموذج وفقًا لذلك.
الشيء الأكثر أهمية الذي لاحظته في إنشاء النموذج باستخدام Bootstrap،
هو جميع فئات Bootstrap المتوفرة.
عنصر تحكم النموذج، مجموعة النماذج، كيفية استخدام فئات الصف والعمود.
وكل هذه الفئات المختلفة التي يتم دعمها
في Bootstrap لتصميم النماذج، فيلم Bootstrap.
آخر مجموعة، قم بالالتزام git، لذلك، سنقوم بإحضار صفحة git.
أنا ذاهب للتعليق على التغييرات التي قمت بها على حول،
كونتاكتوس والفهرس.
ثم قل أزرار
وأشكال Bootstrap، ومن ثم كان ذلك قد
ارتكب مستودع git الخاص بي.
مع هذا، نكمل هذا التمرين.
هنا تعلمنا كيف نقوم بتضمين الأزرار
وعناصر الشكل في الملعب تصميم Bootstrap الخاص بنا.
[ موسيقى]