الفرق بين المراجعتين لصفحة: «Bootstrap/borders»
إضافة محتوى الصفحة |
لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:إطار العناصر Borders في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:إطار العناصر Borders في إطار العمل Bootstrap}}</noinclude> | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
استخدم أدوات | استخدم أدوات الإطارات (borders) التي يقدّمها إطار العمل Bootstrap لتنسيق إطارات عنصُر أو تدويرها. أدوات الإطارات مناسبة للاستخدام لتنسيق الصوّر أو الأزرار أو أيّ عنصُر آخر. | ||
== | == الإطارات == | ||
استخدم أصناف | استخدم أصناف الإطارات لإضافة إطارات إلى عنصُر أو حذفها منه. اختر بين التعامل مع الإطارات من جميع الجوانب والتعامل مع كلّ جانب على حدة. | ||
=== الطريقة التجميعيّة === | === الطريقة التجميعيّة (Additive) === | ||
تضيف هذه الأصناف | تضيف هذه الأصناف الإطارات إلى جوانب العنصُر.<syntaxhighlight lang="html"> | ||
<span class="border"></span> | <span class="border"></span> | ||
<span class="border-top"></span> | <span class="border-top"></span> | ||
| سطر 18: | سطر 18: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== الطريقة | === الطريقة الإسقاطية (Subtractive) === | ||
تحذف هذه الأصناف | تحذف هذه الأصناف الإطارات من جوانب العنصُر.<syntaxhighlight lang="html"> | ||
<span class="border-0"></span> | <span class="border-0"></span> | ||
<span class="border-top-0"></span> | <span class="border-top-0"></span> | ||
| سطر 42: | سطر 42: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== تدوير | == تدوير الإطارات == | ||
توجد أصناف عدّة للتحكّم في درجة تدوير حدود العنصُر.<syntaxhighlight lang="html"> | توجد أصناف عدّة للتحكّم في درجة تدوير حدود العنصُر.<syntaxhighlight lang="html"> | ||
<img src="..." alt="..." class="rounded"> | <img src="..." alt="..." class="rounded"> | ||
| سطر 50: | سطر 50: | ||
<img src="..." alt="..." class="rounded-left"> | <img src="..." alt="..." class="rounded-left"> | ||
<img src="..." alt="..." class="rounded-circle"> | <img src="..." alt="..." class="rounded-circle"> | ||
<img src="..." alt="..." class="rounded-pill"> | |||
<img src="..." alt="..." class="rounded-0"> | <img src="..." alt="..." class="rounded-0"> | ||
</syntaxhighlight> | |||
== الأحجام == | |||
استعمل الصنفين <code>.rounded-lg</code> و <code>.rounded-sm</code> لأجل تكبير تدوير الإطارات أو تصغيره.<syntaxhighlight lang="html"> | |||
<img src="..." alt="..." class="rounded-sm"> | |||
<img src="..." alt="..." class="rounded-lg"> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/utilities/borders/ صفحة Borders في توثيق Bootstrap]. | ||
المراجعة الحالية بتاريخ 16:49، 13 يوليو 2020
استخدم أدوات الإطارات (borders) التي يقدّمها إطار العمل Bootstrap لتنسيق إطارات عنصُر أو تدويرها. أدوات الإطارات مناسبة للاستخدام لتنسيق الصوّر أو الأزرار أو أيّ عنصُر آخر.
الإطارات
استخدم أصناف الإطارات لإضافة إطارات إلى عنصُر أو حذفها منه. اختر بين التعامل مع الإطارات من جميع الجوانب والتعامل مع كلّ جانب على حدة.
الطريقة التجميعيّة (Additive)
تضيف هذه الأصناف الإطارات إلى جوانب العنصُر.
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
الطريقة الإسقاطية (Subtractive)
تحذف هذه الأصناف الإطارات من جوانب العنصُر.
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
ألوان الحدود
يمكن استخدام أدوات مبنيّة على ألوان قالب Bootstrap لتغيير لون حدود العنصُر.
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
تدوير الإطارات
توجد أصناف عدّة للتحكّم في درجة تدوير حدود العنصُر.
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">
الأحجام
استعمل الصنفين .rounded-lg و .rounded-sm لأجل تكبير تدوير الإطارات أو تصغيره.
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">