English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل أساسي Bootstrap

إضافات Bootstrap

نماذج Bootstrap

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

تصميم النموذج

Bootstrap يقدم الأنماط التالية من تصميم النموذج:

  • نموذج عمودي (الافتراضي)

  • نموذج داخلي

  • النماذج الأفقية

نموذج عمودي أو نموذج أساسي

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

  • أضف إلى العنصر الأب <form>. role="form".

  • ضع العلامة والنموذج في class يحتويها .form-group في <div> الخاص بك. هذا ضروري للحصول على المسافة الأمثل.

  • أضف class ="" إلى جميع العناصر النصية <input>، <textarea> و <select>.form-control".

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - نموذج أساسي</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">الاسم</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="ادخل الاسم">
	</div>
	<div　class="form-group">
		<label for="inputfile">ملف المدخل</label>
		<input type="file" id="inputfile">
		<p class="help-block">هذا مثال على نص مساعد مستدير.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> قم بوضع علامة
		</label>
	</div>
	<button type="submit" class="btn btn-default">إرسال</button>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

نموذج داخلي

إذا كنت بحاجة إلى إنشاء نموذج يحتوي جميع عناصره على ترتيب داخلي، وتكون العناصر موازية، وأيضاً العلامات موازية، فأضف class إلى علامة <form>. .form-inline.

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - نموذج نموذج داخلي</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" role="form">
	<div　class="form-group">
		<label class="sr-only" for="name">الاسم</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="ادخل الاسم">
	</div>
	<div　class="form-group">
		<label class="sr-only" for="inputfile">ملف المدخل</label>
		<input type="file" id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> قم بوضع علامة
		</label>
	</div>
	<button type="submit" class="btn btn-default">إرسال</button>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

  • بافتراض، لدى input،select و textarea في Bootstrap عرض 100%. عند استخدام النماذج المدمجة، يجب عليك إعداد عرض عنصر النموذج.

  • استخدام class .sr-only، يمكنك إخفاء علامات النماذج المدمجة.

النماذج الأفقية

النماذج الأفقية تختلف ليس فقط في عدد العلامات، بل في شكل العرض أيضًا. إذا كنت ترغب في إنشاء نموذج أفقي، فاتبع الخطوات التالية:

  • إضافة class إلى العنصر الأب <form>. .form-horizontal.

  • ضع العلامة والنموذج في class يحتويها .form-group في <div>.

  • إضافة class إلى العنوان .control-label.

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - نموذج أفقي</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label for="firstname" class="col-sm-2 control-label">الأسم الأول</label>
		<div　class="col-sm-10">
			<input type="text" class="form-control" id="firstname">　
				　　　placeholder="أدخل الأسم الأول">
		</div>
	</div>
	<div　class="form-group">
		<label for="lastname" class="col-sm-2 control-label">الأسم الأخير</label>
		<div　class="col-sm-10">
			<input type="text" class="form-control" id="lastname">　
				　　　placeholder="أدخل الأسم الأخير">
		</div>
	</div>
	<div　class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> تذكرني
				</label>
			</div>
		</div>
	</div>
	<div　class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">تسجيل الدخول</button>
		</div>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

العناصر الشائعة للنماذج المدعومة

Bootstrap يدعم أكثر العناصر الشائعة للنماذج، وهي input،textarea،checkbox،radio و select.

حقل الإدخال

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：أكثر الحقول النصية في النماذج شعبية هي المدخل input. يمكن للمستخدمين إدخال معظم البيانات المطلوبة في النموذج. Bootstrap يقدم دعمًا لكافة أنواع المدخلات الأصلية لـ HTML5، بما في ذلك: }} و text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telاللون type البيان هو ضروري، حتى يمكن input للحصول على النمط الكامل.

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - المدخل</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">العلامة</label>
		<input type="text" class="form-control" placeholder="إدخال النص">
	</div>
　</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

نص框 (Textarea)

عندما تحتاج إلى إدخال متعدد السطور، يمكنك استخدام نص框 textarea. يمكن تغييرها حسب الحاجة. rows الخصائص (عدد الأطراف القليل = الصندوق الصغير، عدد الأطراف الكثير = الصندوق الكبير).

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - النص框</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">نص框</label>
		<textarea class="form-control" rows="3"></textarea>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

المربعات المختارة (Checkbox) والمحاور (Radio)

المربعات المختارة والمحاور تستخدم لتوجيه المستخدمين إلى اختيار خيار من قائمة من الخيارات المسبقة.

  • عند إنشاء نموذج، إذا كنت ترغب في السماح للمستخدمين باختيار عدة خيارات من القائمة، استخدم checkboxإذا كنت تريد تحديد أن المستخدم يمكنه اختيار خيار واحد فقط، استخدم radio.

  • استخدمهم مع سلسلة من المربعات المختارة والمحاور .checkbox-inline أو .radio-inline class،تحكم في عرضهم في نفس الصف.

السلسلة التالية توضح هذان النوعان (المبدئي والضمني):

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - المربع والمحور</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">مثال على المربع المبدئي والمحور المبدئي</label>
<div class="checkbox">
	<label><input type="checkbox" value="">خيار 1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">خيار 2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> خيار 1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> خيار 2 - اختره لإلغاء اختيار خيار 1
	</label>
</div>
<label for="name">مثال على مربعات الاختيار والنقاط المدمجة</label>
<div>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox1" value="option1"> خيار 1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox2" value="option2"> خيار 2
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox3" value="option3"> خيار 3
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> خيار 1
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> خيار 2
	</label>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

مربعات الاختيار (Select)

عندما تريد أن يختار المستخدمون من عدة خيارات، ولكن يمكنهم اختيار خيار واحد فقط افتراضيًا، استخدم مربع الاختيار.

  • استخدام <select> لعرض خيارات القائمة، عادة ما تكون القوائم التي يفهمها المستخدمون جيدًا، مثل الولايات أو الأرقام.

  • استخدام multiple="multiple" يسمح للمستخدمين باختيار عدة خيارات.

في هذا المثال، يتم عرض هذين النوعين (select و multiple):

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>مثال Bootstrap - قائمة اختيار</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">اختيار القائمة</label>
		<select　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label for="name">قائمة اختيار متعددة</label>
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

تحكمات ثابتة

عندما تحتاج إلى وضع نص نظيف بعد علامة التحكم في نموذج أفقي، استخدم class في <p>. .form-control-static.

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>مثال Bootstrap - تحكمات ثابتة</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label class="col-sm-2 control-label">البريد الإلكتروني</label>
		<div　class="col-sm-10">
			<p class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div　class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">كلمة المرور</label>
		<div　class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword">　
				　　　placeholder="ادخل كلمة المرور">
		</div>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

حالة تحكم النموذج

باستثناء :focus حالة (أيضًا، عندما يضغط المستخدم على input أو يستخدم مفتاح tab للتركيز على input)، يحدد Bootstrap أيضًا أنماطًا لحقول الإدخال المحظورة ويقدم classes للتحقق بالاستمارة.

تركيز حقل الإدخال

عندما يتلقى حقل الإدخال input :focus عندما يكون هناك، سيتم إزالة هالة حقل الإدخال وتطبيق box-shadow.

حقل الإدخال المحظور input

إذا كنت ترغب في تعطيل حقل إدخال input، فما عليك سوى إضافة ببساطة disabled ، مما سيحظر أيضًا حقل الإدخال وسيغير نمط حقل الإدخال وأيضًا نمط مؤشر الفأرة عند وضع المؤشر على العنصر.

مجموعة الحقول المحظورة fieldset

إضافة خاصية disabled إلى <fieldset> لتعطيل جميع التحكم داخل <fieldset>.

حالة التحقق

يحتوي Bootstrap على أنماط التحقق للخطأ، التحذير والنجاح. يكفي إضافة class المناسبة إلى العنصر الأم ببساطة (.has-warning، .has-error أو .has-success() يمكن استخدام حالة التحقق.

النموذج التوضيحي التالي يظهر جميع حالات التحكم:

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - حالة التحكم في النماذج</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　class="col-sm-2　control-label">تركيز</label>
		<div　class="col-sm-10">
			<input　class="form-control"　id="focusedInput"　type="text"　value="يحصل هذا النص على التركيز...">
		</div>
	</div>
	<div　class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			معطل
		</label>
		<div　class="col-sm-10">
			<input　class="form-control"　id="disabledInput"　type="text"　placeholder="يمنع إدخال هذا النص..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div　class="form-group">
			<label　for="disabledTextInput"　class="col-sm-2　control-label">منع الإدخال (مجموعة الحقول معطل)
			</label>
			<div　class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　placeholder="منع الإدخال">
			</div>
		</div>
		<div　class="form-group">
			<label　for="disabledSelect"　class="col-sm-2　control-label">منع اختيار القائمة (مجموعة الحقول معطل)
			</label>
			<div　class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>منع الاختيار</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div　class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			إدخال ناجح
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div　class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			تحذير في المدخلة
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputWarning">
		</div>
	</div>
	<div　class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			خطأ في المدخلة
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputError">
		</div>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

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

يمكنك استخدام class بشكل منفرد .input-lg و .col-lg-* لإعداد الارتفاع والعرض للنموذج. يوضح المثال التالي هذا الأمر:

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　表单控件大小</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<input　class="form-control　input-lg"　type="text"　placeholder=".input-lg">
	</div>
	<div　class="form-group">
		<input　class="form-control"　type="text"　placeholder="默认输入">
	</div>
	<div　class="form-group">
		<input　class="form-control　input-sm"　type="text"　placeholder=".input-sm">
	</div>
	<div　class="form-group">
	</div>
	<div　class="form-group">
		<select　class="form-control　input-lg">
			<option　value="">.input-lg</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control">
			<option　value="">اختيار افتراضي</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control　input-sm">
			<option　value="">.input-sm</option>
		</select>
	</div>
	<div　class="row">
		<div　class="col-lg-2">
			<input　type="text"　class="form-control"　placeholder=".col-lg-2">
		</div>
		<div　class="col-lg-3">
			<input　type="text"　class="form-control"　placeholder=".col-lg-3">
		</div>
		<div　class="col-lg-4">
			<input　type="text"　class="form-control"　placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

نص المساعدة في النموذج

يمكن لـ Bootstrap عنصر النموذج أن يكون لديه نص مساعد على input. لإنشاء قالب مساعد يأخذ عرضًا كاملًا، استخدم .help-blockالسطر التالي يوضح ذلك:

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap　-　نص المساعدة في النموذج</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<span>مثال النص المساعد</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">نص مساعد طويل، يزيد عن سطر واحد،
		إلى الخط التالي. في هذا المثال، النص الإضافي يحتوي على سطرين.</span>
</form>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

أزرار Bootstrapجداول Bootstrap