اسمحوا لي أن أريكم العروض أولا. إذا كنت تشعر أنه جيد جدًا ، فيرجى الاستمرار في الرجوع إلى أفكار التنفيذ للحصول على شرح مفصل.
تَخطِيط
1. نصف كل من اليسار واليمين (Col-MD-6)
2. تمثل صندوق تسجيل الدخول الأيسر لنصف الجانب الأيسر
3. على اليمين هي الاحتياطات لتسجيل الدخول إلى النظام
عناصر HTML المستخدمة
حسنًا
مجموعة الإدخال
زر (BTN-SUCCESS)
رمز HTML
<div style = "margin-top: 30px ؛"> <div style = "border-right: 1px solid #ddd ؛"> <viv> <h3> تسجيل الدخول إلى المستخدم </h3> <viv> <span id = "size-addon1"> <i aria-hidden = "true" aria-descripedby = "size-addon1"> </viv> <viv> <span id = "size-addon1"> <i> </i> </span> <inputive type = "password" placeholder = "password" aria describedby = "zize-addon1"> </div المعلم <type type = "radio" name = "kind" value = "stu"> الطالب </div> <button type = "submin"> تسجيل الدخول </button> </viv> <viv> <h3> مرحبًا بك في استخدام نظام إدارة الواجب المنزلي للطلاب </h3> <ul> <li> يستخدم الطلاب رقم الطالب </em> لتسجيل الدخول. يرجى تعديل كلمة المرور في الوقت المناسب بعد تسجيل الدخول. يرجى استخدام رقم العمل </em> لتسجيل الدخول. كلمة المرور الأولية هي <em> 6 1 </em>. يرجى تعديل كلمة المرور في الوقت المناسب بعد تسجيل الدخول. </li> </ul> </viv> </viv>
رمز CSS
.input-group {margin: 10px 0px ؛ // الهوامش العلوية والسفلية من مربع الإدخال هي 10px ، واليسار واليمين هما 0px} h3 {padding: 5px ؛ border-bottom: 1px solid #ddd ؛ الهوامش العلوية والسفلية هي 10px} em {// لون النمط المعتمد: #c7254e ؛ على غرار الخط: الوراثة ؛ خلفية اللون: #f9f2f4 ؛}ما سبق هو ما قدمه لك المحرر لاستخدام Bootstrap لتنفيذ واجهة المستخدم واجهة تسجيل الدخول إلى المستخدم. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!