ما هو bootstrap؟
Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
تاريخ
تم تطوير Bootstrap بواسطة Mark Otto من Twitter و Jacob Thornton. Bootstrap هو منتج مفتوح المصدر صدر على Github في أغسطس 2011.
محتويات حزمة bootstrap
الهيكل الأساسي: يوفر Bootstrap بنية أساسية مع نظام الشبكة وأسلوب الارتباط والخلفية. سيتم شرح ذلك بالتفصيل في قسم الهيكل الأساسي bootstrap.
CSS: يأتي Bootstrap مع الميزات التالية: إعدادات CSS العالمية ، تعريف أنماط العناصر HTML الأساسية ، فئة قابلة للتمديد ، ونظام الشبكة المتقدمة. سيتم شرح ذلك بالتفصيل في قسم Bootstrap CSS.
المكونات: يحتوي Bootstrap على أكثر من عشرة مكونات قابلة لإعادة الاستخدام لإنشاء الصور ، والقوائم المنسدلة ، والملاحة ، وصناديق التحذير ، وصناديق منبثقة ، وأكثر من ذلك. سيتم شرح ذلك بالتفصيل في قسم مكونات التصميم.
المكون الإضافي JavaScript: يحتوي Bootstrap على أكثر من عشرة مكونات مكونة من jQuery مخصص. يمكنك تضمين جميع الإضافات مباشرة أو واحدة تلو الأخرى. سيتم شرح ذلك بالتفصيل في قسم المكونات الإضافية.
التخصيص: يمكنك تخصيص مكونات bootstrap ، والمتغيرات الأقل ، والمكونات الإضافية JQuery للحصول على نسختك الخاصة.
يقدم هذا الفصل كيفية عرض بيانات نموذج في نموذج النموذج بعد إنشاء نموذج (عادة ما يستخدم لتحرير الصفحات)
الكود كما يلي (عنوان الاتصال: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ربط البيانات </title> <meta name = "viewport" content "=" width = device-width ، inial-scale = 1 " rel = "STYLESHEET" href = "../ css/site.css"> <script src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <! src = "../ scripts/global.js"> </script> <!-البرنامج المساعد-> <script src = "../ scripts/plugin.js"> </script> </head> <body> <body> <div> <div> <blabe> ربط البيانات </label> <div> Action = "#" id = "formContainer"> </pump> </viv> <viv> <viv> <blable> مقدمة </label> </viv> <viv> <blable> مقدمة </label> </div> <viv> <h3> ربط بيانات النموذج </h3> <blockquote> <p> ربط نموذج نموذج JSON ، باستخدام بيانات نموذج المحاكاة هنا. في البيئة الفعلية ، يجب أن تتفاعل مع الخادم للحصول على البيانات. في كائن التكوين ، مطلوب طريقة رد الاتصال. يمكن إجراء بعض العمليات الأخرى للنموذج في طريقة الإرجاع ، مثل إضافة التحقق من النماذج وإضافة دعم المكون الإضافي للتاريخ ===== </p> <p> ملاحظة: يكون مصدر بيانات مربع الاختيار في نموذج صفيف </p> </blockquote> </div> <script> $ () اسم المستخدم: '} ، ele: {type:' text '، name:' username '، title:' username: '، required: true}} ، {ele: {type:' radio '، nam E: 'Sex' ، العنوان: "الجنس: '، العناصر: [{text:' male '، value: 1} ، {text:' female '، value: 2}]}} ، {ele: {type:' checkbox '، الاسم: "المصنع" ، العنوان: "باستخدام النظام الأساسي:" ، العناصر: [{text: 'app' ، value: 'app'} ، {text: 'web' ، value: 'web'}]}}} ] ، [{eLe: {type: 'select' ، name: 'Province' ، title: 'Province:' ، withnull: true ، items: [{text: 'guangdong' ، value: 'gd'} ، {text: 'hunan' ، value: 'hn'}}} ، type = "radio"> '} ، اكتب:' text '، الاسم:' DisplayName '، العنوان: "العرض اسم:'}} ، {ele: {type: 'search' ، title: 'product" ، id:' productname '}}] ، [{ele: {type: "dateTime" ، name: "fromedate" الفترة: '}} ، {eLe: {type:' dateTime '، الاسم:' TODATE '، العنوان:'}} ،] '1،3'}) Model = {PrimaryKey: 1 ، اسم المستخدم: 'xxg' ، الجنس: 1 ، النبات: ['app' ، 'web'] ، المقاطعة: 'gd' ، displayname: 'test' ، productName: 'noteB Ook '، FromEdate:' 2015-06-10 '، Toodate:' 2015-08-08 '} ؛ bf.initformdata (model) ؛}) ؛ $ ("#btnsubmit"). bind (' click '، function () {var postdata = bsform.getformdata () ؛ Alert ("بيانات التعبير التي تم الحصول عليها هي:"+json.stringify (postdata)) ؛})}) ؛ </script> </body> </html>هنا ، يتم إنشاء نموذج من نوع JSON باستخدام JS. في التطوير الفعلي ، سوف تتفاعل مع الخادم للحصول على نموذج. يتم عرض النموذج في النموذج من خلال طريقة initFormData في المكون الإضافي النموذج.
العروض كما يلي:
يتم عرض البيانات المحددة بنجاح في النموذج
ملاحظة: في حالة اختيارات متعددة لخانات الاختيار ، ما يجب إرجاعه هو صفيف
ما ورد أعلاه هو الوصف الكامل لربط البيانات لصفحة تحرير النماذج Smart Smart Smart Series Smart Series (VI) التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!