الفرق بين المراجعتين ل"Bootstrap/borders"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء الصفحة) |
(إضافة محتوى الصفحة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:إطار العناصر Borders في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:إطار العناصر Borders في إطار العمل Bootstrap}}</noinclude> | ||
| − | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap]] |
| + | [[تصنيف:Bootstrap utilities]] | ||
| + | استخدم أدوات الحدود Borders التي يقدّمها إطار العمل Bootstrap لتنسيق حدود عنصُر أو تدويرها. أدوات الحدود مناسبة للاستخدام لتنسيق الصوّر ، أو الأزرار أو أيّ عنصُر آخر. | ||
| + | |||
| + | == الحدود == | ||
| + | استخدم أصناف الحدود لإضافة حدود إلى عنصُر أو حذفها منه. اختر بين التعامل مع الحدود من جميع الجوانب والتعامل مع كلّ جانب على حدة. | ||
| + | |||
| + | === الطريقة التجميعيّة === | ||
| + | تضيف هذه الأصناف الحدود إلى جوانب العنصُر.<syntaxhighlight lang="html"> | ||
| + | <span class="border"></span> | ||
| + | <span class="border-top"></span> | ||
| + | <span class="border-right"></span> | ||
| + | <span class="border-bottom"></span> | ||
| + | <span class="border-left"></span> | ||
| + | |||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | === الطريقة الإسقاطيّة === | ||
| + | تحذف هذه الأصناف الحدود من جوانب العنصُر.<syntaxhighlight lang="html"> | ||
| + | <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> | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | == ألوان الحدود == | ||
| + | يمكن استخدام أدوات مبنيّة على ألوان قالب Bootstrap لتغيير لون حدود العنصُر.<syntaxhighlight lang="html"> | ||
| + | <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> | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | == تدوير الحدود == | ||
| + | توجد أصناف عدّة للتحكّم في درجة تدوير حدود العنصُر.<syntaxhighlight lang="html"> | ||
| + | <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-0"> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.0/utilities/borders/ صفحة Borders في توثيق Bootstrap]. | ||
مراجعة 11:00، 13 أبريل 2018
استخدم أدوات الحدود Borders التي يقدّمها إطار العمل Bootstrap لتنسيق حدود عنصُر أو تدويرها. أدوات الحدود مناسبة للاستخدام لتنسيق الصوّر ، أو الأزرار أو أيّ عنصُر آخر.
الحدود
استخدم أصناف الحدود لإضافة حدود إلى عنصُر أو حذفها منه. اختر بين التعامل مع الحدود من جميع الجوانب والتعامل مع كلّ جانب على حدة.
الطريقة التجميعيّة
تضيف هذه الأصناف الحدود إلى جوانب العنصُر.
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
الطريقة الإسقاطيّة
تحذف هذه الأصناف الحدود من جوانب العنصُر.
<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-0">