ستقدم هذه المقالة مهارات استخدام نماذج bootstrap بشكل أساسي.
1. bootstrap النموذج الأساسي
تتضمن العناصر الشائعة في النماذج بشكل أساسي: مربعات إدخال النص ، وصناديق التحديد المنسدلة ، وأزرار الراديو ، والأزرار ، وحقول النص والأزرار ، إلخ.
دعونا نلقي نظرة أولاً على شكل أساسي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> النماذج الأساسية </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css <form rom = "form"> <viv> <label for = "exampleinputemail1"> البريد الإلكتروني: </label> <input type = "email" id = "exampleInputEmail1" placeholder = "الرجاء إدخال عنوان البريد الإلكتروني الخاص بك"> </div> <div> <blabe> for = <div> <label> <input type = "checkbox"> تذكر كلمة المرور </label> </div> <button type = "submit"> تسجيل الدخول </button> </form> </body> </html>
العروض كما يلي:
يمكننا أيضًا تحقيق تأثيرات مختلفة عن طريق إضافة أسماء فئة مختلفة لتشكيلها. يتم عرض قواعد الشكل المحددة في الجدول التالي:
على سبيل المثال:
<form rob = "form"> ... </form>
2. bootstrap التحكم في شكل
1) إدخال مربع الإدخال
<form rob = "form"> <viv> <!-يجب إضافة نوع النوع. إذا لم يتم تحديد نوع النوع ، فلن يتم الحصول على النمط الصحيح -> <إدخال type = "البريد الإلكتروني" placeholder = "elect elem
2) مربع اختيار الانسحاب حدد
<form rom = "form"> <viv> <!-مربع تحديد المنسدلة من خط واحد-> <select> <potion> 1 </soph> <spoint> 2 </soph> </select> </div> <div> <!-مربع التحديد متعدد الخطوط-> <تحديد mounter> <borting> 1 </point> 2 </expect
3) نص حقل النص
حقل النص هو نفسه طريقة الاستخدام الأصلية ، ويمكن أن تحدد صفوف ضبط ارتفاعه ، ويمكن أن يعيد تعيين Cols عرضه. ولكن إذا تمت إضافة اسم الفئة "Control-Control" إلى عنصر Textarea ، فليس هناك حاجة لتعيين سمة Cols. نظرًا لأن التحكم في نموذج "Control-Control" في إطار Bootstrap هو 100 ٪ أو تلقائي.
<form rom = "form"> <viv> <!-الصفوف = "3" قم بتعيين الارتفاع ثلاثة أسطر-> <textarea rows = "3"> </sevidea> </viv> </form>
4) مربع الاختيار
الترتيب الرأسي:
<form rob = "form"> <viv> <label> <input type = "checkbox" value = ""> checkbox </label> </viv> </pump>
الترتيب الأفقي:
<form rob rob = "form"> <iv> <label> <input type = "checkbox" value = "option1"> check1 </billy> <label> <input type = "checkbox" value = "option2">
5) راديو محدد واحد
الترتيب الرأسي:
<form rob = "form"> <viv> <label> <input type = "radio" name = "خي خيارات" id = "choiceRadios1" value = "love" value = "Hate"> b </billy> </viv> </part>
الترتيب الأفقي:
<form rob rob = "form"> <viv> <blabel> <input type = "radio" value = "option1" name = "sex"> a </billy> <label> <input type = "radio" value = "option2" name = "sex"
ملاحظة: يتم وضع مربع الاختيار والتسمية في حاوية تسمى ".Checkbox" ؛ يتم وضع الراديو والتسمية في حاوية تسمى ".radio".
3. حالة التحكم في شكل bootstrap
1) حالة التركيز
يتم تحقيق حالة التركيز عن طريق إضافة تحكم نموذج اسم الفصل إلى الإدخال. تحذف حالة التركيز للتحكم في النموذج في إطار BootStrap النمط الافتراضي للمخطط التفصيلي ويضيف تأثير الظل مرة أخرى.
<!-النموذج الأفقي يحقق تأثير النموذج الأفقي-> <form rob = "form"> <viv> <viv> <input type = "text" placeholder = "focus status"> </viv> </viv> </map>
2) تعطيل الحالة
فقط أضف "معطل" إلى التحكم في النموذج الذي يجب تعطيله:
<إدخال type = "text" placeholder = "تم تعطيل النموذج ، لا يمكن إدخاله" تعطيل "
3) حالة التحقق
للتحقق من النموذج ، تحتاج أيضًا إلى توفير نمط حالة التحقق. يتم توفير هذه الآثار أيضًا في bootstrap:
عند استخدامه ، تحتاج فقط إلى إضافة اسم فئة الحالة المقابلة لحاوية مجموعة النماذج.
<form rom = "form"> <viv> <label for = "inputWarning1"> حالة التحذير </label> <input type = "text" id = "inputWarning1" placeholder = "realning status"> </viv> <div> <sistr status </inputerror1> erract </label> <suption type = لـ = "inputsuccess1"
العروض كما يلي:
إذا كنت تريد أن يعرض النموذج أيقونة في الحالة المقابلة ، فأنت بحاجة فقط إلى إضافة اسم الفصل "HAS-Feedback" في الحالة المقابلة (يجب أن يكون اسم الفئة هذا مصحوبًا بـ "Has-error" و "wars-warning" و "has-success").
4.BOOTSTRAP FORT-BUTER
1) أزرار النمط المخصص
<button type = "button"> زر أساسي </button> <button type = "button"> الزر الافتراضي </button> <button type = "button"> زر رئيسي </button> <button type = "button> button convers
العروض كما يلي:
2) زر bootstrap يدعم ملصقات متعددة ، والأزرار التي تصنعها الملصقات الأخرى هي كما يلي:
<button type = "button"> زر علامة الزر </button> <إدخال type = "إرسال" value = "زر الإدخال"/> <span> زر العلامة span </span> <div> زر العلامة div </div> <a href = "##"> زر علامة </a>
3) حجم الزر
التحكم في حجم الزر عن طريق إلحاق اسم الفئة إلى الزر الأساسي ".btn".
<button type = "button"> زر عادي </button> <button type = "button"> زر كبير </button> <button type = "button"> زر صغير </button>
4) زر الحظر (أكثر استخدامًا على محطات الهاتف المحمول)
زر الحظر: يملأ عرض الزر حاوية الأصل بأكملها (العرض: 100 ٪) ولن يكون لها أي قيم حشوة وهامش.
يوفر Bootstrap اسم الفصل "BTN-Block". يمكن للزر استخدام اسم الفئة هذا لتنفيذ زر كتلة (للحصول على التفاصيل ، يرجى الرجوع إلى سطر ملف bootstrap.css 2340 إلى السطر 2353)
<button type = "button"> زر كبير </button> <button type = "button"> زر عادي </button> <button type = "button"> زر صغير </button>
العروض كما يلي:
5. bootstrap حالة النموذج الزر
في bootstrap ، يتم تقسيم تأثيرات حالة الأزرار بشكل أساسي إلى نوعين: الحالة النشطة والدولة المعوقة.
1) الحالة النشطة: تتضمن بشكل رئيسي عدة أنواع من حالة تعليق الأزرار (:: تحوم) ، انقر فوق الحالة (: نشطة) وحالة التركيز (: التركيز).
2) تعطيل الحالة
هناك طريقتان لتعطيل الزر:
الطريقة 1: إضافة سمة تعطيل في العلامة
الطريقة 2: إضافة اسم الفئة "معطل" إلى تسمية العنصر
الاختلافات الرئيسية بين الاثنين هي:
لا يحظر نمط ".disabled" السلوك الافتراضي للزر. يمكن أن تحظر طريقة إضافة السمة "المعطلة" إلى تسمية العنصر السلوك الافتراضي للعنصر.
6.Bootstrap صورة
في bootstrap ، يتم توفير الأنماط التالية لأسلوب الصور:
كيفية الاستخدام: فقط أضف اسم الفئة المقابلة إلى علامة IMG ، على النحو التالي:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143225"> img src = "http://img.blog.csdn.net/20160726151432225">
تأثير التشغيل كما يلي أو عرض نافذة النتيجة على اليمين:
7. أيقونة bootstrap
يوفر Bootstrap 200 رمز مختلف ، على النحو التالي:
كيفية الاستخدام: فقط أضف اسم فئة الرمز المقابل إلى العلامة ، على النحو التالي:
<span> </span>
<span> </span>
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
سلسلة من المقالات:
في المرة الأولى التي أتصل بها مع التخطيط الأساسي bootstrap السحري //www.vevb.com/article/89278.htm
في المرة الأولى التي تلامس فيها مع نظام شبكة bootstrap السحرية //www.vevb.com/article/89333.htm
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.