טיפּאָגראַפי
דאַקיומענטיישאַן און ביישפילן פֿאַר באָאָטסטראַפּ טיפּאָגראַפי, אַרייַנגערעכנט גלאבאלע סעטטינגס, כעדינגז, גוף טעקסט, רשימות און מער.
גלאבאלע סעטטינגס
Bootstrap שטעלט יקערדיק גלאבאלע אַרויסווייַזן, טיפּאָגראַפי און לינק סטיילז. ווען מער קאָנטראָל איז דארף, טשעק די טעקסטשאַוואַל נוצן קלאסן .
- ניצן אַ געבוירן שריפֿט אָנלייגן וואָס סאַלעקץ די בעסטער
font-family
פֿאַר יעדער אַס און מיטל. - פֿאַר אַ מער ינקלוסיוו און צוטריטלעך טיפּ וואָג, מיר נוצן דעם בלעטערער ס פעליקייַט וואָרצל
font-size
(טיפּיקלי 16 פּקס) אַזוי וויזאַטערז קענען קאַסטאַמייז זייער בלעטערער דיפאָלץ ווי דארף. - ניצן די
$font-family-base
,$font-size-base
, און$line-height-base
אַטריביוץ ווי אונדזער טיפּאָגראַפיק באַזע איז געווענדט צו די<body>
. - שטעלן די גלאבאלע לינק קאָליר דורך
$link-color
און צולייגן לינק אַנדערליינז בלויז אויף:hover
. - ניצן
$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. באָאָטסטראַפּ כעדינג
<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
.
דאָס איז אַ הויפּט פּאַראַגראַף. עס שטייט אויס פון רעגולער פּאַראַגראַפס.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</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>
איז מערסטנס פֿאַר קול, טעכניש טערמינען, עטק.
טעקסט יוטילאַטיז
טוישן טעקסט אַליינמאַנט, יבערמאַכן, סטיל, וואָג און קאָליר מיט אונדזער טעקסט יוטילאַטיז און קאָליר יוטילאַטיז .
אַבריווייישאַנז
סטיילייזד ימפּלאַמענטיישאַן פון 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 ווי די ציטירן.
א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
נאָמען אַ מקור
לייג אַ <footer class="blockquote-footer">
צו ידענטיפיצירן די מקור. ייַנוויקלען די נאָמען פון די מקור אַרבעט אין <cite>
.
א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
אַליינמאַנט
ניצן טעקסט יוטילאַטיז ווי דארף צו טוישן די אַליינמאַנט פון דיין בלאַקקוואָטע.
א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
רשימות
ונסטיילד
אַראָפּנעמען די פעליקייַט list-style
און לינקס גרענעץ אויף רשימה זאכן (בלויז קינדער). דאָס איז בלויז אַפּלייז צו גלייך קינדער רשימה ייטאַמז , טייַטש איר וועט אויך דאַרפֿן צו לייגן די קלאַס פֿאַר קיין נעסטעד רשימות.
- דאָס איז אַ רשימה.
- עס זעט אויס גאָר אַנסטיילד.
- סטראַקטשעראַלי, עס איז נאָך אַ רשימה.
- אָבער, דעם נוסח אַפּלייז בלויז צו באַלדיק קינד עלעמענטן.
- ליסטעד רשימה:
- זענען אַנאַפעקטיד דורך דעם סטיל
- וועט נאך ווייזן א קויל
- און האָבן צונעמען לינקס גרענעץ
- דאָס קען נאָך זיין נוציק אין עטלעכע סיטואַטיאָנס.
<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
.
- דאָס איז אַ רשימה נומער.
- און אן אנדער איינער.
- אָבער זיי זענען געוויזן אין שורה.
<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
קלאַס צו טרונקייט די טעקסט מיט אַן עליפּסיס.
- באַשרייַבונג רשימות
- א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
- טערמין
-
דעפֿיניציע פֿאַר דעם טערמין.
און עטלעכע מער אָרטהאָלדער דעפֿיניציע טעקסט.
- אן אנדער טערמין
- די דעפֿיניציע איז קורץ, אַזוי קיין עקסטרע פּאַראַגראַפס אָדער עפּעס.
- טרונקייטיד טערמין איז טרונקייטיד
- דאָס קען זיין נוציק ווען די פּלאַץ איז ענג. מוסיף אַן עלליפּסיס אין די סוף.
- נעסטינג
-
- נעסטעד דעפֿיניציע רשימה
- איך געהערט איר ווי דעפֿיניציע רשימות. לאָזן מיר שטעלן אַ דעפֿיניציע רשימה אין דיין דעפֿיניציע רשימה.
<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>
אָפּרופיק שריפֿט סיזעס
זינט וו4.3.0, באָאָטסטראַפּ שיפּס מיט די אָפּציע צו געבן אָפּרופיק שריפֿט סיזעס, אַלאַוינג טעקסט צו וואָג מער געוויינטלעך אַריבער מיטל און וויופּאָרט סיזעס. RFS קענען זיין ענייבאַלד דורך טשאַנגינג די $enable-responsive-font-sizes
Sass בייַטעוודיק צו true
און ריקאָמפּיילינג Bootstrap.
צו שטיצן RFS , מיר נוצן אַ Sass מיקסין צו פאַרבייַטן אונדזער נאָרמאַל font-size
פּראָפּערטיעס. אָפּרופיק שריפֿט סיזעס וועט זיין קאַמפּיילד אין calc()
פאַנגקשאַנז מיט אַ מישן פון rem
און וויופּאָרט וניץ צו געבן די אָפּרופיק סקיילינג נאַטור. מער וועגן RFS און זיין קאַנפיגיעריישאַן קענען זיין געפֿונען אויף זיין GitHub ריפּאַזאַטאָרי .