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

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

إضافة Bootstrap

شريط التقدم في Bootstrap

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

يستخدم Bootstrap خطوط التقدمية CSS3 التحويلات والرسوم المتحركة للحصول على هذا التأثير. لا يدعم Internet Explorer 9 وأقدم وأقدم إصدارات Firefox هذه الخاصية، ولا يدعم Opera 12 الرسوم المتحركة.

خطوة تقدمية افتراضية

خطوات إنشاء خطوة تقدمية أساسية كالتالي:

  • أضف<div> يحتوي على الفئة .progress ، وأضف<div> يحتوي على الفئة

  • ثم،في <div> العلوي،أضف<div> يحتوي على الفئة .progress-bar 空的 <div>。

  • أضف خاصية style يحتوي على نسبة مئوية لعرض العرض، مثل style="width: 60%"؛ مما يعني أن خطوة التقدمية تقع في 60% من المكان.

لنلقي نظرة على المثال التالي:

مثال على الخط

<!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="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60"
		　aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
		<span　class="sr-only">40%　الإنجاز</span>
	</div>
</div>
</body>
</html>
اختبار النظر في ‹/›

النتيجة كما يظهر أدناه:

خطوة تقدمية متناوبة

خطوات إنشاء خطوة تقدمية بتصميمات مختلفة كالتالي:

  • أضف<div> يحتوي على الفئة .progress ، وأضف<div> يحتوي على الفئة

  • ثم،في <div> العلوي،أضف<div> يحتوي على الفئة .progress-bar و الفئة progress-bar-* 空的<div>، حيث يمكن أن يكون * success،info،warning،danger.

  • أضف خاصية style تحتوي على نسبة عرض، مثل style="60%"؛ مما يعني أن خطوة التقدم تكون في موقع 60%.

لنلقي نظرة على المثال التالي:

مثال على الخط

<!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="progress">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 90%;">
		<span class="sr-only">90% مكتملة (نجاح)</span>
	</div>
</div>
<div　class="progress">
	<div　class="progress-bar　progress-bar-info"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　30%;">
		<span　class="sr-only">30%　الإنجاز (المعلومات)</span>
	</div>
</div>
<div　class="progress">
	<div　class="progress-bar　progress-bar-warning"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 20%;">
		<span class="sr-only">20% اكتمال (تحذير)</span>
	</div>
</div>
<div　class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 10%;">
		<span class="sr-only">10% مكتملة (مخاطرة)</span>
	</div>
</div>
</body>
</html>
اختبار النظر في ‹/›

النتيجة كما يظهر أدناه:

خطوة تقدمية条纹ية

خطوات إنشاء خطوة تقدمية条纹ية كالتالي:

  • أضف<div> يحتوي على الفئة .progress و .progress-striped ، وأضف<div> يحتوي على الفئة

  • ثم،في <div> العلوي،أضف<div> يحتوي على الفئة .progress-bar و الفئة progress-bar-* 空的<div>، حيث يمكن أن يكون * success،info،warning،danger.

  • أضف خاصية style تحتوي على نسبة عرض، مثل style="60%"؛ مما يعني أن خطوة التقدم تكون في موقع 60%.

لنلقي نظرة على المثال التالي:

مثال على الخط

<!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="progress progress-striped">
　　　　<div　class="progress-bar　progress-bar-success"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width: 90%;">
　　　　　　　　<span class="sr-only">90% مكتملة (نجاح)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div　class="progress-bar　progress-bar-info"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width:　30%;">
　　　　　　　　<span　class="sr-only">30%　الإنجاز (المعلومات)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div　class="progress-bar　progress-bar-warning"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width: 20%;">
　　　　　　　　<span class="sr-only">20% اكتمال (تحذير)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress-bar progress-bar-danger" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width: 10%;">
　　　　　　　　<span class="sr-only">10% مكتملة (مخاطرة)</span>
　　　　</div>
</div>
</body>
</html>
اختبار النظر في ‹/›

النتيجة كما يظهر أدناه:

خطوة تقدمية مفعمة بالحركة

خطوات إنشاء خطوة تقدمية مفعمة بالحركة كالتالي:

  • أضف<div> يحتوي على الفئة .progress و .progress-striped ، وأضف الفئة .active.

  • ثم،في <div> العلوي،أضف<div> يحتوي على الفئة .progress-bar 空的 <div>。

  • أضف خاصية style تحتوي على نسبة عرض، مثل style="60%"؛ مما يعني أن خطوة التقدم تكون في موقع 60%.

سيجعل الخطوط تشعر بالحركة من اليمين إلى اليسار.

لنلقي نظرة على المثال التالي:

مثال على الخط

<!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="progress　progress-striped　active">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　40%;">
		<span　class="sr-only">40%　الإنجاز</span>
	</div>
</div>
</body>
</html>
اختبار النظر في ‹/›

النتيجة كما يظهر أدناه:

خطوات تقدم مكدسة

يمكنك حتى كدسة عدة خطوات تقدم. ضع عدة خطوات تقدم في نفس .progress يمكنك تحقيق الكدسة بسهولة، كما هو موضح في المثال التالي:

مثال على الخط

<!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="progress">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　40%;">
		<span　class="sr-only">40%　الإنجاز</span>
	</div>
	<div　class="progress-bar　progress-bar-info"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　30%;">
		<span　class="sr-only">30%　الإنجاز (المعلومات)</span>
	</div>
	<div　class="progress-bar　progress-bar-warning"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 20%;">
		<span class="sr-only">20% اكتمال (تحذير)</span>
	</div>
</div>
</body>
</html>
اختبار النظر في ‹/›

النتيجة كما يظهر أدناه:

عناصر وسائط في Bootstrapالتحذيرات في Bootstrap