الفرق بين المراجعتين لصفحة: «Bootstrap/display»
إضافة محتوى الصفحة |
لا ملخص تعديل |
||
| سطر 5: | سطر 5: | ||
== آليّة العمل == | == آليّة العمل == | ||
غيّر قيمة الخاصيّة <code>display</code> باستخدام أصناف العرض المتجاوبة. عمد مطوِّرو Bootstrap إلى دعم مجموعة جزئيّة فقط من القيم الممكنة للخاصيّة <code>display</code>. يمكن المزج بين الأصناف للحصول على تأثيرات متنوّعة حسب الحاجة. | غيّر قيمة الخاصيّة <code>[[CSS/display|display]]</code> باستخدام أصناف العرض المتجاوبة. عمد مطوِّرو Bootstrap إلى دعم مجموعة جزئيّة فقط من القيم الممكنة للخاصيّة <code>[[CSS/display|display]]</code>. يمكن المزج بين الأصناف للحصول على تأثيرات متنوّعة حسب الحاجة. | ||
== تسميّة الأصناف == | == تسميّة الأصناف == | ||
لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على [[Bootstrap/layout-overview#.D9.86.D9.82.D8.A7.D8.B7 .D8.AD.D8.AF.D9.91.D9.8A.D9.91.D8.A9 .D9.85.D8.AA.D8.AC.D8.A7.D9.88.D8.A8.D8.A9|جميع النقاط الحديّة]] (من <code>xs</code> إلى <code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تنطبق على العناصر ذات الخاصيّة <code>min-width: 0;</code> فأعلى، وبالتالي لا ترتبط بأي استعلام وسيط. بالنسبة للنقاط الحديّة الأخرى فإن اختصاراتها تظهر في أسماء الأصناف. | لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على [[Bootstrap/layout-overview#.D9.86.D9.82.D8.A7.D8.B7 .D8.AD.D8.AF.D9.91.D9.8A.D9.91.D8.A9 .D9.85.D8.AA.D8.AC.D8.A7.D9.88.D8.A8.D8.A9|جميع النقاط الحديّة]] (من <code>xs</code> إلى <code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تنطبق على العناصر ذات الخاصيّة <code>[[CSS/min-width|min-width]]: 0;</code> فأعلى، وبالتالي لا ترتبط بأي استعلام وسيط. بالنسبة للنقاط الحديّة الأخرى فإن اختصاراتها تظهر في أسماء الأصناف. | ||
من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة: | من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة: | ||
* <code>.d-{value}</code> بالنسبة للنقطة الحديّة <code>xs</code> | * <code>.d-{value}</code> بالنسبة للنقطة الحديّة <code>xs</code> | ||
* <code>.d-{breakpoint}-{value}</code> بالنسبة للنقاط الحديّة <code>sm</code>، و<code>md</code>، و<code>lg</code> و<code>xl</code>. | * <code>.d-{breakpoint}-{value}</code> بالنسبة للنقاط الحديّة <code>sm</code>، و <code>md</code>، و <code>lg</code> و<code>xl</code>. | ||
حيث ''value'' تمثّل إحدى القيّم التاليّة: | حيث ''value'' تمثّل إحدى القيّم التاليّة: | ||
* <code>none</code> | * <code>none</code> | ||
| سطر 23: | سطر 23: | ||
* <code>flex</code> | * <code>flex</code> | ||
* <code>inline-flex</code> | * <code>inline-flex</code> | ||
تنطبق استعلامات الوسائط على الشاشات ذات النقطة الحديّة المُحدَّدة ''أو الأعرض'' منها. على سبيل المثال، يعيِّن الصنف <code>.d-lg-none</code> الخاصيّة <code>display: none;</code> على كلّ من الشاشات العريضة (<code>lg</code>) والعريضة جدّا (<code>xl</code>). | تنطبق استعلامات الوسائط على الشاشات ذات النقطة الحديّة المُحدَّدة ''أو الأعرض'' منها. على سبيل المثال، يعيِّن الصنف <code>.d-lg-none</code> الخاصيّة <code>[[CSS/display|display]]: none;</code> على كلّ من الشاشات العريضة (<code>lg</code>) والعريضة جدّا (<code>xl</code>). | ||
== أمثلة == | == أمثلة == | ||
| سطر 37: | سطر 37: | ||
طوِّر سريعًا صفحات ويب متوافقة مع الأجهزة الجوّالة باستخدام أصناف العرض المتجاوبة لإظهار أو إخفاء العناصر حسب الأجهزة. تجنّب إنشاء نُسَخ متعدّدة من نفس الموقع وأخف بدلًا من ذلك العناصر حسب حجم الشاشات المستهدفة. | طوِّر سريعًا صفحات ويب متوافقة مع الأجهزة الجوّالة باستخدام أصناف العرض المتجاوبة لإظهار أو إخفاء العناصر حسب الأجهزة. تجنّب إنشاء نُسَخ متعدّدة من نفس الموقع وأخف بدلًا من ذلك العناصر حسب حجم الشاشات المستهدفة. | ||
استخدم الصنف <code>.d-none</code> أو أيًّا من الأصناف <code>.d-{sm,md,lg,xl}-none</code> | استخدم الصنف <code>.d-none</code> أو أيًّا من الأصناف <code>.d-{sm,md,lg,xl}-none</code> لإخفاء العناصر من التنويعات المتجاوبة لشاشات الأجهزة. | ||
لإخفاء العناصر من التنويعات المتجاوبة لشاشات الأجهزة. | |||
يمكن الخلط بين الأصناف <code>.d-*-none</code> و<code>.d-*-*</code> لإظهار العناصر على مجال مُحدَّد لعرض الشاشة. على سبيل المثال تخفي الأصناف <code>.d-none .d-md-block .d-xl-none</code> العنصُر على جميع الشاشات ما عدا الشاشات المتوسّطة والعريضة. | يمكن الخلط بين الأصناف <code>.d-*-none</code> و<code>.d-*-*</code> لإظهار العناصر على مجال مُحدَّد لعرض الشاشة. على سبيل المثال تخفي الأصناف <code>.d-none .d-md-block .d-xl-none</code> العنصُر على جميع الشاشات ما عدا الشاشات المتوسّطة والعريضة. | ||
| سطر 67: | سطر 65: | ||
| <code>.d-block</code> | | <code>.d-block</code> | ||
|- | |- | ||
|مرئيّ على الشاشات الصغيرة جدًّا(xs) فقط | |مرئيّ على الشاشات الصغيرة جدًّا (xs) فقط | ||
|<code>.d-block .d-sm-none</code> | |<code>.d-block .d-sm-none</code> | ||
|- | |- | ||
| سطر 79: | سطر 77: | ||
|<code>.d-none .d-lg-block .d-xl-none</code> | |<code>.d-none .d-lg-block .d-xl-none</code> | ||
|- | |- | ||
|مرئيّ على الشاشات العريضة جدًّا(lg) فقط | |مرئيّ على الشاشات العريضة جدًّا (lg) فقط | ||
|<code>.d-none .d-xl-block</code> | |<code>.d-none .d-xl-block</code> | ||
|} | |} | ||
| سطر 88: | سطر 86: | ||
== العرض أثناء الطباعة == | == العرض أثناء الطباعة == | ||
يمكن تحديد قيمة الخاصيّة <code>display</code> أثناء الطباعة باستخدام أدوات العرض أثناء الطباعة. تتضمّن هذه الأدوات دعم نفس قيّم <code>display</code> الموجودة في أصناف <code>.d-*</code> المتجاوبة السابقة. | يمكن تحديد قيمة الخاصيّة <code>[[CSS/display|display]]</code> أثناء الطباعة باستخدام أدوات العرض أثناء الطباعة. تتضمّن هذه الأدوات دعم نفس قيّم <code>[[CSS/display|display]]</code> الموجودة في أصناف <code>.d-*</code> المتجاوبة السابقة. | ||
* <code>.d-print-none</code> | * <code>.d-print-none</code> | ||
* <code>.d-print-inline</code> | * <code>.d-print-inline</code> | ||
| سطر 105: | سطر 103: | ||
== مصادر == | == مصادر == | ||
[https://getbootstrap.com/docs/4.0/utilities/display/ صفحة Display property في توثيق Bootstrap]. | * [https://getbootstrap.com/docs/4.0/utilities/display/ صفحة Display property في توثيق Bootstrap]. | ||
مراجعة 05:59، 14 أبريل 2018
استخدم أدوات العرض التي يقدّمها إطار العمل Bootstrap لإبدال قيمة العرض بسرعة وعلى نحو متجاوب. تتضمّن الأدوات دعمَ بعضٍ من القيم الأكثر استخدامًا وأصنافًا إضافيّة للتحكّم في العرض أثناء الطباعة.
آليّة العمل
غيّر قيمة الخاصيّة display باستخدام أصناف العرض المتجاوبة. عمد مطوِّرو Bootstrap إلى دعم مجموعة جزئيّة فقط من القيم الممكنة للخاصيّة display. يمكن المزج بين الأصناف للحصول على تأثيرات متنوّعة حسب الحاجة.
تسميّة الأصناف
لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة (من xs إلى xl). يعود السبب في ذلك إلى أنّ هذه الأصناف تنطبق على العناصر ذات الخاصيّة min-width: 0; فأعلى، وبالتالي لا ترتبط بأي استعلام وسيط. بالنسبة للنقاط الحديّة الأخرى فإن اختصاراتها تظهر في أسماء الأصناف.
من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة:
.d-{value}بالنسبة للنقطة الحديّةxs.d-{breakpoint}-{value}بالنسبة للنقاط الحديّةsm، وmd، وlgوxl.
حيث value تمثّل إحدى القيّم التاليّة:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
تنطبق استعلامات الوسائط على الشاشات ذات النقطة الحديّة المُحدَّدة أو الأعرض منها. على سبيل المثال، يعيِّن الصنف .d-lg-none الخاصيّة display: none; على كلّ من الشاشات العريضة (lg) والعريضة جدّا (xl).
أمثلة
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
إخفاء العناصر
طوِّر سريعًا صفحات ويب متوافقة مع الأجهزة الجوّالة باستخدام أصناف العرض المتجاوبة لإظهار أو إخفاء العناصر حسب الأجهزة. تجنّب إنشاء نُسَخ متعدّدة من نفس الموقع وأخف بدلًا من ذلك العناصر حسب حجم الشاشات المستهدفة.
استخدم الصنف .d-none أو أيًّا من الأصناف .d-{sm,md,lg,xl}-none لإخفاء العناصر من التنويعات المتجاوبة لشاشات الأجهزة.
يمكن الخلط بين الأصناف .d-*-none و.d-*-* لإظهار العناصر على مجال مُحدَّد لعرض الشاشة. على سبيل المثال تخفي الأصناف .d-none .d-md-block .d-xl-none العنصُر على جميع الشاشات ما عدا الشاشات المتوسّطة والعريضة.
| النتيجة | الصنف |
|---|---|
| مخفيّ في جميع الشاشات | .d-none
|
| مخفيّ في الشاشات الصغيرة جدًّا (xs) فقط | .d-none .d-sm-block
|
| مخفيّ في الشاشات الصغيرة (sm) فقط | .d-sm-none .d-md-block
|
| مخفيّ في الشاشات المتوسّطة (md) فقط | .d-md-none .d-lg-block
|
| مخفيّ في الشاشات العريضة (lg) فقط | .d-lg-none .d-xl-block
|
| مخفيّ في الشاشات العريضة جدًّا (lg) فقط | .d-xl-none
|
| مرئيّ على جميع الشاشات | .d-block
|
| مرئيّ على الشاشات الصغيرة جدًّا (xs) فقط | .d-block .d-sm-none
|
| مرئيّ على الشاشات الصغيرة (sm) فقط | .d-none .d-sm-block .d-md-none
|
| مرئيّ على الشاشات المتوسّطة (md) فقط | .d-none .d-md-block .d-lg-none
|
| مرئيّ على الشاشات العريضة (lg) فقط | .d-none .d-lg-block .d-xl-none
|
| مرئيّ على الشاشات العريضة جدًّا (lg) فقط | .d-none .d-xl-block
|
<div class="d-lg-none">أخف على الشاشات الأعرض من lg</div>
<div class="d-none d-lg-block">أخف على الشاشات الأضيق من lg</div>
العرض أثناء الطباعة
يمكن تحديد قيمة الخاصيّة display أثناء الطباعة باستخدام أدوات العرض أثناء الطباعة. تتضمّن هذه الأدوات دعم نفس قيّم display الموجودة في أصناف .d-* المتجاوبة السابقة.
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
يمكن المزج بين استخدام أصناف العرض على الشاشة وأصناف العرض أثناء الطباعة.
<div class="d-print-none">على الشاشة فقط (مخفيّ فقط في الطباعة)</div>
<div class="d-none d-print-block">في الطباعة فقط (مخفيّ فقط على الشاشات)</div>
<div class="d-none d-lg-block d-print-block">مخفيّ في الشاشات العريضة وأضيق منها، لكنّه مرئيّ دائما في الطباعة</div>