استمارة
الشكل الأساسي
بالنسبة للإدخال ، textarea ، وحدد في النموذج ، عادةً ما أضيف الفئة "مراقبة النماذج" ، والتي تحدد العرض الافتراضي للعنصر إلى 100 ٪ (ليس مطلقًا ، مثل النموذج المضمون المذكور أدناه). وسيتم إضافة كل عنصر (بما في ذلك التسمية والعنصر المراد إدخاله) مع "مجموعة النماذج". لديها نمط واحد فقط. هامش القاع: 15 بكسل.
<form action = ""> <viv> <label for = ""> اسم المستخدم: </label> <input type = "text"/> </viv> <viv> <label for = "> password: </bally> <inputive type =" password "/> </fire> </form>
شكل مضمّن
عن طريق إضافة "Form-Inline" إلى العنصر الخارجي (العنصر الأصل لمجموعة النموذج). يشير إلى أن جميع عناصر النماذج يتم عرضها على سطر واحد (مع عرض كاف). و ".form-inline .form-group" يتم عرضها على أنها كتلة مضمنة. وعرض ".form-inline .form-control" هو تلقائي. هذا يضمن عرضه في سطر واحد.
<form action = ""> <viv> <label for = ""> اسم المستخدم: </label> <input type = "text"/> </viv> <viv> <label for = "> password: </bally> <inputive type =" password "/> </fire> </form>
شكل أفقي
على عكس النماذج العادية والمضمنة. إذا كنت ترغب في عرض عناصر النماذج وتسمية الإدخال على سطر واحد ، فأنت بحاجة إلى استخدام "Form Liperizontal". هذا النوع من "مجموعة الشكل" المشتركة يعادل "صف" في نظام الشبكة. لذا فإن فئاتها الفرعية لها "col-md-*" ، و "عنوان التحكم" للعلامة-". إذا لم تضيف هذا ، فسيبدو أن التسمية والإدخال غير متوافقين.
<form action = ""> <viv> <label for = "> username: </sivel> <viv> <input type =" text "/> </viv> <viv> <viv> <label for ="> password: <sial> <div> <input type = "password"/> </fiv> </form>
حجم الشكل
تلك التي تتحكم في حجم الإدخال هي "إدخال SM" و "Input-LG" ، مما يجعل مربع الإدخال يبدو أصغر أو أكبر من المعتاد. المقابل لهذا هو حجم النص في الملصق. تحتاج إلى إضافة "Form-Group-SM" و "Form-Group-LG" إلى "مجموعة Form-Group" في نفس الوقت. كما هو الحال في مربع إدخال كلمة المرور للعروض التوضيحية أعلاه.
مربع الإدخال
في HTML5 ، يدعم النوع في علامة مربع الإدخال المزيد من الأنواع. هناك نص ، كلمة مرور ، Datatime ، Datatime-Local ، التاريخ ، الشهر ، الوقت ، الأسبوع ، الرقم ، البريد الإلكتروني ، URL ، البحث ، Tel و Color. لا يمكن عرض النمط الصحيح إلا على التسمية <prope> إذا تم تعيين نوع معين. يمكن أن تظهر بعض العناصر آثارها على هاتفك فقط.
مربع المنسدلة حدد
على غرار مربع الإدخال. لقد غيرت فقط الإدخال لتحديد وإضافة فئة "السيطرة على النماذج".
<form action = ""> <viv> <label for = "" الرجاء تحديد: </label> <viv> <select name = "" id = ""> <option value = "" value = ""> nodejs </soph> </select> </viv> </mapp>
col-md-pull-* هو الإزاحة اليسرى.
حقل النص
على غرار ما سبق.
<form action = ""> <viv> <label for = ""> textarea: </billy> <viv> <textarea name = "" id = "" rows = "3"
مربعات متعددة وراديو
من أجل جعل عناصر الراديو ومربعات الاختيار تظهر في صف واحد وتتوافق مع الملصق. يقدم Bootstrap خيارين. واحد:
<viv> <label for = ""> <input type = "radio" name = "sex"/> male <type type = "radio" name = "sex"/> female <type type = "radio" name = "sex"/> سرية </label> <label> <binced> <input type = "checkbox"/> html <input type = "checkbox"
التسمية نفسها هي كتلة مضمنة. ولكن .radio ،. checkbox نفسه محظور.
لذا ، قم بلف علامات راديو متعددة أو اختبارات مع ملصق واحد ، والذي سيظهر غير مهني (هاها). أيضا ، كثيرون أيضا قبيحة للغاية. لذلك ، فإن الطريقة الثانية للكتابة هنا.
<div> <label for = ""> <input type = "radio" name = "sex"/> male </bally> <label for = ""> <input type = "radio" name = "sex"/> female </label> <label> <"" لـ = ""> <input type = "checkbox"/> css </billy> <label for = ""> <input type = "checkbox"/> javaScript </label> </viv>
التحقق من النموذج
هو النجاح: النجاح ، الأخضر.
هرب: تحذير ، أصفر.
HAS-ERROR: خطأ ، أحمر.
فقط أضف النمط المقابل إلى "مجموعة النماذج". لتحسين التحقق ، يمكننا الاستمرار في إضافة "has-feedback". ثم أضف "ربح حدود النماذج" إلى مستوى العنصر بعد الإدخال ("السيطرة على النماذج"). الدلالات واضحة وواضحة. الرمز كما يلي:
<form action = ""> <viv> <label for = "> اسم المستخدم: </label> <div> <div> <supe type =" text "/> <span> </span> </viv> </viv> <viv> <label for =" " type = "text"/> <span> </span> </span> </mapp>
زر
نمط متعدد الزر وأزرار
هناك العديد من أنماط الأزرار في bootstrap. يمكن أن يصبح الزر ، A ، المدخلات ، المدى ، Div ، إلخ أزرارًا طالما أنه "على طراز BTN BTN". ومع ذلك ، من أجل توافق أفضل وسهولة القراءة ، من الأفضل عدم استخدام هذه الطريقة ، حاول استخدام علامات الأزرار.
زر <button> الزر </button> <button> زر </button> <button> زر </button> <button> زر </button> <button> زر </button> <button> زر </button> <!-BTN-Block يجعل الزر حصريًا إلى واحد إلى واحد Row-> <button> زر </button> <button> زر </button> <button> زر </button> <button> زر </button> زر </button> <button> زر </button> <button> زر </buttan> <buttan> زر </button> زر </button> </button> </button>
حجم الزر
كما ذكر أعلاه ، استخدم "BTN-XS" ، "BTN-SM" ، "BTN-LG" لتعيين حجم الزر.
حالة الزر
كما ذكر أعلاه ، فإن تلك الفعالة "نشطة" و "التركيز".
صورة
IMG مستجيب: صور مستجيبة ، تهدف بشكل رئيسي إلى التصميم المستجيب.
IMG-Rounded: زوايا مستديرة.
IMG-Circle: جولة.
Img-Thumbnail: Thumbnail ، ممثلة على حد ما تضاف إلى الطبقة الخارجية.
رمز
يحتوي BootStart على العديد من الرموز الصغيرة المدمجة. طريقة الاستخدام هي كما يلي. في الواقع ، تم استخدامه في "الارتجاع" للسيطرة على النماذج أعلاه. من بينهم ، "glyphicon" أمر لا بد منه.
<span> </span>
مجموعة مربع الإدخال
مجموعة مربع الإدخال هي "مجموعة إدخال". نحتاج إلى إضافة بعض اللواحق (مثل لاحقة البريد الإلكتروني) والبادئات (رموز المال ￥ ، $ ، وما إلى ذلك) لاستخدام "مجموعة الإدخال-Addon" أو "مجموعة الإدخال-BTN". دلالات بسيطة وواضحة. على النحو التالي:
<!-مربع البريد الإلكتروني-> <viv> <input type = "text" /><span>@gmail.com</span></div><! type = "text"/> </div> <!-الاختيار متعدد-> <viv> <span> <input type = "checkbox"/> </span> <input type = "text"/> </viv> <!-Taobao inport box group-> <viv> <div> <button-toggle = "spultdown"> href = "javaScript: void (0)"> baby </a> </li> <li> <a href = "javaScript: void (0)"> Shop </a> </li></ul> </viv> <type type = "text"/>
ملخص
"الشكل الأفقي" و "Form-Inline" هما كل من الملصقات الخارجية لمجموعة النماذج.
تأخذ مجموعة النماذج "مجموعة النماذج" كعنصر الأصل. المماثلة هي "مجموعة الإدخال" و "مجموعة الأزرار" التي يمكن استخدامها في المستقبل. يمكن أن تكون جميعها بحجم.
"Form-Group-LG" ، "INPUT-LG" ، "Prop-Group-LG" ، "BTN-LG" ، إلخ.
أسلوب التحقق له "HAR-BERROR" ، "Has-Success" ، "Has-Warning". يمكن إضافة "has-feedback" إلى نفس العنصر. من أجل جعل التحقق أكثر اكتمالا.
هناك العديد من الأنماط للأزرار والأحجام يمكن ضبطها.
أربعة أنماط شائعة للصور.
BootStarp لديه العديد من الرموز المدمجة.
تبدأ مجموعة مربع الإدخال بـ "مجموعة الإدخال" ، وتشمل العناصر الفرعية "مجموعة الإدخال-Addon" ، "الإدخال-مجموعة BTN" ، إلخ.
ما ورد أعلاه عبارة عن مجموعة كاملة من النماذج في bootstrap التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!