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

أدوات Bootstrap

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

كلاسيكيات Bootstrap

سيتم مناقشة بعض المساعدات الممكنة في Bootstrap في هذا الفصل.

نص

هذه الفئات المختلفة تظهر ألوان نصية مختلفة. إذا كان النص رابطًا، فإنه يتحول إلى اللون الداكن عند تحريك الفأرة فوقه:

الصفة	الوصف	مثال
.text-muted	نمط النص للفئة "text-muted"	جرب الآن
.text-primary	نمط النص للفئة "text-primary"	جرب الآن
.text-success	نمط النص للفئة "text-success"	جرب الآن
.text-info	نمط النص للفئة "text-info"	جرب الآن
.text-warning	نمط النص للفئة "text-warning"	جرب الآن
.text-danger	نمط النص للفئة "text-danger"	جرب الآن

الخلفية

تظهر الفئات المختلفة أدناه ألوانًا خلفية مختلفة. إذا كان النص رابطًا، يتحول إلى اللون الداكن عند مرور الفأرة فوقه:

الصفة	الوصف	مثال
.bg-primary	استخدام خلية الجدول للفئة "bg-primary"	جرب الآن
.bg-success	استخدام خلية الجدول للفئة "bg-success"	جرب الآن
.bg-info	استخدام خلية الجدول للفئة "bg-info"	جرب الآن
.bg-warning	استخدام خلية الجدول للفئة "bg-warning"	جرب الآن
.bg-danger	استخدام خلية الجدول للفئة "bg-danger"	جرب الآن

أخرى

الصفة	الوصف	مثال
.pull-left	تحريك العنصر إلى اليسار	جرب الآن
.pull-right	تحريك العنصر إلى اليمين	جرب الآن
.center-block	تعيين العنصر كـ display:block وعرضه في الوسط	جرب الآن
.clearfix	清除浮动	جرب الآن
.show	إجبار العنصر على الظهور	جرب الآن
.hidden	إجبار العنصر على الإخفاء	جرب الآن
.sr-only	إخفاء العنصر على الأجهزة الأخرى غير مفاتيح الشاشة	جرب الآن
.sr-only-focusable	استخدامها مع .sr-only لتظهر عند حصول العنصر على التركيز (مثل المستخدمين الذين يستخدمون لوحات المفاتيح)	جرب الآن
.text-hide	استبدال محتوى العنصر المضمن في الصورة الخلفية	جرب الآن
.close	عرض زر الإغلاق	جرب الآن
.caret	عرض وظائف التنقل	جرب الآن

مزيد من الأمثلة

أيقونة الإغلاق

استخدام أيقونة الإغلاق العادية لإغلاق النوافذ المنبثقة والرسائل التحذيرية. باستخدام الفئة إغلاق يُحصل على أيقونة الإغلاق.

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

مثال

<!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>
<p>مثال على أيقونة الإغلاق
	<button　type="button"　class="close"　aria-hidden="true">×</button>
</p>
</body>
</html>

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

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

aria-hidden="true" يُساعدُ الأشخاص المعاقين (مثل الذين يعانون من العمى) في استخدام أجهزة التعرف على النصوص (تقرأ المحتوى تلقائيًا وتلعبها تلقائيًا)، ويقفز تلقائيًا إلى المحتوى الذي يحتوي على هذا الخصوصية عند اللعب، لتجنب تشويه الأشخاص المعاقين!

插入符

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

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

مثال

<!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>
<p>插入符示例
	<span class="caret"></span>
</p>
</body>
</html>

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

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

快速浮动

您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的示例演示了这点。

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

مثال

<!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="pull-left">
	向左快速浮动
</div>
<div class="pull-right">
	向右快速浮动
</div>
</body>
</html>

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

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

如需对齐导航栏中的组件，请使用 .navbar-left 或 .navbar-right 代替。请查看 شريط التوجيه Bootstrap。

内容居中

使用 class center-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>
<div class="row">
	<div class="center-block" style="width:200px;background-color:#ccc;">
		这是 center-block 示例
　　　	</div>
</div>
</body>
</html>

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

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

清除浮动

如需清除元素的浮动，请使用 .clearfix 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 class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
	<div class="pull-left" style="background:#58D3F7;">
　　　　　　	向左快速浮动
　　　	</div>
　　　	<div class="pull-right" style="background: #DA81F5;">
　　　　　　	向右快速浮动
　　　	</div>
</div>
</body>
</html>

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

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

显示和隐藏内容

يمكنك القيام بذلك باستخدام class .show 和 .hidden 强制设置元素显示或隐藏（包括屏幕阅读器）。

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

مثال

<!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="row" style="padding: 91px 100px 19px 50px;">
	<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	هذا مثال على class show
　　　	</div>
　　　	<div class="hidden" style="width:200px;background-color:#ccc;">
　　　　　　	هذا مثال على class hide
　　　	</div>
</div>
</body>
</html>

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

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

ماسح الشاشة

يمكنك القيام بذلك باستخدام class .sr-only لإخفاء العناصر من جميع الأجهزة باستثناء ماسح الشاشة.

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

مثال

<!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="row" style="padding: 91px 100px 19px 50px;">
	<form class="form-inline" role="form">
		<div class="form-group">
			<label class="sr-only" for="email">عنوان البريد الإلكتروني</label>
			<input type="email" class="form-control" placeholder="ادخل بريدك الإلكتروني">
		</div>
		<div class="form-group">
			<label class="sr-only" for="pass">كلمة المرور</label>
			<input type="password" class="form-control" placeholder="كلمة المرور">
		</div>
	</form>
</div>
</body>
</html>

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

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

في هذا المكان، نرى أن كل لصاقة نوع إدخال تحتوي على class sr-onlyلذلك، سيكون العنوان مرئياً فقط للمساعدات المسموعة.

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