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

دليل أساسي لـ Bootstrap

إضافات Bootstrap

أدوات مفيدة مناسبة للرد الفوري Bootstrap

يقدم Bootstrap بعض الصفات المساعدة لتحقيق تطوير أكثر سرعة لمنتجات متوافقة مع الأجهزة المحمولة. يمكن استخدامها مع الاستعلامات الإعلامية للجمع بين الأجهزة الكبيرة والصغيرة والمتوسطة، لتحقيق عرض وتخفيض المحتوى بناءً على الجهاز.

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


الشاشة المصغرة
الهاتف المحمول (<768px)		الشاشة الصغيرة
الشاشة اللوحية (≥768px)		الشاشة المتوسطة
الشاشة المكتبية (≥992px)		الشاشة الكبيرة
الشاشة المكتبية (≥1200px)
.visible-xs-*مرئيمخفيمخفيمخفي
.visible-sm-*مخفيمرئيمخفيمخفي
.visible-md-*مخفيمخفيمرئيمخفي
.visible-lg-*مخفيمخفيمخفيمرئي
.hidden-xsمخفيمرئيمرئيمرئي
.hidden-smمرئيمخفيمرئيمرئي
.hidden-mdمرئيمرئيمخفيمرئي
.hidden-lgمرئيمرئيمرئيمخفي

من إصدار v3.2.0، الصفات التي تأخذ شكل .visible-*-* لكل حجم شاشة تحتوي على ثلاثة أنواع، كل منها يتعلق بصفة display المختلفة في CSS، والجدول التالي يوضح ذلك:

مجموعات الصفاتCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

لذلك، لنأخذ مثالًا على الشاشة المصغرة (xs)، الصفات المتاحة هي: .visible-xs-block،.visible-xs-inline و .visible-xs-inline-block.

صفات .visible-xs،.visible-sm،.visible-md و .visible-lg موجودة أيضًا. ولكن من إصدار v3.2.0 لا يُنصح باستخدامها. باستثناء الحالات الخاصة لـ <table> فإنها مشابهة لصفات .visible-*-block بشكل عام.

صفات الطباعة

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

الصفةالمتصفحالمطبع
.visible-print-block
.visible-print-inline
.visible-print-inline-block		مخفيمرئي
.hidden-printمرئيمخفي

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

في هذا المثال، يتم عرض استخدام المساعدات المذكورة أعلاه. قم بتغيير حجم نافذة المتصفح أو تحميل المثال على الأجهزة المختلفة لاختبار أدوات التفاعلية المناسبة للعرض.

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

<!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　class="container"　style="padding:　40px;">
	<div　class="row　visible-on">
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-xs">صغيرة جدًا</span>
			<span　class="visible-xs">✔　في الأجهزة الصغيرة جدًا مرئي</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-sm">صغيرة</span>
			<span　class="visible-sm">✔　في الأجهزة الصغيرة مرئي</span>
		</div>
		<div　class="clearfix　visible-xs"></div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span　class="hidden-md">متوسطة</span>
			<span　class="visible-md">✔　في الأجهزة المتوسطة مرئي</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="background-color:　#dedef8;box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
			<span class="hidden-lg">كبير</span>
			<span class="visible-lg">✔ مرئي في الأجهزة الكبيرة</span>
		</div>
	</div>
</div>
</body>
</html>
اختبار لمعرفة ‹/›

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

علامة التحقق (✔) يُمثل العنصر الذي يظهر في نطاق الرؤية الحالي.

أيقونات النصBootstrap (Glyphicons)كلاسيكيات Bootstrap