Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
عند مراجعة خلفيتي الخاصة ، استخدمت bootstrap في التصميم العام ، ولم يكن هناك سبب لعدم استخدام جزء النموذج المتبقي. لتجميل وتخطيط النموذج ، يعد Bootstrap جيدًا جدًا أيضًا ، مع الحدود الجوية ، وأزرار متعددة الوظائف ، وتخطيط النماذج الماكرو ، كل شيء كامل ومثالي!
شكل عادي
نحتاج إلى لف عناصر النماذج في فئة مجموعة النماذج ، والتي يتم تخزينها عمومًا في <div> ... </div> ، ويتم وضع محتوى اسم عنصر النموذج عمومًا في تسمية التسمية ، واسم فئة التسمية الإدخال هو التحكم في النماذج. تجدر الإشارة إلى أن مربع الاختيار والعناصر الراديوية يجب أن تكتب في Div الخاص بك.
على سبيل المثال ، النموذج التالي
<Porm> <viv> <label for = "exampleInputEmail1"> عنوان البريد الإلكتروني </label> <input type = "email" id = "exampleInputEmail1" poncalder = "email"> </viv> <viv> <label for = "exampleppassword1> بالنسبة إلى = "exampleinputfile"> إدخال الملف </label> <إدخال type = "password" id = "exampleppasspassword1" placeholder = "password"> </viv> <div> <label for = "exampleinputfile> file inpil تحقق مني </label> </div> <button type = "subfer"
تأثير بعد الجري
نموذج الانبعاث الأفقي
إذا كانت عناصر النموذج الخاصة بك تحتاج إلى تفريغ أفقيًا ، فيمكنك إضافة class.form-Inline إلى النموذج. هذا النموذج عمومًا أكثر ملاءمة عندما يكون هناك عدد أقل من العناصر.
على سبيل المثال
<Porm> <viv> <label for = "exampleinputemail3"> عنوان البريد الإلكتروني </label> <input type = "email" id = "exampleInputEmail3" poncalder = "email"> </div> <viv> <label for = "exampleppassword3" type = "checkbox"> تذكرني </label> </div> <button type = "submit"> تسجيل الدخول </button> </form>
شكل عادي + عنصر الانبعاث الأفقي
هذا النموذج هو الأكثر استخداما. عندما يسجل المستخدمون العاديون وملء المعلومات ، يمكنهم في كثير من الأحيان رؤية تأثيرات النموذج التالية.
يستخدم تنفيذ هذا النموذج فئة .form أفقي ، ويتم لف كل صف من العناصر في <div> ... </div>
form> <viv> <label for = "inpectEmail3"> البريد الإلكتروني </label> <viv> <input type = "email" id = "inputeMail3" placeholder = "email"> </viv> </viv> <viv> <label for = "inpoppassword3"> password </label> <div> <type type = "checkbox"> تذكرني </label> </div> </viv> </viv> </viv> <viv> <viv> <div> <button type = "submit"> تسجيل الدخول </button> </viv> </viv> </viv> </form>
يمكننا أيضًا أن نرى من خلال الكود أنه عند القيام بتخطيط النماذج ، يمكنك أيضًا استخدام Col-SM و Col-SM لتخطيط الشبكة !
ما سبق هو تحليل شامل لنموذج نموذج bootstrap الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!