الفرق بين المراجعتين ل"Bootstrap/text"
اذهب إلى التنقل
اذهب إلى البحث
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 5: | سطر 5: | ||
ستمح أصناف محاذاة النصوص بمحاذاة النصّ بالنسبة لبقيّة المكوِّنات بكلّ سهولة.<syntaxhighlight lang="html"> | ستمح أصناف محاذاة النصوص بمحاذاة النصّ بالنسبة لبقيّة المكوِّنات بكلّ سهولة.<syntaxhighlight lang="html"> | ||
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p> | <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p> | ||
| + | |||
</syntaxhighlight>تتوفّر أصناف متجاوبة تستخدم نفس النقاط الحديّة التي يستخدمها نظام الشبكة في Bootstrap، تتوفّر لمحاذاة النصوص يسارًا، أو يمينًا أو في الوسط.<syntaxhighlight lang="html"> | </syntaxhighlight>تتوفّر أصناف متجاوبة تستخدم نفس النقاط الحديّة التي يستخدمها نظام الشبكة في Bootstrap، تتوفّر لمحاذاة النصوص يسارًا، أو يمينًا أو في الوسط.<syntaxhighlight lang="html"> | ||
<p class="text-left">نصّ يُحاذى يسارًا على جميع قيّاسات الشاشة.</p> | <p class="text-left">نصّ يُحاذى يسارًا على جميع قيّاسات الشاشة.</p> | ||
| سطر 16: | سطر 17: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | == التفاف النصّ والطفح Overflow == | + | == التفاف النصّ والطفح (Overflow) == |
امنع النصّ من الالتفاف باستخدام الصنف <code>.text-nowrap</code>.<syntaxhighlight lang="html"> | امنع النصّ من الالتفاف باستخدام الصنف <code>.text-nowrap</code>.<syntaxhighlight lang="html"> | ||
<div class="text-nowrap bd-highlight" style="width: 8rem;"> | <div class="text-nowrap bd-highlight" style="width: 8rem;"> | ||
يجب أن يطفح هذا النصّ فوق العنصُر الأب. | يجب أن يطفح هذا النصّ فوق العنصُر الأب. | ||
</div> | </div> | ||
| − | </syntaxhighlight>يمكن اقتطاع المحتوى الأطول من العنصُر الحاوي باستخدام الصنف <code>.text-truncate</code> لاقتطاع النصّ الطويل ووضع نقاط تتابع مكان النصّ المُقتَطَع. | + | </syntaxhighlight>يمكن اقتطاع المحتوى الأطول من العنصُر الحاوي باستخدام الصنف <code>.text-truncate</code> لاقتطاع النصّ الطويل ووضع نقاط تتابع مكان النصّ المُقتَطَع. '''يتطلّب ذلك استخدام <code>display: inline-block</code> أو <code>display: block</code>'''.<syntaxhighlight lang="html"> |
<!-- على المستوى الكتلي --> | <!-- على المستوى الكتلي --> | ||
<div class="row"> | <div class="row"> | ||
| سطر 36: | سطر 37: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | == تحويل | + | == تقسيم الكلمات == |
| − | يمكن التحويل بين حالة الأحرف (كبيرة | + | إن أردت منع السلاسل النصية الطويلة من كسر خطاطة المكونة، استخدم <code>.text-break</code> لتعيين <code>word-wrap: break-word</code>.<syntaxhighlight lang="html"> |
| + | <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == تحويل النص == | ||
| + | يمكن التحويل بين حالة الأحرف (كبيرة [uppercase] أو صغيرة [lowercase]) باستخدام الأصناف المُعدَّة لهذا الغرض.<syntaxhighlight lang="html"> | ||
<p class="text-lowercase">Lowercased text.</p> | <p class="text-lowercase">Lowercased text.</p> | ||
<p class="text-uppercase">Uppercased text.</p> | <p class="text-uppercase">Uppercased text.</p> | ||
| سطر 43: | سطر 49: | ||
</syntaxhighlight>لاحظ أنّ الصنف <code>.text-capitalize</code> يحوِّل فقط الحرف الأول من كلّ كلمة، ويترك بقيّة النصّ بدون تغيير. | </syntaxhighlight>لاحظ أنّ الصنف <code>.text-capitalize</code> يحوِّل فقط الحرف الأول من كلّ كلمة، ويترك بقيّة النصّ بدون تغيير. | ||
| − | == | + | == وزن الخطّ وميلانه == |
| − | <syntaxhighlight lang="html"> | + | يمكننا تغيير وزن الخط (<code>font-weight-*</code>) أو ميلانه (<code>font-italic</code>):<syntaxhighlight lang="html"> |
<p class="font-weight-bold">نصّ بخطّ ثخين.</p> | <p class="font-weight-bold">نصّ بخطّ ثخين.</p> | ||
<p class="font-weight-normal">نصّ بخطّ عاديّ.</p> | <p class="font-weight-normal">نصّ بخطّ عاديّ.</p> | ||
<p class="font-weight-light">نصّ بخطّ رقيق.</p> | <p class="font-weight-light">نصّ بخطّ رقيق.</p> | ||
<p class="font-italic">نصّ مائل</p> | <p class="font-italic">نصّ مائل</p> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == المسافة البيضاء المتوازنة == | ||
| + | يمكنك فصل الكلمات بمسافات بيضاء متوازنة عبر الصنف <code>.text-capitalize</code>.<syntaxhighlight lang="html"> | ||
| + | <p class="text-monospace">This is in monospace</p> | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | == إعادة تعيين الألوان == | ||
| + | يمكنك إعادة تعيين لون نص أو رابط عبر الصنف <code>.text-reset</code>، بحيث يورث اللون الخاص بالعنصر الأب.<syntaxhighlight lang="html"> | ||
| + | <p class="text-muted"> | ||
| + | Muted text with a <a href="#" class="text-reset">reset link</a>. | ||
| + | </p> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == تزيين النص == | ||
| + | يمكنك إزالة تزيين النص باستخدام الصنف <code>.text-reset</code>.<syntaxhighlight lang="html"> | ||
| + | <a href="#" class="text-decoration-none">Non-underlined link</a> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
| − | * [https://getbootstrap.com/docs/4. | + | * [https://getbootstrap.com/docs/4.5/utilities/text/ صفحة Text في توثيق Bootstrap]. |
| − | [[تصنيف:Bootstrap]] | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
| − | [[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 10:33، 13 يوليو 2020
تعرَّف على كيفيّة استخدام أدوات النصوص في إطار العمل Bootstrap للتحكّم في المحاذاة، والالتفاف، وحجم النصّ وغيرها من الأمور.
محاذاة النصّ
ستمح أصناف محاذاة النصوص بمحاذاة النصّ بالنسبة لبقيّة المكوِّنات بكلّ سهولة.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
تتوفّر أصناف متجاوبة تستخدم نفس النقاط الحديّة التي يستخدمها نظام الشبكة في Bootstrap، تتوفّر لمحاذاة النصوص يسارًا، أو يمينًا أو في الوسط.
<p class="text-left">نصّ يُحاذى يسارًا على جميع قيّاسات الشاشة.</p>
<p class="text-center">نصّ يُحاذى في الوسط على جميع قيّاسات الشاشة.</p>
<p class="text-right">نصّ يُحاذى يمينًا على جميع قيّاسات الشاشة.</p>
<p class="text-sm-left">نصّ يُحاذى يسارًا على الشاشات الصغيرة فما فوق.</p>
<p class="text-md-left">نصّ يُحاذى يسارًا على الشاشات المتوسّطة فما فوق.</p>
<p class="text-lg-left">نصّ يُحاذى يسارًا على الشاشات العريضة فما فوق.</p>
<p class="text-xl-left">نصّ يُحاذى يسارًا على الشاشات العريضة جدًّا فما فوق.</p>
التفاف النصّ والطفح (Overflow)
امنع النصّ من الالتفاف باستخدام الصنف .text-nowrap.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
يجب أن يطفح هذا النصّ فوق العنصُر الأب.
</div>
يمكن اقتطاع المحتوى الأطول من العنصُر الحاوي باستخدام الصنف .text-truncate لاقتطاع النصّ الطويل ووضع نقاط تتابع مكان النصّ المُقتَطَع. يتطلّب ذلك استخدام display: inline-block أو display: block.
<!-- على المستوى الكتلي -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- على المستوى السطريّ -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
تقسيم الكلمات
إن أردت منع السلاسل النصية الطويلة من كسر خطاطة المكونة، استخدم .text-break لتعيين word-wrap: break-word.
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
تحويل النص
يمكن التحويل بين حالة الأحرف (كبيرة [uppercase] أو صغيرة [lowercase]) باستخدام الأصناف المُعدَّة لهذا الغرض.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
لاحظ أنّ الصنف .text-capitalize يحوِّل فقط الحرف الأول من كلّ كلمة، ويترك بقيّة النصّ بدون تغيير.
وزن الخطّ وميلانه
يمكننا تغيير وزن الخط (font-weight-*) أو ميلانه (font-italic):
<p class="font-weight-bold">نصّ بخطّ ثخين.</p>
<p class="font-weight-normal">نصّ بخطّ عاديّ.</p>
<p class="font-weight-light">نصّ بخطّ رقيق.</p>
<p class="font-italic">نصّ مائل</p>
المسافة البيضاء المتوازنة
يمكنك فصل الكلمات بمسافات بيضاء متوازنة عبر الصنف .text-capitalize.
<p class="text-monospace">This is in monospace</p>
إعادة تعيين الألوان
يمكنك إعادة تعيين لون نص أو رابط عبر الصنف .text-reset، بحيث يورث اللون الخاص بالعنصر الأب.
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
تزيين النص
يمكنك إزالة تزيين النص باستخدام الصنف .text-reset.
<a href="#" class="text-decoration-none">Non-underlined link</a>