الفرق بين المراجعتين لصفحة: «Bootstrap/utilities for layout»
إضافة عنوان |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:أدوات مساعدة في إطار العمل Bootstrap لإدارة المحتوى}}</noinclude> | <noinclude>{{DISPLAYTITLE:أدوات مساعدة في إطار العمل Bootstrap لإدارة المحتوى}}</noinclude> | ||
يتضمّن إطار العمل Bootstrap عشرات الأصناف الخدمية لإظهار المحتوى، وإخفائه، ومحاذاته ومباعدته. تساعد هذه الأصناف كثيرًا في تسريع تطوير صفحات متجاوبة ومُوجَّهة إلى الجوّال | يتضمّن إطار العمل Bootstrap عشرات الأصناف الخدمية لإظهار المحتوى، وإخفائه، ومحاذاته ومباعدته. تساعد هذه الأصناف كثيرًا في تسريع تطوير صفحات متجاوبة ومُوجَّهة إلى الجوّال أولًا. | ||
== تغيير قيمة الخاصيّة <code>display</code> == | == تغيير قيمة الخاصيّة <code>display</code> == | ||
استخدم [[Bootstrap/display|أدوات العرض]] للتبديل بين القيم الشائعة للخاصيّة <code>display</code> بطريقة متجاوبة. اجمع بين استخدام هذه الأدوات من أجل إظهار أو إخفاء عناصر نظام الشبكة، أو المحتوى أو المكوّنات الأخرى لإطار العمل حسب إطارات عرض Viewports مُحدَّدة. | استخدم [[Bootstrap/display|أدوات العرض]] للتبديل بين القيم الشائعة للخاصيّة <code>[[CSS/display|display]]</code> بطريقة متجاوبة. اجمع بين استخدام هذه الأدوات من أجل إظهار أو إخفاء عناصر نظام الشبكة، أو المحتوى أو المكوّنات الأخرى لإطار العمل حسب إطارات عرض Viewports مُحدَّدة. | ||
== خيارات Flexbox == | == خيارات Flexbox == | ||
بُنِي الإصدار 4 من Bootstrap باستخدام Flexbox، إلّا أنّه توجد عناصر لم تُغيَّر قيمة الخاصيّة <code>display</code> بالنسبة لها لتكون <code>display: flex</code>؛ إذ أنّ تفعيل هذه القيمة على جميع العناصر سيُلغي الكثير من القيم المبدئية لغير ضرورة؛ كما أنّه يغيّر السلوك الأساسي للمتصفّحات على نحو غير متوقَّع. أُنشِئت أغلب [[Bootstrap | بُنِي الإصدار 4 من Bootstrap باستخدام Flexbox، إلّا أنّه توجد عناصر لم تُغيَّر قيمة الخاصيّة <code>[[CSS/display|display]]</code> بالنسبة لها لتكون <code>display: flex</code>؛ إذ أنّ تفعيل هذه القيمة على جميع العناصر سيُلغي الكثير من القيم المبدئية لغير ضرورة؛ كما أنّه يغيّر السلوك الأساسي للمتصفّحات على نحو غير متوقَّع. أُنشِئت أغلب [[:تصنيف:Bootstrap Components|مكوّنات إطار العمل Bootstrap]] بحيث يكون تخطيط Flexbox مُفعّلًا مبدئيًّا. | ||
أضف الصّنف <code>.d-flex</code> أو أحد تنويعاته المتجاوبة (مثلًا: <code>.d-sm-flex</code>) إن احتجت لإضافة <code>display: flex</code> إلى عنصُر. يتطلّب استخدام [[Bootstrap/flex|أدوات Flexbox]] وجودَ الصّنف المذكور أو القيمة <code>display</code>. | أضف الصّنف <code>.d-flex</code> أو أحد تنويعاته المتجاوبة (مثلًا: <code>.d-sm-flex</code>) إن احتجت لإضافة <code>display: flex</code> إلى عنصُر. يتطلّب استخدام [[Bootstrap/flex|أدوات Flexbox]] وجودَ الصّنف المذكور أو القيمة <code>display</code>. | ||
== الحاشيّات والهوامش == | == الحاشيّات والهوامش == | ||
استخدم قيم الخاصيّتيْن <code>margin</code> و <code>padding</code> في [[Bootstrap/spacing|أدوات التباعد]] للتحكّم في قياس العناصر والمكوّنات والتباعد بينها. يتضمّن الإصدار 4 من إطار العمل Bootstrap تدرجًا من خمسة مستويات لأدوات التباعد، اعتمادًا على القيمة المبدئية للمتغيّر <code>$spacer</code> والتي هي <code>1rem</code>. اختر قيمًا لجميع إطارات العرض (مثلًا الصّنف <code>.mr-3</code> للحصول على خاصيّة <code>margin-right: 1rem</code>) أو اختر من بين التنويعات المتجاوبة لاستهداف إطار عرض مُحدَّد (مثلًا: <code>.mr-md-3</code> للحصول على <code>margin-right: 1rem</code> ابتداءً من النقطة الحدّية <code>md</code>). | استخدم قيم الخاصيّتيْن <code>[[CSS/margin|margin]]</code> و <code>[[CSS/padding|padding]]</code> في [[Bootstrap/spacing|أدوات التباعد]] للتحكّم في قياس العناصر والمكوّنات والتباعد بينها. يتضمّن الإصدار 4 من إطار العمل Bootstrap تدرجًا من خمسة مستويات لأدوات التباعد، اعتمادًا على القيمة المبدئية للمتغيّر <code>$spacer</code> والتي هي <code>1rem</code>. اختر قيمًا لجميع إطارات العرض (مثلًا الصّنف <code>.mr-3</code> للحصول على خاصيّة <code>margin-right: 1rem</code>) أو اختر من بين التنويعات المتجاوبة لاستهداف إطار عرض مُحدَّد (مثلًا: <code>.mr-md-3</code> للحصول على <code>margin-right: 1rem</code> ابتداءً من النقطة الحدّية <code>md</code>). | ||
== التبديل بين قيم الخاصيّة <code>visibility</code> == | == التبديل بين قيم الخاصيّة <code>visibility</code> == | ||
يمكن تبديل قيمة الخاصيّة <code>visibility</code> عن طريق [[Bootstrap/visibility|أداة قابليّة الرؤية]] عندما يكون تبديل قيمة الخاصيّة <code>display</code> غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار. | يمكن تبديل قيمة الخاصيّة <code>[[CSS/visibility|visibility]]</code> عن طريق [[Bootstrap/visibility|أداة قابليّة الرؤية]] عندما يكون تبديل قيمة الخاصيّة <code>[[CSS/display|display]]</code> غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار. | ||
== | == مصادر == | ||
* [https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/ صفحة Utilities for layout في توثيق Bootstrap]. | * [https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/ صفحة Utilities for layout في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap]] | ||
[[تصنيف:Bootstrap layout]] | [[تصنيف:Bootstrap layout]] | ||
مراجعة 04:01، 20 مارس 2018
يتضمّن إطار العمل Bootstrap عشرات الأصناف الخدمية لإظهار المحتوى، وإخفائه، ومحاذاته ومباعدته. تساعد هذه الأصناف كثيرًا في تسريع تطوير صفحات متجاوبة ومُوجَّهة إلى الجوّال أولًا.
تغيير قيمة الخاصيّة display
استخدم أدوات العرض للتبديل بين القيم الشائعة للخاصيّة display بطريقة متجاوبة. اجمع بين استخدام هذه الأدوات من أجل إظهار أو إخفاء عناصر نظام الشبكة، أو المحتوى أو المكوّنات الأخرى لإطار العمل حسب إطارات عرض Viewports مُحدَّدة.
خيارات Flexbox
بُنِي الإصدار 4 من Bootstrap باستخدام Flexbox، إلّا أنّه توجد عناصر لم تُغيَّر قيمة الخاصيّة display بالنسبة لها لتكون display: flex؛ إذ أنّ تفعيل هذه القيمة على جميع العناصر سيُلغي الكثير من القيم المبدئية لغير ضرورة؛ كما أنّه يغيّر السلوك الأساسي للمتصفّحات على نحو غير متوقَّع. أُنشِئت أغلب مكوّنات إطار العمل Bootstrap بحيث يكون تخطيط Flexbox مُفعّلًا مبدئيًّا.
أضف الصّنف .d-flex أو أحد تنويعاته المتجاوبة (مثلًا: .d-sm-flex) إن احتجت لإضافة display: flex إلى عنصُر. يتطلّب استخدام أدوات Flexbox وجودَ الصّنف المذكور أو القيمة display.
الحاشيّات والهوامش
استخدم قيم الخاصيّتيْن margin و padding في أدوات التباعد للتحكّم في قياس العناصر والمكوّنات والتباعد بينها. يتضمّن الإصدار 4 من إطار العمل Bootstrap تدرجًا من خمسة مستويات لأدوات التباعد، اعتمادًا على القيمة المبدئية للمتغيّر $spacer والتي هي 1rem. اختر قيمًا لجميع إطارات العرض (مثلًا الصّنف .mr-3 للحصول على خاصيّة margin-right: 1rem) أو اختر من بين التنويعات المتجاوبة لاستهداف إطار عرض مُحدَّد (مثلًا: .mr-md-3 للحصول على margin-right: 1rem ابتداءً من النقطة الحدّية md).
التبديل بين قيم الخاصيّة visibility
يمكن تبديل قيمة الخاصيّة visibility عن طريق أداة قابليّة الرؤية عندما يكون تبديل قيمة الخاصيّة display غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار.