Source

טיפוגרפיה

תיעוד ודוגמאות לטיפוגרפיה של Bootstrap, כולל הגדרות גלובליות, כותרות, טקסט גוף, רשימות ועוד.

הגדרות כלליות

Bootstrap מגדיר סגנונות תצוגה גלובליים, טיפוגרפיה וקישור בסיסיים. כאשר יש צורך בשליטה נוספת, בדוק את מחלקות השירות הטקסטואלי .

  • השתמש בערימת גופנים מקורית שבוחרת את הטוב ביותר font-familyעבור כל מערכת הפעלה ומכשיר.
  • עבור סולם סוגים כולל ונגיש יותר, אנו מניחים את שורש ברירת המחדל של הדפדפן font-size(בדרך כלל 16 פיקסלים) כך שמבקרים יכולים להתאים אישית את ברירת המחדל של הדפדפן לפי הצורך.
  • השתמש בתכונות $font-family-base, $font-size-base, ו $line-height-baseכבסיס הטיפוגרפי שלנו מיושם על ה <body>.
  • הגדר את צבע הקישור הגלובלי באמצעות $link-colorוהחל קו תחתון של קישור רק ב- :hover.
  • השתמש $body-bgכדי להגדיר a background-colorעל <body>( #fffכברירת מחדל).

ניתן למצוא סגנונות אלה בתוך _reboot.scss, והמשתנים הגלובליים מוגדרים ב- _variables.scss. הקפד להגדיר $font-size-base.rem

כותרות

כל כותרות ה-HTML, <h1>דרך <h6>, זמינות.

כּוֹתֶרֶת דוגמא

<h1></h1>

h1. כותרת אתחול

<h2></h2>

h2. כותרת אתחול

<h3></h3>

h3. כותרת אתחול

<h4></h4>

h4. כותרת אתחול

<h5></h5>

h5. כותרת אתחול

<h6></h6>

h6. כותרת אתחול
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</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.

כותרת תצוגה מפוארת עם טקסט משני דהוי

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

הצג כותרות

רכיבי כותרת מסורתיים נועדו לעבוד בצורה הטובה ביותר בתוכן הדף שלך. כאשר אתה צריך כותרת לבלוט, שקול להשתמש בכותרת תצוגה - סגנון כותרת גדול יותר, קצת יותר דעתני. זכור כי כותרות אלו אינן רספונסיביות כברירת מחדל, אך ניתן להפעיל גדלי גופנים רספונסיביים .

תצוגה 1
תצוגה 2
תצוגה 3
תצוגה 4
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

עוֹפֶרֶת

הבלוט פסקה על ידי הוספת .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>

בשורה

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
<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>

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.
<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>

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 שלו .