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

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

نموذج مخصص في Bootstrap4

　　 Bootstrap4 يمكنه تخصيص بعض أنماط النماذج لتستبدل الأنماط الافتراضية لمتصفح الويب.

مربعات الاختيار المخصصة

إذا كنت ترغب في تخصيص مربع الاختيار، يمكنك تعيين <div> كعنصر الأب، والفئة .custom-control و .custom-checkbox، وضع مربع الاختيار كعنصر فرعي داخل هذا <div>، ثم ضبط مربع الاختيار لتكون type="checkbox"، الفئة <custom-control-input>.

يستخدم نص مربعات الاختيار label العلامة، والعلامة تستخدم الفئة <custom-control-label>،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>إذا كنت ترغب في تخصيص مربع اختيار، يمكنك إعداد <div> كعنصر الأب، الفئة <custom-control> و<custom-checkbox>، وضع مربع الاختيار كعنصر فرعي داخل هذا <div>، ثم إعداد مربع الاختيار على <type="checkbox">، الفئة <custom-control-input>.</p>
　　<p>يستخدم نص مربعات الاختيار علامة <label>، والعلامة تستخدم الفئة <custom-control-label>، والخاصية <for> من <label> يجب أن تتطابق مع <id> مربعات الاختيار.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-checkbox mb-3">
　　　　　　<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
　　　　　　<label class="custom-control-label" for="customCheck">مربعات الاختيار المخصصة</label>
　　　　</div>
　　　　<input type="checkbox" id="defaultCheck" name="example2">
　　　　<label for="defaultCheck">مربعات الاختيار الافتراضية</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

تخصيص مربع الاختيار

إذا كنت ترغب في تخصيص مربع اختيار، يمكنك إعداد <div> كعنصر الأب، الفئة <.custom-control> و<.custom-radio>، وضع مربع الاختيار كعنصر فرعي داخل هذا <div> داخل، ثم إعداد مربع الاختيار على type="radio"، الفئة <custom-control-input>.

نص مربع الاختيار يستخدم label العلامة، والعلامة تستخدم الفئة <custom-control-label>،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>إذا كنت ترغب في تخصيص مربع اختيار، يمكنك إعداد <div> كعنصر الأب، والفئة <custom-control> و<custom-radio>، وضع مربع الاختيار كعنصر فرعي داخل هذا <div>، ثم إعداد مربع الاختيار على <type="radio">، الفئة <custom-control-input>.</p>
　　<p>يستخدم النص الموجود في المربع المحدد لـ label، والفئة .custom-control-label للـ label، ويتعين أن يكون قيمة الخاصية for لـ label متطابقة مع خاصية id للمربع المحدد.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-radio">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio">مربع اختيار مخصص</label>
　　　　</div>　　　　
　　　　<input type="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">مربع اختيار افتراضي</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

عرض العناصر المخصصة في نفس الصف

يمكننا استخدام الفئة .custom-control-inline في العنصر الخارجي لتغليف عنصر النموذج المخصص، وبالتالي يمكن عرض عناصر النموذج المخصص في نفس الصف:

مثال 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>يمكننا استخدام الفئة .custom-control-inline في العنصر الخارجي لتغليف عنصر النموذج المخصص، وبالتالي يمكن عرض عناصر النموذج المخصص في نفس الصف:</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio1">مربع اختيار مخصص 1</label>
　　　　</div>
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label class="custom-control-label" for="customRadio2">مربع اختيار مخصص 2</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

قائمة اختيار مخصصة

يمكن إنشاء قائمة اختيار مخصصة في <select> على العنصر إضافة الفئة .custom-select:

مثال 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>إنشاء قائمة اختيار مخصصة يمكن القيام بذلك عن طريق إضافة صفتي .custom-select إلى عنصر select:</p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>قائمة اختيار مخصصة</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

إذا أردنا تعيين حجم قائمة الاختيار المخصصة، يمكننا استخدام .custom-select-sm و .custom-select-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">
　　<h2>حجم قائمة الاختيار المخصصة</h2>
　　<p>إذا أردنا تعيين حجم قائمة الاختيار المخصصة، يمكننا استخدام .custom-select-sm و .custom-select-lg لتعيين حجمها:</p>
　　<form>
　　　　<!-- صغير -->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>قائمة اختيار مخصصة صغيرة</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!-- كبير -->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>قائمة اختيار مخصصة كبيرة</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

التحكم في السحب المخصص

يمكننا الصفة 　لـ type="range" إضافة صفتي .custom-range إلى نافذة التدخل لتعيين التحكم في السحب المخصص:

مثال 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>يمكننا إضافة صفتي .custom-range إلى نافذة التدخل من نوع type="range" لتعيين التحكم في السحب المخصص:</p>
　　<form action="/action_page.php">
　　　　<label for="customRange">التحكم في السحب المخصص</label>
　　　　<input type="range" class="custom-range" id="customRange" name="points1">
　　　　<label for="defaultRange">التحكم في السحب الافتراضي</label>
　　　　<input type="range" id="defaultRange" name="points2">
　　　　<p><button type="submit" class="btn btn-primary">إرسال</button></p>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

عنصر تحميل ملف مخصص

نحن يمكن أن نضيف صفة .custom-file إلى العنصر الأب، .custom-file ثم في 　الصفة قم بتعيين type="file" واضف .custom-file-input:،

نص عنصر تحميل الملف يستخدم label العلامة، والعلامة تستخدم صفة .custom-file-label،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>نحن يمكن أن نضيف صفة .custom-file إلى العنصر الأب، ثم نضيف type="file" إلى input ونضيف .custom-control-label:</p>
　　<form action="/action_page.php">
　　　　<p>نمط التحميل المخصص للملف:</p>
　　　　<div class="custom-file mb-3">
　　　　　　<input type="file" class="custom-file-input" id="customFile" name="filename">
　　　　　　<label class="custom-file-label" for="customFile">اختر ملف</label>
　　　　</div>
　　　　
　　　　<p>نمط التحميل الافتراضي للملف:</p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">إرسال</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

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