טיפוגרפיה
תיעוד ודוגמאות לטיפוגרפיה של 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. כותרת אתחול
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
השתמש במחלקות השירות הכלולים כדי ליצור מחדש את טקסט הכותרת המשנית הקטן מ-Bootstrap 3.
רכיבי כותרת מסורתיים נועדו לעבוד בצורה הטובה ביותר בתוכן הדף שלך. כאשר אתה צריך כותרת לבלוט, שקול להשתמש בכותרת תצוגה - סגנון כותרת גדול יותר, קצת יותר דעתני.
תצוגה 1 |
תצוגה 2 |
תצוגה 3 |
תצוגה 4 |
הבלוט פסקה על ידי הוספת .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
עיצוב עבור רכיבי HTML5 מוטבעים נפוצים.
אתה יכול להשתמש בתג סימון כדישִׂיאטֶקסט.
שורת טקסט זו אמורה להתייחס כטקסט שנמחק.
שורת טקסט זו אמורה להתייחס כלא מדויקת עוד.
שורת טקסט זו אמורה להתייחס כתוספת למסמך.
שורת טקסט זו תוצג כמסומן בקו תחתון
שורת טקסט זו אמורה להתייחס כאותיות קטנות.
שורה זו מוצגת כטקסט מודגש.
שורה זו מוצגת כטקסט נטוי.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
ושיעורים .small
זמינים גם כדי ליישם את אותם סגנונות <mark>
תוך <small>
הימנעות מכל השלכות סמנטיות לא רצויות שהתגיות יביאו.
למרות שלא מוצג למעלה, אל תהסס להשתמש <b>
וב- <i>
HTML5. <b>
נועד להדגיש מילים או ביטויים מבלי לשדר חשיבות נוספת בעוד <i>
הוא מיועד בעיקר לקול, למונחים טכניים וכו'.
שנה יישור טקסט, טרנספורמציה, סגנון, משקל וצבע עם כלי השירות לטקסט וכלי השירות הצבע שלנו .
יישום מסוגנן של <abbr>
אלמנט HTML עבור קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת על ריחוף. לקיצורים יש קו תחתון ברירת מחדל ומקבלים סמן עזרה כדי לספק הקשר נוסף על ריחוף ולמשתמשים בטכנולוגיות מסייעות.
הוסף .initialism
לקיצור עבור גודל גופן מעט קטן יותר.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
לציטוט בלוקים של תוכן ממקור אחר בתוך המסמך שלך. עטוף <blockquote class="blockquote">
סביב כל HTML בתור הציטוט.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
הוסף א <footer class="blockquote-footer">
לזיהוי המקור. עטפו את שם עבודת המקור ב- <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
השתמש בכלי עזר לטקסט לפי הצורך כדי לשנות את היישור של הציטוט שלך.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
הסר את ברירת המחדל 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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
הסר את התבליטים של רשימה והחל קצת אור margin
עם שילוב של שתי מחלקות, .list-inline
ו- .list-inline-item
.
- לורם איפסום
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
יישר מונחים ותיאורים בצורה אופקית על ידי שימוש במחלקות המוגדרות מראש של מערכת הרשת שלנו (או שילובים סמנטיים). לטווחים ארוכים יותר, באפשרותך להוסיף .text-truncate
מחלקה כדי לקטוע את הטקסט באליפסיס.
- רשימות תיאור
- רשימת תיאורים מושלמת להגדרת מונחים.
- 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.
- מונח קטוע קטוע
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- קינון
-
- רשימת הגדרות מקוננים
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
טיפוגרפיה רספונסיבית מתייחסת לשינוי קנה מידה של טקסט ורכיבים פשוט על ידי התאמת רכיבי הבסיס font-size
בתוך סדרה של שאילתות מדיה. Bootstrap לא עושה את זה בשבילך, אבל זה די קל להוסיף אם אתה צריך את זה.
הנה דוגמה לכך בפועל. בחר כל font-size
שאילתות s ומדיה שתרצה.