Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
النقاط الرئيسية للتعلم:
1. الشكل
2. الصور
في هذا الدرس ، نتعرف بشكل أساسي على نماذج bootstrap ووظائف الصورة ، وعرض مختلف التأثيرات الغنية من خلال تعريف CSS المدمج.
واحد. استمارة
يوفر Bootstrap بعض أنماط النماذج الغنية للمطورين لاستخدامها.
1. التنسيق الأساسي
// تنفيذ نمط النموذج الأساسي <Porm> <viv> <label> البريد الإلكتروني </label> <input type = "البريد الإلكتروني" placeholder = "الرجاء إدخال بريدك الإلكتروني"> </div> <viv> <blabe> كلمة المرور </label> <الإدخال type = "password" placeholder = "الرجاء إدخال كلمة المرور"> </div> </form>
ملاحظة: لا يمكن إعطاء النمط الصحيح إلا إذا تم تعيين نوع نوع مربع الإدخال بشكل صحيح. تتضمن عناصر التحكم في مربع الإدخال المدعوم: النص ، كلمة المرور ، وقت البيانات ، DateTime-Local ، التاريخ ، الشهر ، الوقت ، الأسبوع ، الرقم ، البريد الإلكتروني ، URL ، البحث ، Tel و Color.
2. شكل مضمّن
// دع النموذج يترك محاذاة وتطفو ، وتصرف كهيكل كتلة مضمّن على الخط <form>
ملاحظة: عندما يكون أقل من 768 بكسل ، سيتم استعادة النمط الحصري.
3. تشكيل التجميع
// أضف شظايا قبل وبعد <div> <viv> ￥ </viv> <type type = "text"> <viv> .00 </viv> </viv>
4. الترتيب الأفقي
// إبقاء العناصر في النموذج مرتبة أفقيًا <Porm> <viv> <blabe> البريد الإلكتروني </label> <viv> <input type = "email" placeholder = "الرجاء إدخال بريدك الإلكتروني"> </div> </fire> </form>
ملاحظة: يتم استخدام نظام COL-SM Raster هنا ، وستركز الفصول التالية على شرحه ، بينما يمثل التسمية السيطرة على التزامن مع نمط العنصر الأصل.
5. خانات الاختيار وصناديق الراديو
// قم بتعيين مربع الاختيار ، على سطر <div> <label> <label> <input type = "checkbox"> Sports </label> </fire> <viv> <ball> <label> <input type = "checkbox"> music </blize> </fiv> // set in checkbox <div> <label> <input type = "checkbox". type = "checkbox"> sports </bably> <label> <input type = "checkbox" disbated> music </balled> // قم بتعيين مربع الراديو <div> <blabel> <input type = "radio" name = "sex" up upduped> ذكر </label> </div>
6. القائمة المنسدلة
// قم بتعيين القائمة المنسدلة <select> <point> 1 </point> <borting> 2 </Option> <bort> 3 </Option> <borting> 4 </bortion> <borting> 5 </soph> </revelop>
7. تحقق من الحالة
// ضبط على حالة الخطأ <Div>
ملاحظة: هناك حالات أخرى على النحو التالي:
الوصف النمط HAS-error error status has-success success status has warning status // table tag synchronization status presentation <label> input with success </label>
8. أضف أيقونات إضافية
// أيقونة نص مدمجة على الجانب الأيمن من مربع النص <Div> <blabe> البريد الإلكتروني </label> <input type = "email"> <span> </span> </viv>
ملاحظة: بالإضافة إلى Glyphicon-Ok ، هناك العديد من الجداول أدناه:
الوصف النمط Glyphicon-Ok Success Status Glyphicon-warning-sign status حالة خطأ غليفيكون-ريموفي
9. التحكم في الحجم
// من كبير إلى صغير <type type = "password"> <input type = "password"> <input type = "password">
ملاحظة: يمكنك أيضًا تعيين العناصر الأصل على مجموعة Form-Group-LG و Form-Group-SM لضبطها.
اثنين. صورة
يوفر Bootstrap بعض أنماط الصور الغنية للمطورين لاستخدامها.
1. شكل الصورة
// ثلاثة أشكال <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png ">
ما سبق هو المحتوى المتعلق بأشكال bootstrap والصور التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!