טיפּאָגראַפי

דאַקיומענטיישאַן און ביישפילן פֿאַר באָאָטסטראַפּ טיפּאָגראַפי, אַרייַנגערעכנט גלאבאלע סעטטינגס, כעדינגז, גוף טעקסט, רשימות און מער.

אויף דעם בלאַט

גלאבאלע סעטטינגס

Bootstrap שטעלט יקערדיק גלאבאלע אַרויסווייַזן, טיפּאָגראַפי און לינק סטיילז. ווען מער קאָנטראָל איז דארף, טשעק די טעקסטשאַוואַל נוצן קלאסן .

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

טעקסט יוטילאַטיז

טוישן טעקסט אַליינמאַנט, יבערמאַכן, סטיל, וואָג, שורה-הייך, באַפּוצונג און קאָליר מיט אונדזער טעקסט יוטילאַטיז און קאָליר יוטילאַטיז .

אַבריווייישאַנז

סטיילייזד ימפּלאַמענטיישאַן פון HTML ס <abbr>עלעמענט פֿאַר אַבריווייישאַנז און אַקראַנימז צו ווייַזן די יקספּאַנדיד ווערסיע אויף האָווער. אַבריווייישאַנז האָבן אַ פעליקייַט אַנדערליין און באַקומען אַ הילף לויפֿער צו צושטעלן נאָך קאָנטעקסט אויף האָווער און צו ניצערס פון אַסיסטיוו טעקנאַלאַדזשיז.

לייג .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 ווי די ציטירן.

א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.

HTML

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

נאָמען אַ מקור

די HTML ספּעק ריקווייערז אַז בלאַקקוואָטע אַטריביוץ זאָל זיין געשטעלט אַרויס די <blockquote>. ווען איר צושטעלן אַטריביושאַן, ייַנוויקלען דיין <blockquote>אין אַ <figure>און נוצן אַ <figcaption>אָדער אַ בלאָק מדרגה עלעמענט (למשל, ) מיט די .blockquote-footerקלאַס. זייט זיכער צו ייַנוויקלען די נאָמען פון די מקור אַרבעט <cite>אויך.

א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.

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>

אַליינמאַנט

ניצן טעקסט יוטילאַטיז ווי דארף צו טוישן די אַליינמאַנט פון דיין בלאַקקוואָטע.

א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.

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>

א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.

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;

פאַרשידן טיפּאָגראַפי עלעמענטן באדעקט דאָ און אין רעבאָאָט אויך האָבן דעדאַקייטאַד וועריאַבאַלז.

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