טיפוגרפיה
תיעוד ודוגמאות לטיפוגרפיה של Bootstrap, כולל הגדרות גלובליות, כותרות, טקסט גוף, רשימות ועוד.
הגדרות כלליות
Bootstrap מגדיר סגנונות תצוגה גלובליים, טיפוגרפיה וקישור בסיסיים. כאשר יש צורך בשליטה נוספת, בדוק את מחלקות השירות הטקסטואלי .
- השתמש בערימת גופנים מקורית שבוחרת את הטוב ביותר
font-family
עבור כל מערכת הפעלה ומכשיר. - עבור סולם סוגים כולל ונגיש יותר, אנו מניחים את שורש ברירת המחדל של הדפדפן
font-size
(בדרך כלל 16 פיקסלים) כך שמבקרים יכולים להתאים אישית את ברירת המחדל של הדפדפן לפי הצורך. - השתמש בתכונות
$font-family-base
,$font-size-base
, ו$line-height-base
כבסיס הטיפוגרפי שלנו מיושם על ה<body>
. - הגדר את צבע הקישור הגלובלי באמצעות
$link-color
והחל קו תחתון של קישור רק ב-:hover
. - השתמש
$body-bg
כדי להגדיר abackground-color
על<body>
(#fff
כברירת מחדל).
ניתן למצוא סגנונות אלה בתוך _reboot.scss
, והמשתנים הגלובליים מוגדרים ב- _variables.scss
. הקפד להגדיר $font-size-base
.rem
כותרות
כל כותרות ה-HTML, <h1>
דרך <h6>
, זמינות.
כּוֹתֶרֶת | דוגמא |
---|---|
|
h1. כותרת אתחול |
|
h2. כותרת אתחול |
|
h3. כותרת אתחול |
|
h4. כותרת אתחול |
|
h5. כותרת אתחול |
|
h6. כותרת אתחול |
.h1
שיעורי דרך .h6
זמינים גם כאשר אתה רוצה להתאים את סגנון הגופן של כותרת אבל לא יכול להשתמש באלמנט ה-HTML המשויך.
h1. כותרת אתחול
h2. כותרת אתחול
h3. כותרת אתחול
h4. כותרת אתחול
h5. כותרת אתחול
h6. כותרת אתחול
התאמה אישית של כותרות
השתמש במחלקות השירות הכלולים כדי ליצור מחדש את טקסט הכותרת המשנית הקטן מ-Bootstrap 3.
כותרת תצוגה מפוארת עם טקסט משני דהוי
הצג כותרות
רכיבי כותרת מסורתיים נועדו לעבוד בצורה הטובה ביותר בתוכן הדף שלך. כאשר אתה צריך כותרת לבלוט, שקול להשתמש בכותרת תצוגה - סגנון כותרת גדול יותר, קצת יותר דעתני. זכור כי כותרות אלו אינן רספונסיביות כברירת מחדל, אך ניתן להפעיל גדלי גופנים רספונסיביים .
תצוגה 1 |
תצוגה 2 |
תצוגה 3 |
תצוגה 4 |
עוֹפֶרֶת
הבלוט פסקה על ידי הוספת .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
רכיבי טקסט מוטבעים
עיצוב עבור רכיבי HTML5 מוטבעים נפוצים.
אתה יכול להשתמש בתג סימון כדישִׂיאטֶקסט.
שורת טקסט זו אמורה להתייחס כטקסט שנמחק.
שורת טקסט זו אמורה להתייחס כלא מדויקת עוד.
שורת טקסט זו אמורה להתייחס כתוספת למסמך.
שורת טקסט זו תוצג כמסומן בקו תחתון
שורת טקסט זו אמורה להתייחס כאותיות קטנות.
שורה זו מוצגת כטקסט מודגש.
שורה זו מוצגת כטקסט נטוי.
.mark
ושיעורים .small
זמינים גם כדי ליישם את אותם סגנונות <mark>
תוך <small>
הימנעות מכל השלכות סמנטיות לא רצויות שהתגיות יביאו.
למרות שלא מוצג למעלה, אל תהסס להשתמש <b>
וב- <i>
HTML5. <b>
נועד להדגיש מילים או ביטויים מבלי לשדר חשיבות נוספת בעוד <i>
הוא מיועד בעיקר לקול, למונחים טכניים וכו'.
כלי עזר לטקסט
שנה יישור טקסט, טרנספורמציה, סגנון, משקל וצבע עם כלי השירות לטקסט וכלי השירות הצבע שלנו .
קיצורי מילים
יישום מסוגנן של <abbr>
אלמנט HTML עבור קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת על ריחוף. לקיצורים יש קו תחתון ברירת מחדל ומקבלים סמן עזרה כדי לספק הקשר נוסף על ריחוף ולמשתמשים בטכנולוגיות מסייעות.
הוסף .initialism
לקיצור עבור גודל גופן מעט קטן יותר.
attr
HTML
ציטוטים בלוק
לציטוט בלוקים של תוכן ממקור אחר בתוך המסמך שלך. עטוף <blockquote class="blockquote">
סביב כל HTML בתור הציטוט.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
מתן שם למקור
הוסף א <footer class="blockquote-footer">
לזיהוי המקור. עטפו את שם עבודת המקור ב- <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
יישור
השתמש בכלי עזר לטקסט לפי הצורך כדי לשנות את היישור של הציטוט שלך.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
רשימות
לא מעוצב
הסר את ברירת המחדל list-style
והשוליים השמאליים בפריטי רשימה (ילדים מיידיים בלבד). זה חל רק על פריטי רשימת ילדים מיידיים , כלומר תצטרך להוסיף את הכיתה גם עבור כל רשימות מקוננות.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing עלית
- הוראה שלם במאסה
- Facilisis ב-Pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
בשורה
Remove a list’s bullets and apply some light margin
with a combination of two classes, .list-inline
and .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Description list alignment
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate
class to truncate the text with an ellipsis.
- Description lists
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsive font sizes
Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. RFS can be enabled by changing the $enable-responsive-font-sizes
Sass variable to true
and recompiling Bootstrap.
כדי לתמוך ב- RFS , אנו משתמשים במיקסין של Sass כדי להחליף את font-size
המאפיינים הרגילים שלנו. גדלי גופנים רספונסיביים יורכבו calc()
לפונקציות עם שילוב של rem
יחידות נקודת מבט כדי לאפשר את התנהגות קנה המידה הרספונסיבי. עוד על RFS והתצורה שלו ניתן למצוא במאגר GitHub שלו .