الفرق بين المراجعتين لصفحة: «Bootstrap/progress»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:شرائط التقدّم في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:شرائط التقدّم في إطار العمل Bootstrap}}</noinclude> | ||
يأتي إطار العمل Bootstrap مضمَّنًا مبدئيًّا بمكوِّن شرائط تقدّم تدعم تنظيم الشرائط | يأتي إطار العمل Bootstrap مضمَّنًا مبدئيًّا بمكوِّن شرائط تقدّم تدعم تنظيم الشرائط عموديًّا وتحريك الخلفيّات وإضافة لافتات نصيّة. | ||
== | == آلية العمل == | ||
تُبنَى مكوِّنات شرائط التقدّم في إطار العمل Bootstrap باستخدام عنصُريْ | تُبنَى مكوِّنات شرائط التقدّم في إطار العمل Bootstrap باستخدام عنصُريْ [[HTML]]، وأنماط [[CSS]] لتعيين العرض وبضعة خاصيّات. لا يستخدم مكوِّن شرائط التقدّم عنصُر <code>[[HTML/progress|<progress>]]</code> لضمان إمكانيّة تكديس شرائط التقدّم ، وتحريكها ووضع لافتات نصيّة عليها. | ||
* يُستخدَم الصنف <code>.progress</code> لتغليف شريط التقدّم وللإشارة إلى القيمة العليا للشريط. | * يُستخدَم الصنف <code>.progress</code> لتغليف شريط التقدّم وللإشارة إلى القيمة العليا للشريط. | ||
* يُستخدَم الصنف <code>.progress-bar</code> داخل شريط التقدّم للإشارة إلى القيمة التي وصل إليها الشريط. | * يُستخدَم الصنف <code>.progress-bar</code> داخل شريط التقدّم للإشارة إلى القيمة التي وصل إليها الشريط. | ||
| سطر 46: | سطر 46: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == الخلفيات == | ||
استخدم أصناف الخلفيّات الخدميّة لتغيير مظهر شرائط التقدّم | استخدم أصناف الخلفيّات الخدميّة لتغيير مظهر شرائط التقدّم فرديًّا.<syntaxhighlight lang="html"> | ||
<div class="progress"> | <div class="progress"> | ||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | ||
| سطر 64: | سطر 64: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== شرائط | == شرائط تقدم متعددة == | ||
يمكنك دمج شرائط تقدّم عدّة معًا إنْ احتجت لذلك.<syntaxhighlight lang="html"> | يمكنك دمج شرائط تقدّم عدّة معًا إنْ احتجت لذلك.<syntaxhighlight lang="html"> | ||
<div class="progress"> | <div class="progress"> | ||
| سطر 75: | سطر 75: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== شرائط | == شرائط تقدم مخطَّطة == | ||
أضف الصنف <code>.progress-bar-striped</code> إلى أيّ صنف <code>.progress-bar</code> لتطبيق تنسيق مُخطَّط على الشريط عبر القيمة [[CSS/gradient|gradient]] في CSS على لون الخلفيّة.<syntaxhighlight lang="html"> | أضف الصنف <code>.progress-bar-striped</code> إلى أيّ صنف <code>.progress-bar</code> لتطبيق تنسيق مُخطَّط على الشريط عبر القيمة [[CSS/gradient|gradient]] في CSS على لون الخلفيّة.<syntaxhighlight lang="html"> | ||
<div class="progress"> | <div class="progress"> | ||
| سطر 96: | سطر 96: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== شرائط | == شرائط تقدم مُخطَّطة ومتحركة == | ||
يمكن بإضافة الصنف <code>.progress-bar-animated</code> إلى <code>.progress-bar</code> تحريك تأثير شرائط التقدّم المُخطَّطة من اليمين إلى اليسار باستخدام [[CSS | يمكن بإضافة الصنف <code>.progress-bar-animated</code> إلى <code>.progress-bar</code> تحريك تأثير شرائط التقدّم المُخطَّطة من اليمين إلى اليسار باستخدام [[:تصنيف:CSS Animations|الحركات في CSS3]].<syntaxhighlight lang="html"> | ||
<div class="progress"> | <div class="progress"> | ||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> | <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> | ||
مراجعة 04:36، 14 أبريل 2018
يأتي إطار العمل Bootstrap مضمَّنًا مبدئيًّا بمكوِّن شرائط تقدّم تدعم تنظيم الشرائط عموديًّا وتحريك الخلفيّات وإضافة لافتات نصيّة.
آلية العمل
تُبنَى مكوِّنات شرائط التقدّم في إطار العمل Bootstrap باستخدام عنصُريْ HTML، وأنماط CSS لتعيين العرض وبضعة خاصيّات. لا يستخدم مكوِّن شرائط التقدّم عنصُر <progress> لضمان إمكانيّة تكديس شرائط التقدّم ، وتحريكها ووضع لافتات نصيّة عليها.
- يُستخدَم الصنف
.progressلتغليف شريط التقدّم وللإشارة إلى القيمة العليا للشريط. - يُستخدَم الصنف
.progress-barداخل شريط التقدّم للإشارة إلى القيمة التي وصل إليها الشريط. - يتطلّب الصنف
.progress-barنمطًا سطريًّا، أو صنفًا خدميًّا أو أنماط CSS مُخصَّصة لتعيين عرضها. - يتطلّب الصنف
.progress-barخاصيّاتroleوariaلجعله سهل الوصول.
يوضّح المثال التالي استخدام الأصناف والخاصيّات السابقة للحصول على شرائط تقدّم.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
يوفّر Bootstrap مجموعة أدوات لتعيين العرض التي بإمكانها - حسب الحاجة - المساعدة في الضبط السريع لشريط التقدّم.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
اللافتات
تمكن إضافة لافتات إلى شرائط التقدّم بإضافة نصّ ضمن الصنف .progress-bar.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
الارتفاع
تُحدَّد قيمة الارتفاع مبدئيًّا بالصنف .progress. كلّ ما عليك فعله لتغيير الارتفاع المبدئي هو تعديل ارتفاع العنصُر المغلِّف (.progress) وسيتغيّر ارتفاع شريط التقدّم تلقائيًّا تبعًا لذلك.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
الخلفيات
استخدم أصناف الخلفيّات الخدميّة لتغيير مظهر شرائط التقدّم فرديًّا.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
شرائط تقدم متعددة
يمكنك دمج شرائط تقدّم عدّة معًا إنْ احتجت لذلك.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
شرائط تقدم مخطَّطة
أضف الصنف .progress-bar-striped إلى أيّ صنف .progress-bar لتطبيق تنسيق مُخطَّط على الشريط عبر القيمة gradient في CSS على لون الخلفيّة.
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
شرائط تقدم مُخطَّطة ومتحركة
يمكن بإضافة الصنف .progress-bar-animated إلى .progress-bar تحريك تأثير شرائط التقدّم المُخطَّطة من اليمين إلى اليسار باستخدام الحركات في CSS3.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>