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

مجموعة النص Bootstrap4 النموذج Bootstrap4

عناصر النموذج Bootstrap4

Bootstrap4 يدعم عناصر النموذج التالية:

input
textarea
checkbox
radio
select

Bootstrap Input

Bootstrap يدعم جميع أنواع إدخالات HTML5: النص، كلمة المرور، datetime، datetime-local، date، month، time، week، number, البريد الإلكتروني، عنوان URL، البحث، الهاتف، وألوان.

ملاحظةً: إذا لم يتم إعلان خاصية type لـ input بشكل صحيح، فإن نمط مربع الإدخال لن يتم عرضه.

في هذا المثال، يتم استخدام عناصر input اثنتين، واحدة هي text و الأخرى password:

مثال

<!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>عناصر النموذج: input</h2>
　　<p>في هذا المثال، يتم استخدام عناصر input اثنتين، واحدة هي text و الأخرى password:</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="usr">اسم المستخدم:</label>
　　　　　　<input type="text" class="form-control" id="usr">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">كلمة المرور:</label>
　　　　　　<input type="password" class="form-control" id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

Bootstrap textarea

في هذا المثال، يتم عرض نماذج النصوص.

مثال

<!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>عناصر النموذج: textarea</h2>
　　<p>في هذا المثال، يتم عرض نماذج النصوص.</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="comment">تعليق:</label>
　　　　　　<textarea class="form-control" rows="5" id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

Bootstrap اختيار (checkbox)

المربعات المحددة تسمح للمستخدمين باختيار خيار واحد أو أكثر من مجموعة من الخيارات المسبقًا设定的.

المثال التالي يحتوي على ثلاثة خيارات. الأخيرة معطلة:

مثال

<!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>نوع عنصر النموذج: checkbox</h2>
　　<p>المثال التالي يحتوي على ثلاثة خيارات. الأخيرة معطلة:</p>
　　<form>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">خيار 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">خيار 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>خيار 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

استخدام كلاس .form-check-inline يمكن أن يجعل الخيارات تظهر في نفس الصف:

مثال

<!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>نوع عنصر النموذج: checkbox</h2>
　　<p>المثال التالي يحتوي على ثلاثة خيارات. الأخيرة معطلة، باستخدام كلاس .form-check-inline يمكن أن يجعل الخيارات تظهر في نفس الصف:</p>
　　<form>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">خيار 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">خيار 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>خيار 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

Radio 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>نوع عنصر النموذج: radio</h2>
　　<p>المثال التالي يحتوي على ثلاثة خيارات. الأخيرة معطلة:</p>
　　<form>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">خيار 1</label>
　　　　</div>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">خيار 2</label>
　　　　</div>
　　　　<div class="radio disabled">
　　　　　　<label><input type="radio" name="optradio" disabled>خيار 3</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

استخدام كلاس .radio-inline يمكن أن يجعل الخيارات تظهر في نفس الصف:

مثال

<!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>نوع عنصر النموذج: radio</h2>
　　<p>في هذا المثال يحتوي على ثلاثة خيارات. الأخيرة معطلة، يمكن استخدام صيغة .radio-inline لعرض الخيارات في نفس السطر:</p>
　　<form>
　　　　<label class="radio-inline"><input type="radio" name="optradio">خيار 1</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio">خيار 2</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio" disabled>خيار 3</label>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

قائمة منسدلة 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>تعريف التحكم في النموذج: select</h2>
　　<p>النموذج التالي يحتوي على قائمتين تنقل (قائمة تنقل):</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="sel1">قائمة تنقل اختيار واحد:</label>
　　　　　　<select class="form-control" id="sel1">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　</select>
　　　　　　<br>
　　　　　　<label for="sel2">قائمة تنقل متعددة الاختيار (استخدم مفتاح shift لاختيار عدة خيارات):</label>
　　　　　　<select multiple class="form-control" id="sel2">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　　　<option>5</option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

الاختبار أظهر <‹/›

مجموعة النص Bootstrap4 النموذج Bootstrap4