أدوات عبر الإنترنت

شريط التقدم Bootstrap4

دليل أساسي لـ Bootstrap4

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

يمكن للشريط التقدمي عرض عملية اكتمال المستخدم لعملية.

خطوات إنشاء الشريط التقدمي الأساسي هي كالتالي: إضافة خاصية تحتوي على الـ .progress
ثم، في داخل الـ <div> السابق، أضف <div> يحتوي على كلاس .progress-bar الـ <div> الفارغ.
إضافة خاصية style تحتوي على نسبة مئوية لعرض الشريط التقدمي، مثل style="width:70%" يعني أن عرض الشريط التقدمي هو 70% الموقع.

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>الشريط التقدمي الأساسي</h2>
　　<p>لإنشاء شريط تقدمي افتراضي، يمكنك إضافة كلاس الـ .progress إلى عنصر الحاوية، وإضافة كلاس الـ .progress-bar إلى العنصر الفرعي، وضبط حالة تقدم الشريط التقدمي:</p>
　　<div class="progress">
　　　　<div　class="progress-bar"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

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

الارتفاع الافتراضي للشريط التقدمي هو 16px. يمكننا تعديل الارتفاع باستخدام خاصية الـ height في CSS:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>ارتفاع الشريط التقدمي</h2>
　　<p>الارتفاع الافتراضي للشريط التقدمي هو 16px. يمكننا تعديل الارتفاع باستخدام خاصية الـ height في CSS:</p>　
　　<div　class="progress"　style="height:10px;">
　　　　<div　class="progress-bar"　style="width:40%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:20px;">
　　　　<div　class="progress-bar"　style="width:50%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:30px;">
　　　　<div　class="progress-bar"　style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

عنوان thanh tiến độ النصي

يمكن إضافة نص داخل thanh tiến độ، مثل نسبة التقدم في الخدمة:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>عنوان thanh tiến độ النصي</h2>
　　<div class="progress">
　　　　<div　class="progress-bar"　style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

اللون المتعددة لـ thanh tiến độ

بالتجربة، thanh tiến độ يكون بلون الأزرق، وBootstrap4 يقدم الألوان التالية لـ thanh tiến độ:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>اللون المتعددة لـ thanh tiến độ</h2>
　　<p>Bootstrap4 يقدم الألوان التالية لـ thanh tiến độ:</p>　
　　<div class="progress">
　　　　<div　class="progress-bar"　style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-success"　style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-info"　style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-warning"　style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-danger"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

مسار الخطوط في thanh tiến độ

يمكن استخدام كلاس .progress-bar-striped لتعيين مسار الخطوط في thanh tiến độ:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>مسار الخطوط في thanh tiến độ</h2>
　　<p>يمكن استخدام كلاس .progress-bar-striped لتعيين مسار الخطوط في thanh tiến độ:</p>　
　　<div class="progress">
　　　　<div　class="progress-bar　progress-bar-striped"　style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-success　progress-bar-striped"　style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div　class="progress-bar　bg-info　progress-bar-striped"　style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

شريط نصفي متحرك

يمكن استخدام كلاس .progress-bar-animated لإضافة تأثير الحركة إلى الشريط النصفي:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>شريط نصفي متحرك</h2>
　　<p>يمكن استخدام كلاس .progress-bar-animated لإضافة تأثير الحركة إلى الشريط النصفي：</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

شريط نصفي مختلط

يمكن تعيين ألوان متعددة للشريط النصفي:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>شريط التقدم المزيج من الألوان</h2>
　　<p>يمكن تعيين عدة ألوان لشريط التقدم:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　المساحة الحرة
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　التحذير
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　الخطر
　　　　</div>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

التشطيبات Bootstrap4 النقاط Bootstrap4