دليل تعليمي أساسي لـ Bootstrap4

مكونات نموذج Bootstrap4 توجيه الخبزية Bootstrap4

نموذج Bootstrap4

نماذج التسجيل هي جزء لا يتجزأ من صفحات الويب وأنظمة التطبيقات، ولكن عادة ما يكون إنشاء تصميم نماذج التسجيل أو تعيين نماذج التحكم في النمط يدويًا باستخدام CSS عملية مملة ومكلفة.Bootstrap يسهل عملية النمط والتنسيق لجميع عناصر التحكم في النموذج (مثل العناوين، الحقول النصية، مربعات الاختيار، المناطق النصية، الأزرار إلخ) من خلال مجموعة مسبقة من الفئات.

في هذا الفصل، سنتعلم كيفية استخدام Bootstrap لإنشاء نماذج التسجيل. Bootstrap يمكن أن يخلق نماذج تسجيل مختلفة من خلال بعض العناصر البسيطة لـ HTML والفئات الموسعة.

عناصر النموذج <input>, <textarea>, و عناصر <select> في حالة استخدام فئة .form-control، يتم تعيين العرض دائمًا إلى 100%.

تصميم نماذج التسجيل Bootstrap4

نموذج تسجيل متداخل (عرض كامل الشاشة): اتجاه عمودي
نموذج تسجيل داخلي: اتجاه أفقي

يقدم Bootstrap نوعين من تصميم نماذج التسجيل:

نموذج التسلسل

الامثلة التالية تستخدم نقطتين إدخال، مربع اختيار، ومسحوق تقديم لإنشاء نموذج تسلسلي:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>نموذج التسلسل</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">البريد الإلكتروني:</label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="ادخل البريد الإلكتروني">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">كلمة المرور:</label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="إدخل كلمة المرور">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> تذكرني
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

الاختبار يرجى النقر هنا < › >

النتيجة بعد التشغيل كالتالي:

نموذج داخلي

جميع العناصر في النماذج الداخلية م取向 اليسار.

ملاحظة: سيتم تقديم العناصر بشكل عمودي عند زوال 576px. إذا كان عرض الشاشة أكبر من أو يساوي 576px، سيتم عرض العناصر على نفس الخط الأفقي.

يجب إضافة فئة .form-inline إلى عنصر <form> لإنشاء نموذج داخلي.

في هذا المثال، يتم استخدام نموذجين من المدخلات، مربع اختيار، زر تقديم لإنشاء نموذج داخلي:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>نموذج داخلي</h2>
　　<p>سيتم عرض الشاشة بشكل أفقي عند زوال 576px. إذا كان أقل من 576px، سيتم إنشاء نموذج متدرج.</p>
　　<form class="form-inline">
　　　　<label for="email">البريد الإلكتروني:</label>
　　　　<input type="email" class="form-control" id="email" placeholder="ادخل البريد الإلكتروني">
　　　　<label for="pwd">إدخل كلمة المرور:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="إدخل كلمة المرور">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> تذكرني
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

الاختبار يرجى النقر هنا < › >

النتيجة بعد التشغيل كالتالي:

مكونات نموذج Bootstrap4 توجيه الخبزية Bootstrap4