טיפוגרפיה

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

בעמוד זה

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

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

השתמש בערימת גופנים מקורית שבוחרת את הטוב ביותר font-familyעבור כל מערכת הפעלה ומכשיר.
לקבלת סולם סוגים כולל ונגיש יותר, אנו משתמשים בשורש ברירת המחדל של הדפדפן font-size(בדרך כלל 16 פיקסלים) כך שמבקרים יכולים להתאים אישית את ברירת המחדל של הדפדפן לפי הצורך.
השתמש בתכונות $font-family-base, $font-size-base, ו $line-height-baseכבסיס הטיפוגרפי שלנו מיושם על ה <body>.
הגדר את צבע הקישור הגלובלי באמצעות $link-color.
השתמש $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. כותרת אתחול

html

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

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

html

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

הצג כותרות

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

תצוגה 1

תצוגה 2

תצוגה 3

תצוגה 4

תצוגה 5

תצוגה 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

כותרות התצוגה מוגדרות באמצעות $display-font-sizesמפת Sass ושני משתנים, $display-font-weightו- $display-line-height.

כותרות התצוגה ניתנות להתאמה אישית באמצעות שני משתנים, $display-font-familyו- $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

עוֹפֶרֶת

הבלוט פסקה על ידי הוספת .lead.

זוהי פסקה מובילה. זה בולט מפסקאות רגילות.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

רכיבי טקסט מוטבעים

עיצוב עבור רכיבי HTML5 מוטבעים נפוצים.

אתה יכול להשתמש בתג סימון כדישִׂיאטֶקסט.

~~שורת טקסט זו אמורה להתייחס כטקסט שנמחק.~~

~~שורת טקסט זו אמורה להתייחס כלא מדויקת עוד.~~

שורת טקסט זו אמורה להתייחס כתוספת למסמך.

שורת טקסט זו תוצג כמסומן בקו תחתון.

שורת טקסט זו אמורה להתייחס כאותיות קטנות.

שורה זו מוצגת כטקסט מודגש.

שורה זו מוצגת כטקסט נטוי.

html

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

היזהר שיש להשתמש בתגים אלה למטרות סמנטיות:

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

אם אתה רוצה לעצב את הטקסט שלך, עליך להשתמש במחלקות הבאות במקום זאת:

.markיחיל את אותם סגנונות כמו .
.smallיחיל את אותם סגנונות כמו .
.text-decoration-underlineיחיל את אותם סגנונות כמו .
.text-decoration-line-throughיחיל את אותם סגנונות כמו <s>.

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

כלי עזר לטקסט

שנה יישור טקסט, טרנספורמציה, סגנון, משקל, גובה קו, עיטור וצבע עם כלי העזר שלנו לטקסט ולצבע .

קיצורי מילים

הטמעה מסוגננת של <abbr>אלמנט HTML עבור קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת ברחף. לקיצורים יש קו תחתון ברירת מחדל ומקבלים סמן עזרה כדי לספק הקשר נוסף על ריחוף ולמשתמשים בטכנולוגיות מסייעות.

הוסף .initialismלקיצור עבור גודל גופן מעט קטן יותר.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

ציטוטים בלוק

לציטוט בלוקים של תוכן ממקור אחר בתוך המסמך שלך. עטוף <blockquote class="blockquote">סביב כל HTML בתור הציטוט.

ציטוט ידוע, הכלול באלמנט blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

מתן שם למקור

מפרט ה-HTML דורש שהייחוס של ציטוטים בלוק ימוקם מחוץ ל- <blockquote>. בעת מתן ייחוס, עטוף את שלך <blockquote>ב-a <figure>והשתמש <figcaption>ברכיב או ברמת בלוק (למשל, ) עם .blockquote-footerהכיתה. הקפד לעטוף גם את שם עבודת המקור <cite>.

ציטוט ידוע, הכלול באלמנט blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

יישור

השתמש בכלי עזר לטקסט לפי הצורך כדי לשנות את היישור של הציטוט שלך.

ציטוט ידוע, הכלול באלמנט blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

ציטוט ידוע, הכלול באלמנט blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

רשימות

לא מעוצב

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

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

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

בשורה

הסר את התבליטים של רשימה והחל קצת אור marginעם שילוב של שתי מחלקות, .list-inlineו- .list-inline-item.

זהו פריט רשימה.
ועוד אחד.
אבל הם מוצגים בשורה.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

יישור רשימת תיאורים

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

רשימות תיאור

רשימת תיאורים מושלמת להגדרת מונחים.

טווח

הגדרה למונח.

ועוד קצת טקסט הגדרת מציין מיקום.

עוד מונח

ההגדרה הזו קצרה, אז אין פסקאות נוספות או משהו.

מונח קטוע קטוע

זה יכול להיות שימושי כאשר המקום מצומצם. מוסיף אליפסיס בסוף.

קינון

רשימת הגדרות מקוננים: שמעתי שאתה אוהב רשימות הגדרות. תן לי לשים רשימת הגדרות בתוך רשימת ההגדרות שלך.

html

<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

גדלי גופנים רספונסיביים

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

סאס

משתנים

לכותרות יש כמה משתנים ייעודיים לשינוי גודל ומרווח.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

לרכיבי טיפוגרפיה שונים המכוסים כאן וב- Reboot יש גם משתנים ייעודיים.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

מיקסינס

אין מיקסים ייעודיים לטיפוגרפיה, אבל Bootstrap עושה שימוש בגודל גופן רספונסיבי (RFS) .