ما هو 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/form1-basic.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> التكوين الأساسي </title> <link rel = "stylesheet" href = "../ css/bootstrap.css src = "../ lib/bootstrap.js"> </script> <!-طرق الأدوات-> <script src = "../ scripts/global.js"> </script> <!-plug-in-> <script src = "../ scripts/plugin.js التكوين </label> </viv> <viv> <form action = "#" id = "formContainer"> </form> </viv> <viv> <blabe> مقدمة </label> </div> <viv> <blabe> مقدمة </label> </viv> <div> <h3> تشمل عناصر النموذج المدعومة: تحديد ، مربع ، Radio ، Dechetim مخصص </h3> </viv> </viv> <script> $ (function () {var eles = [{ele: {type: 'text' ، name: 'username' ، title: 'username:'}} ، [{eLe: {type: 'radio' ، name: 'sex' ، title: 'fense:' ، {{{text: 'male' ، value: {text: 'female' ، value: 2} الاسم: "المصنع" ، العنوان: "منصة المستخدم:" ، العناصر: [{text: 'app' ، value: 'app'} ، {text: 'web' ، value: 'web'}]}} ، ] ، {ele: {type: 'select' ، name: 'Province' ، title: 'Province:' ، withnull: true ، ited: [{text: 'Guangdong' ، value: 'gd'} ، {text: 'Hunan' ، value: 'hn'}}} ، الفترة: '}} ، {eLe: {type:' search '، name:' selectname '، title:' select: '}} ، {ele: {type:' textarea '، name:' address '، title:' add: 'eled:' for '،' الجبهة: '}} ، {ele: {next: {text:' <input type = "radio" /> '} ، type:' text '، name:' next '، title:' efr efr: '}} ، {eLe: {pre: {text: "<input type =" checkbox " />'} ، {text: '} الجبهة والخلف: '}} ،]إنه في الأساس قسم JS التالي ، ويتم إنشاء نموذج النموذج من خلال هذا القسم JS
الجري الاداءات:
احصل على النتائج الموضحة في الشكل
ما سبق هو الوصف الكامل لسلسلة Bootstrap Smart Form (II) التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فالرجاء ترك رسالة لي وسوف يرد المحرر لك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!