טֶקסט
תיעוד ודוגמאות עבור כלי עזר נפוצים לטקסט לשליטה ביישור, גלישה, משקל ועוד.
יישור טקסט
יישר מחדש בקלות טקסט לרכיבים עם מחלקות יישור טקסט.
טקסט מסוים של מציין מיקום כדי להדגים יישור טקסט מוצדק. האם תעשה את אותו הדבר בשבילי? הגיע הזמן להתמודד עם המוזיקה. אני כבר לא המוזה שלך. שמעתי שזה יפה, תהיה השופט והבנות שלי הולכות להצביע. אני יכול להרגיש את עוף החול בתוכי. גן עדן מקנא באהבה שלנו, מלאכים בוכים מלמעלה. כן, אתה לוקח אותי לאוטופיה.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
ליישור שמאל, ימין ומרכז, זמינות מחלקות רספונסיביות המשתמשות באותן נקודות עצירה ברוחב של שדה התצוגה כמו מערכת הרשת.
טקסט מיושר לשמאל בכל גדלי התצוגה.
טקסט מיושר במרכז בכל גדלי יציאת התצוגה.
טקסט מיושר לימין בכל גדלי התצוגה.
טקסט מיושר לשמאל ביציאות תצוגה בגודל SM (קטן) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל MD (בינוני) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל LG (גדול) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל XL (אקסטרה-large) או רחב יותר.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
עטיפת טקסט והצפת טקסט
עטוף טקסט עם .text-wrap
כיתה.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
מנע טקסט מלהתעטף .text-nowrap
בכיתה.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
לתוכן ארוך יותר, אתה יכול להוסיף .text-truncate
מחלקה כדי לקצץ את הטקסט באליפסיס. דורש display: inline-block
או display: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<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
ו word-break: break-word
. אנו משתמשים word-wrap
במקום הנפוץ יותר overflow-wrap
עבור תמיכה רחבה יותר בדפדפן, ומוסיפים את הגרסה שהוצאה משימוש word-break: break-word
כדי למנוע בעיות עם מיכלי flex.
ממממממממממממממממממממממממממממממממממממממממממממממ
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
שינוי טקסט
הפוך טקסט ברכיבים עם מחלקות רישיות טקסט.
טקסט באותיות קטנות.
טקסט באותיות גדולות.
טקסט עם רישיות.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
שים לב כיצד .text-capitalize
משנה רק את האות הראשונה של כל מילה, ומשאיר את האותיות האותיות לא מושפעות.
משקל גופן ונטוי
שנה במהירות את המשקל (הדגשה) של טקסט או טקסט נטוי.
טקסט מודגש.
טקסט משקל מודגש יותר (ביחס לאלמנט האב).
טקסט במשקל רגיל.
טקסט קל משקל.
טקסט קל יותר (ביחס לאלמנט האב).
טקסט נטוי.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
מונוספייס
שנה בחירה לערימת הגופנים המונוספייס שלנו עם .text-monospace
.
זה במונוספייס
<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-decoration-none
כיתה.
<a href="#" class="text-decoration-none">Non-underlined link</a>