اكتشف كيف يمكنك استخدام أحدث ميزات Bootstrap ، بما في ذلك تفاصيل التغييرات الكبيرة في عناصر التحكم في النموذج.
يعد Bootstrap إطارًا شائعًا للواجهة الأمامية أحدث ثورة في تطوير الويب. مع أحدث إصدار له ، Bootstrap 5.3.0 ، قدم إطار العمل ثروة من الميزات الجديدة المثيرة والتحسينات التي تمكّنك من إنشاء مواقع وتطبيقات مذهلة وسريعة الاستجابة وغنية بالميزات.
تبديل الوضع الداكن
من الجدير بالملاحظة إضافات Bootstrap 5.3.0 هو تبديل ل الوضع المظلم. يتيح هذا التبديل لمستخدمي موقع الويب الخاص بك التبديل بسهولة بين أوضاع الإضاءة والظلام ، مما يسهل الاستخدام السلس لموقع الويب أو التطبيق الخاص بك عبر ظروف الإضاءة المختلفة.
لاستخدام هذه الميزة ، ما عليك سوى إضافة data-bs-toggle = "الوضع المظلم" السمة إلى أي زر أو عنصر ارتباط.
هذا مثال:
<زريكتب="زر"فصل="btn-basic"تبديل البيانات bs="الوضع المظلم">
تبديل الوضع الداكن
زر>أدوات قياس الخط
يقدم Bootstrap 5.3.0 مجموعة من الأدوات المساعدة لمقياس الخط التي تسمح لك بضبط حجم النص بسرعة بناءً على مقاييس محددة مسبقًا ، دون الحاجة إلى ذلك اختر قيم خط محددة بنفسك.
يمكنك استخدام هذه الأدوات المساعدة جنبًا إلى جنب مع فئات طباعة Bootstrap الأخرى لتحقيق طباعة قابلة للتطوير ومتسقة عبر موقع الويب أو التطبيق الخاص بك.
فيما يلي بعض الأمثلة عن كيفية استخدام أدوات قياس الخط:
<صفصل="fs-1">هذا هو أكبر حجم للخطص>
<صفصل="fs-2">هذا حجم خط أصغر قليلاًص>
<صفصل="fs-3">هذا حجم خط متوسطص>
<صفصل="fs-4">هذا حجم خط صغيرص>
<صفصل="fs-5">هذا هو أصغر حجم للخطص>المرافق المزراب
إضافة جديدة أخرى في Bootstrap 5.3.0 هي إدخال أدوات الحضيض. تسهل هذه الأدوات المساعدة إضافة المزاريب بين الأعمدة في تخطيط شبكة Bootstrap دون الحاجة إلى كتابة CSS مخصص.
فيما يلي مثال لكيفية استخدام أدوات الحضيض:
<شعبةفصل="صف gx-3">
<شعبةفصل="عمود">العمود 1شعبة>
<شعبةفصل="عمود">العمود 2شعبة>
شعبة>يستخدم هذا المثال الامتداد جي اكس -3 فئة لإضافة مزراب من 3 وحدات (أو 1.5 ريم) بين العمودين.
ضوابط النموذج المحدثة
ال ضوابط النموذج في Bootstrap تم تحديثها في الإصدار 5.3.0 لتحسين الاتساق وسهولة الاستخدام. تتضمن عناصر تحكم النموذج الجديدة أنماطًا محدثة لمربعات الاختيار وأزرار الاختيار ومربعات التحديد ، بالإضافة إلى تعليقات محسنة للتحقق من الصحة.
مربعات الاختيار وأزرار الراديو
يقدم Bootstrap 5.3.0 أنماطًا جديدة لمربعات الاختيار وأزرار الاختيار التي تجعلها أسهل في الاستخدام ويمكن الوصول إليها بشكل أكبر. يتميز التصميم الجديد بمناطق إصابة أكبر ومؤشرات تركيز محسنة ، مما يسهل عليك التفاعل مع هذه المدخلات.
فيما يلي مثال لكيفية استخدام أنماط مربعات الاختيار الجديدة:
<شعبةفصل="التحقق من النموذج">
<مدخلفصل="إدخال التحقق من النموذج"يكتب="مربع الاختيار"قيمة=""بطاقة تعريف="check1">
<ملصقفصل="تسمية التحقق من النموذج"ل="check1">مربع الاختيار الافتراضيملصق>
شعبة>وإليك مثال على كيفية استخدام أنماط زر الاختيار الجديدة:
<شعبةفصل="التحقق من النموذج">
<مدخلفصل="إدخال التحقق من النموذج"يكتب="مذياع"اسم="exampleRadios"بطاقة تعريف="راديو 1"قيمة="الخيار 1">
<ملصقفصل="تسمية التحقق من النموذج"ل="راديو 1"> الخيار 1 ملصق>
شعبة>لاحظ كيف يستخدم هذا الترميز الامتداد .form-check-input class لتصميم عنصر الإدخال نفسه ، و .form-check-label فئة لأسلوب التسمية.
حدد المربعات
تم أيضًا تحديث مربعات التحديد في Bootstrap 5.3.0 بأنماط جديدة لتحسين التناسق وسهولة الاستخدام. تتميز أنماط مربعات التحديد الجديدة بمناطق إصابة أكبر ومؤشرات تركيز محسنة ، مما يسهل عليك التفاعل مع هذه المدخلات.
فيما يلي مثال لكيفية استخدام أنماط مربعات التحديد الجديدة:
<يختارفصل="نموذج التحديد"أريا التسمية="نموذج التحديد الافتراضي">
<خيارالمحدد>افتح قائمة التحديد هذهخيار>
<خيارقيمة="1">واحدخيار>
<خيارقيمة="2">اثنينخيار>
<خيارقيمة="3">ثلاثةخيار>
يختار>لاحظ كيف يمكنك استخدام ملف .form-select class لتصميم مربع التحديد نفسه.
ملاحظات التحقق من الصحة
يقدم Bootstrap 5.3.0 أيضًا أنماطًا جديدة لملاحظات التحقق من الصحة لعناصر تحكم النموذج. تسهل هذه الأنماط تقديم ملاحظات مرئية لمستخدمي موقع الويب الخاص بك عندما يملأون نموذجًا بشكل غير صحيح.
فيما يلي مثال لكيفية استخدام أنماط التحقق الجديدة:
<شعبةفصل="يشكل مجموعه">
<ملصقل="exampleInputPassword1">كلمة المرورملصق>
<مدخليكتب="كلمة المرور"فصل="التحكم في النموذج غير صالح"بطاقة تعريف="exampleInputPassword1"نائب="كلمة المرور"مطلوب>
<شعبةفصل="تعليقات غير صالحة"> الرجاء إدخال كلمة مرور صالحة. شعبة>
شعبة>لاحظ كيف أن ملف .غير صالح class تشير إلى أن حقل الإدخال غير صالح ، و .invalid-feedback يعرض الفصل رسالة إلى المستخدم.
باستخدام هذه الأنماط الجديدة ، أصبح إنشاء نماذج يسهل الوصول إليها ومتسقة لموقعك على الويب أو تطبيقك أسهل من أي وقت مضى.
تحسينات مثيرة في Bootstrap 5.3.0
يعد Bootstrap 5.3.0 تحديثًا مهمًا لإطار عمل CSS الشهير الذي يقدم العديد من الميزات والتحسينات الجديدة إلى الجدول. من الوضع المظلم للتبديل إلى الأدوات المساعدة لمقياس الخط وأدوات الحضيض ، هناك الكثير من الأدوات الجديدة تحت تصرفك لمساعدتك في إنشاء مواقع وتطبيقات أفضل.
