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

دليل أساسي لBootstrap

Bootstrap إضافة

مجموعات نماذج إدخال Bootstrap

هذا الفصل سيتناول ميزة أخرى لدعم Bootstrap، مجموعة المدخلات. تمت توسعة مجموعة المدخلات من 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

  • 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。

  • 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。

  • 把该 <span> 放置在 <input> 元素的前面或者后面。

为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div　class="input-group">
			<input　type="text"　class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div　class="input-group">
			<span class="input-group-addon">$</span>
			<input　type="text"　class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

输入框组的大小

您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

下面的示例演示了这点：

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

<!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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div　class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

مكونات الاختيار والتفضيل

يمكنك استخدام مكونات الاختيار والتفضيل كعناصر مقدم أو متأخر لمجموعة النصوص، كما هو موضح في المثال التالي:

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

<!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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

مكون زر

يمكنك أيضًا استخدام الزر كعنصر مقدم أو متأخر لمجموعة النصوص، في هذه الحالة لن تكون إضافة .input-group-addon class، تحتاج إلى استخدام class .input-group-btn للحصول على class، يجب استخدامه 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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							اذهب!
						</button>
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							اذهب!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

زر يحتوي على قائمة تنقل

إضافة زر يحتوي على قائمة تنقل إلى مجموعة النصوص، تحتاج فقط إلى تضمين .input-group-btn يمكنك فقط تضمين الزر والقائمة في 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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							قائمة التنقل　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">وظيفة</a></li>
							<li><a　href="#">وظيفة أخرى</a></li>
							<li><a　href="#">أخرى</a></li>
							<li　class="divider"></li>
							<li><a　href="#">الرابط المنفصل</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							قائمة التنقل　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">وظيفة</a></li>
							<li><a　href="#">وظيفة أخرى</a></li>
							<li><a　href="#">أخرى</a></li>
							<li　class="divider"></li>
							<li><a　href="#">الرابط المنفصل</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

زر قطاع قائمة التنقل

إضافة زر قطاع يحتوي على قائمة تنقل إلى مجموعة النصوص، باستخدام النمط المتشابه مع زر قائمة التنقل، ولكن تم إضافة وظيفة رئيسية إلى قائمة التنقل، كما هو موضح في المثال التالي:

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

<!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>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">قائمة التوسيع
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">تحويل قائمة التوسيع</span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">وظيفة</a></li>
							<li><a　href="#">وظيفة أخرى</a></li>
							<li><a　href="#">أخرى</a></li>
							<li　class="divider"></li>
							<li><a　href="#">الرابط المنفصل</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">قائمة التوسيع
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">تحويل قائمة التوسيع</span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">وظيفة</a></li>
							<li><a　href="#">وظيفة أخرى</a></li>
							<li><a　href="#">أخرى</a></li>
							<li　class="divider"></li>
							<li><a　href="#">الرابط المنفصل</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
الاختبار يرجى النظر في ‹/›

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

عناصر توجيه Bootstrapقائمة منسدلة أزرار Bootstrap