دليل Bootstrap4 الأساسي

نموذج مخصص في Bootstrap4 عناصر النموذج في Bootstrap4

مجموعة النص في Bootstrap4

يمكننا استخدام صيغة .input-group لتضيف المزيد من النمط إلى حقل النموذج، مثل الرموز أو النصوص أو الأزرار.

يمكن استخدام صيغة .input-group-prepend لضيف معلومات نصية في الأمام من حقل النص، .input-group-append يتم تضمينها في الخلف.

في النهاية، سنحتاج أيضًا إلى استخدام صيغة .input-group-text لتعيين نماذج النص.

مثال Bootstrap4

<!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　mt-3">
　　<h2>مجموعة النصوص</h2>
　　<p>استخدام صيغة .input-group .input-group لتضيف المزيد من النمط إلى حقل النموذج، مثل الرموز أو النصوص أو الأزرار، .input-group-prepend يتم تضمينها في الأمام، .input-group-append يتم تضمينها في الخلف.</p>
　　<p>استخدام صيغة .input-group-text لتعيين نماذج النص.</p>
　　
　　<form action="/action_page.php">
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">@</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="اسم المستخدم" id="usr" name="username">
　　　　</div>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="بريد إلكتروني" id="mail" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

تظهر النتيجة التشغيلية كما يلي:

حجم النموذج

استخدم صيغة .input-group-sm لضبط نماذج الإدخال الصغيرة، .input-group-lg لضبط النماذج الكبيرة:

مثال Bootstrap4

<!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　mt-3">
　　<h1>حجم النموذج</h1>
　　<p>استخدم صيغة .input-group-sm لضبط نماذج الإدخال الصغيرة، .input-group-lg لضبط النماذج الكبيرة:</p>
　　<form>
　　　　<div class="input-group mb-3 input-group-sm">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">صغير</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">افتراضي</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3 input-group-lg">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">كبير</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

تظهر النتيجة التشغيلية كما يلي:

عدة نماذج إدخال ونصوص

مثال Bootstrap4

<!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　mt-3">
　　<h2>عدة نماذج إدخال ونصوص</h2>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">شخص</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="اسم الأول">
　　　　　　<input type="text" class="form-control" placeholder="اسم العائلة">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span class="input-group-text">واحد</span>
　　　　　　　　<span class="input-group-text">اثنين</span>
　　　　　　　　<span class="input-group-text">ثلاثة</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

تظهر النتيجة التشغيلية كما يلي:

مربعات الاختيار ومربعات المربع المحدد

يمكن استخدام مربعات الاختيار ومربعات المربع المحدد لتعويض النصوص:

مثال Bootstrap4

<!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　mt-3">
　　<h2>خيارات المربع والمربع المحدد</h2>
　　يمكن استخدام مربعات الاختيار ومربعات التحديد لتعويض معلومات النص:
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

حالة التشغيل بعد الإطلاق كالتالي:

إضافة مجموعة أزرار لحقل الإدخال

مثال Bootstrap4

<!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　mt-3">
　　<h1>إضافة مجموعة أزرار لحقل الإدخال</h1>
　　<div class="input-group mb-3">
　　　　<div　class="input-group-prepend">
　　　　　　<button　class="btn　btn-outline-secondary"　type="button">زر أساسي</button>　　
　　　　</div>
　　　　<input　type="text"　class="form-control"　placeholder="نص ما">
　　</div>
　　<div class="input-group mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="البحث">
　　　　<div class="input-group-append">
　　　　　　<button　class="btn　btn-success"　type="submit">اذهب</button>　　
　　　　　</div>
　　</div>
　　<div class="input-group mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="شيء ذكي...">
　　　　<div class="input-group-append">
　　　　　　<button　class="btn　btn-primary"　type="button">موافق</button>　　
　　　　　　<button　class="btn　btn-danger"　type="button">إلغاء</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

حالة التشغيل بعد الإطلاق كالتالي:

إعداد قائمة التنقل

لا تحتاج إلى استخدام صنف .dropdown للإضافة قائمة تنقل في حقل الإدخال.

مثال Bootstrap4

<!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　mt-3">
　　إعداد قائمة التنقل
　　لا تحتاج إلى استخدام صنف .dropdown للإضافة قائمة تنقل في حقل الإدخال.
　　<form>
　　　　<div　class="input-group　mt-3　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<button　type="button"　class="btn　btn-outline-secondary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　اختر الموقع
　　　　　　　　</button>
　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://ar.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="عنوان الموقع">
　　　　</div>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

حالة التشغيل بعد الإطلاق كالتالي:

بطاقة مجموعة النصوص

لإعداد بطاقة النص يمكن استخدام بطاقة label حول مجموعة النصوص، ويجب أن تتطابق خاصية for بطاقة النص مع id مجموعة النصوص، عند النقر على بطاقة النص يمكن التركيز على نص النصوص:

مثال Bootstrap4

<!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　mt-3">
　　<h2>علامة مجموعة النص</h2>
　　<p>يمكنك تعيين العلامة في مجموعة النص من خلال label في الخارجي للنص، يجب أن يكون خاصية for العلامة مطابقة لـ id مجموعة النص.</p>
　　<p>يمكنك التركيز على حقل النص بعد النقر على العلامة.</p>
　　<form>
　　　　<label for="demo">أدخل بريدك الإلكتروني هنا:</label>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

التحقق من ذلك <‹/›>

حالة التشغيل بعد الإطلاق كالتالي:

نموذج مخصص في Bootstrap4 عناصر النموذج في Bootstrap4