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

HTML5 דאָקטיפּע

Bootstrap ניצט זיכער HTML עלעמענטן און CSS פּראָפּערטיעס וואָס דאַרפן די נוצן פון HTML5 דאָקטיפּע. אַרייַננעמען עס אין די אָנהייב פון אַלע דיין פּראַדזשעקס.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

מאָביל ערשטער

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

צו ענשור געהעריק רענדערינג און פאַרבינדן זומינג, לייגן די Viewport מעטאַ קוויטל צו דיין <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

איר קענען דיסייבאַל זומינג קייפּאַבילאַטיז אויף רירעוודיק דעוויסעס דורך אַדינג user-scalable=noצו די וויופּאָרט מעטאַ קוויטל. דאָס דיסייבאַלז זומינג, טייַטש די יוזערז קענען בלויז מעגילע, און די רעזולטאַטן אין דיין פּלאַץ פילן אַ ביסל מער ווי אַ געבוירן אַפּלאַקיישאַן. קוילעלדיק, מיר טאָן ניט רעקאָמענדירן דעם אויף יעדער פּלאַץ, אַזוי נוצן וואָרענען!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

טיפּאָגראַפי און לינקס

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

שטעלן background-color: #fff;אויף דיbody
ניצן די @font-family-base, @font-size-base, און @line-height-baseאַטריביוץ ווי אונדזער טיפּאָגראַפיק באַזע
שטעלן די גלאבאלע לינק קאָליר דורך @link-colorאון צולייגן לינק אַנדערליינז בלויז אויף:hover

די סטיילז קענען זיין געפֿונען ין scaffolding.less.

נאָרמאַלייז.css

פֿאַר ימפּרוווד קרייַז-בלעטערער רענדערינג, מיר נוצן Normalize.css , אַ פּרויעקט דורך Nicolas Gallagher און Jonathan Neal .

קאַנטיינערז

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

ניצן .containerפֿאַר אַ אָפּרופיק קאַנטיינער מיט פאַרפעסטיקט ברייט.

<div class="container">
  ...
</div>

ניצן .container-fluidפֿאַר אַ פול-ברייט קאַנטיינער, ספּאַנינג די גאנצע ברייט פון דיין וויופּאָרט.

<div class="container-fluid">
  ...
</div>

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

הקדמה

גריד סיסטעמען זענען געניצט פֿאַר שאפן בלאַט לייאַוץ דורך אַ סעריע פון ראָוז און שפאלטן וואָס הויז דיין אינהאַלט. ווי די Bootstrap גריד סיסטעם אַרבעט:

ראָוז מוזן זיין געשטעלט אין אַ .container(פאַרפעסטיקט-ברייט) אָדער .container-fluid(פול-ברייט) פֿאַר געהעריק אַליינמאַנט און וואַטן.
ניצן ראָוז צו שאַפֿן האָריזאָנטאַל גרופּעס פון שפאלטן.
אינהאַלט זאָל זיין געשטעלט אין שפאלטן, און בלויז שפאלטן קען זיין באַלדיק קינדער פון ראָוז.
פּרעדעפינעד גריד קלאסן ווי .rowאון .col-xs-4זענען בנימצא פֿאַר געשווינד מאכן גריד לייאַוץ. ווייניקער מיקסינס קענען אויך זיין געניצט פֿאַר מער סעמאַנטיק לייאַוץ.
שפאלטן שאַפֿן גוטערז (גאַפּס צווישן זייַל אינהאַלט) דורך padding. אַז וואַטן איז אָפסעט אין ראָוז פֿאַר דער ערשטער און לעצטע זייַל דורך נעגאַטיוו גרענעץ אויף .rows.
דער נעגאַטיוו גרענעץ איז וואָס די ביישפילן אונטן זענען אַוטדאַנטיד. עס איז אַזוי אַז אינהאַלט אין גריד שפאלטן איז ליינד מיט ניט-גריד אינהאַלט.
גריד שפאלטן זענען באשאפן דורך ספּעציפיצירן די נומער פון צוועלף פאַראַנען שפאלטן איר ווילן צו שפּאַן. פֿאַר בייַשפּיל, דריי גלייַך שפאלטן וואָלט נוצן דריי .col-xs-4.
אויב מער ווי 12 שפאלטן זענען געשטעלט אין אַ איין רודערן, יעדער גרופּע פון עקסטרע שפאלטן וועט, ווי איין אַפּאַראַט, ייַנוויקלען אויף אַ נייַע שורה.
גריד קלאסן אַפּלייז צו דעוויסעס מיט פאַרשטעלן ווידטס גרעסער ווי אָדער גלייַך צו די ברייקפּוינט סיזעס, און אָווועררייד גריד קלאסן טאַרגעטעד אויף קלענערער דעוויסעס. דערפֿאַר, למשל, אַפּלייינג קיין .col-md-*קלאַס צו אַן עלעמענט וועט נישט בלויז ווירקן זייַן סטילינג אויף מיטל דעוויסעס, אָבער אויך אויף גרויס דעוויסעס אויב אַ .col-lg-*קלאַס איז נישט פאָרשטעלן.

קוק צו די ביישפילן פֿאַר אַפּלייינג די פּרינסאַפּאַלז צו דיין קאָד.

מידיאַ קוויריז

מיר נוצן די פאלגענדע מידיאַ קוויריז אין אונדזער ווייניקער טעקעס צו שאַפֿן די שליסל ברייקפּאָינץ אין אונדזער גריד סיסטעם.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

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

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

גריד אָפּציעס

זען ווי אַספּעקץ פון די Bootstrap גריד סיסטעם אַרבעט אויף קייפל דעוויסעס מיט אַ האַנטיק טיש.

	עקסטרע קליין דעוויסעס פאָנעס (<768 פּקס)	קליין דעוויסעס טאַבלעץ (≥768 פּקס)	מיטל דעוויסעס דעסקטאָפּס (≥ 992 פּקס)	דעסקטאַפּס פֿאַר גרויס דעוויסעס (≥ 1200 פּקס)
גריד נאַטור	האָריזאָנטאַל אין אַלע צייטן	קאַלאַפּסט צו אָנהייבן, האָריזאָנטאַל אויבן ברייקפּאָינץ
קאַנטיינער ברייט	קיין (אוטאָ)	750 פּקס	970 פּקס	1170 פּקס
קלאַס פּרעפיקס	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# פון שפאלטן	12
זייַל ברייט	אַוטאָ	~62 פּקס	~81 פּקס	~97 פּקס
גוטטער ברייט	30 פּקס (15 פּקס אויף יעדער זייַט פון אַ זייַל)
נעסטאַבלע	יא
אָפסעץ	יא
זייַל אָרדערינג	יא

בייַשפּיל: סטאַקט-צו-האָריזאָנטאַל

ניצן אַ איין גאַנג פון .col-md-*גריד קלאסן, איר קענען מאַכן אַ יקערדיק גריד סיסטעם וואָס סטאַרץ סטאַקט אויף רירעוודיק דעוויסעס און טאַבלעט דעוויסעס (די עקסטרע קליין צו קליין קייט) איידער איר ווערן האָריזאָנטאַל אויף דעסקטאַפּ (מיטל) דעוויסעס. שטעלן גריד שפאלטן אין קיין .row.

.קאָל-מד-1

.קאָל-מד-8

.קאָל-מד-4

.קאָל-מד-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

בייַשפּיל: פליסיק קאַנטיינער

ווענדן קיין פאַרפעסטיקט-ברייט גריד אויסלייג אין אַ פול-ברייט אויסלייג דורך טשאַנגינג דיין ויסווייניקסט .containerצו .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

בייַשפּיל: מאָביל און דעסקטאַפּ

צי ניט וועלן דיין שפאלטן צו פשוט אָנלייגן אין קלענערער דעוויסעס? ניצן די עקסטרע קליין און מיטל מיטל גריד קלאסן דורך אַדינג .col-xs-* .col-md-*צו דיין שפאלטן. זען די ביישפּיל אונטן פֿאַר אַ בעסער געדאַנק פון ווי אַלץ אַרבעט.

.קאָל-קסס-12 .קאָל-מד-8

.קאָל-קסס-6 .קאָל-מד-4

.קאָל-קסס-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

בייַשפּיל: מאָביל, טאַבלעט, דעסקטאַפּ

בויען אויף די פריערדיקע ביישפּיל דורך קריייטינג אפילו מער דינאַמיש און שטאַרק לייאַוץ מיט טאַבלעט .col-sm-*קלאסן.

.קאָל-קסס-12 .קאָל-סמ-6 .קאָל-מד-8

.קאָל-קסס-6 .קאָל-מד-4

.קאָל-קסס-6 .קאָל-סמ-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

בייַשפּיל: זייַל ראַפּינג

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

.קאָל-קסס-9

.קאָל-קסס-4
זינט 9 + 4 = 13> 12, דעם 4-זייַל-ברייט דייוו איז אלנגעוויקלט אויף אַ נייַע שורה ווי איין קאַנטיגיואַס אַפּאַראַט.

.col-xs-6
סאַבסאַקוואַנט שפאלטן פאָרזעצן צוזאמען די נייַע שורה.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

אָפּרופיק זייַל ריסעץ

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

.col-xs-6 .col-sm-3
רעסיזע דיין וויופּאָרט אָדער טשעק עס אויף דיין טעלעפאָן פֿאַר אַ בייַשפּיל.

.קאָל-קסס-6 .קאָל-סמ-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

אָפסעטטינג שפאלטן

מאַך שפאלטן צו די רעכט ניצן .col-md-offset-*קלאסן. די קלאסן פאַרגרעסערן די לינקס גרענעץ פון אַ זייַל דורך *שפאלטן. פֿאַר בייַשפּיל, .col-md-offset-4באוועגט .col-md-4איבער פיר שפאלטן.

.קאָל-מד-4

.קאָל-מד-4 .קאָל-מד-אָפסעט-4

.קאָל-מד-3 .קאָל-מד-אָפסעט-3

.קאָל-מד-6 .קאָל-מד-אָפסעט-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

איר קענען אויך אָווועררייד אָפסעץ פון נידעריקער גריד טיערס מיט .col-*-offset-0קלאסן.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

נעסטינג שפאלטן

צו נעסט דיין אינהאַלט מיט די פעליקייַט גריד, לייגן אַ נייַע .rowאון גאַנג פון .col-sm-*שפאלטן אין אַ יגזיסטינג .col-sm-*זייַל. נעסטעד ראָוז זאָל אַרייַננעמען אַ סכום פון שפאלטן וואָס לייגן אַרויף צו 12 אָדער ווייניקערע (עס איז ניט פארלאנגט אַז איר נוצן אַלע 12 בנימצא שפאלטן).

מדרגה 1: .קאָל-סמ-9

מדרגה 2: .קאָל-קסס-8 .קאָל-סמ-6

מדרגה 2: .קאָל-קסס-4 .קאָל-סמ-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

זייַל אָרדערינג

לייכט טוישן די סדר פון אונדזער געבויט-אין גריד שפאלטן מיט .col-md-push-*און .col-md-pull-*מאָדיפיער קלאסן.

.קאָל-מד-9 .קאָל-מד-שטופּ-3

.קאָל-מד-3 .קאָל-מד-ציען-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ווייניקער מיקסינס און וועריאַבאַלז

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

וועריאַבאַלז

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

מיקסינס

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

בייַשפּיל באַניץ

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

העאַדינגס

כל HTML כעדינגז, <h1>דורך <h6>, זענען בנימצא. .h1דורך .h6קלאסן זענען אויך בנימצא, פֿאַר ווען איר ווילן צו גלייַכן די שריפֿט סטילינג פון אַ כעדינג אָבער נאָך ווילן דיין טעקסט צו זיין געוויזן ינלינע.

h1. באָאָטסטראַפּ כעדינג	Semibold 36px
h2. באָאָטסטראַפּ כעדינג	Semibold 30px
h3. באָאָטסטראַפּ כעדינג	Semibold 24px
h4. באָאָטסטראַפּ כעדינג	Semibold 18px
h5. באָאָטסטראַפּ כעדינג	Semibold 14px
h6. באָאָטסטראַפּ כעדינג	Semibold 12px

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

שאַפֿן לייטער, צווייטיק טעקסט אין קיין כעדינג מיט אַ דזשאַנעריק <small>קוויטל אָדער די .smallקלאַס.

h1. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h2. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h3. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h4. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h5. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h6. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

גוף קאָפּיע

די גלאבאלע פעליקייַט פון Bootstrap font-sizeאיז 14 פּקס , מיט אַ line-heightפון 1.428 . דאָס איז געווענדט צו די <body>און אַלע פּאַראַגראַפס. אין אַדישאַן, <p>(פּאַראַגראַפס) באַקומען אַ דנאָ גרענעץ פון האַלב פון זייער קאַמפּיוטאַד שורה-הייך (10 פּקס דורך פעליקייַט).

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

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

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

<p>...</p>

קאָפּיע פון די גוף

מאַכן אַ פּאַראַגראַף שטיין אויס דורך אַדינג .lead.

Vivamus sagittis lacus vel Auge Laoreet Rutrum Faucibus Dolor Actor. Duis mollis, est noncommodo luctus.

<p class="lead">...</p>

געבויט מיט ווייניקער

די טיפּאָגראַפיק וואָג איז באזירט אויף צוויי ווייניקער וועריאַבאַלז אין וועריאַבאַלז.לעסס : @font-size-baseאון @line-height-base. דער ערשטער איז די באַזע שריפֿט גרייס געניצט איבער און די רגע איז די באַזע שורה-הייך. מיר נוצן די וועריאַבאַלז און עטלעכע פּשוט מאַט צו מאַכן די מאַרדזשאַנז, פּאַדדינגז און שורה-כייץ פון אַלע אונדזער טיפּ און מער. קאַסטאַמייז זיי און באָאָטסטראַפּ אַדאַפּט זיך.

ינלינע טעקסט עלעמענטן

אנגעצייכנט טעקסט

פֿאַר כיילייטינג אַ גאַנג פון טעקסט רעכט צו זיין שייכות אין אן אנדער קאָנטעקסט, נוצן די <mark>קוויטל.

איר קענען נוצן די מאַרק קוויטל צוהויכפּונקטטעקסט.

You can use the mark tag to <mark>highlight</mark> text.

אויסגעמעקט טעקסט

פֿאַר ינדאַקייטינג בלאַקס פון טעקסט וואָס זענען אויסגעמעקט, נוצן די <del>קוויטל.

~~די שורה פון טעקסט איז מענט צו זיין באהאנדלט ווי אויסגעמעקט טעקסט.~~

<del>This line of text is meant to be treated as deleted text.</del>

סטרייקינג טעקסט

פֿאַר ינדאַקייטינג בלאַקס פון טעקסט וואָס זענען ניט מער באַטייַטיק, נוצן די <s>קוויטל.

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

<s>This line of text is meant to be treated as no longer accurate.</s>

אריינגעלייגט טעקסט

פֿאַר ינדאַקייטינג אַדישאַנז צו דעם דאָקומענט, נוצן די <ins>קוויטל.

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

אונטערליינד טעקסט

צו אַנדערליין טעקסט, נוצן די <u>קוויטל.

די שורה פון טעקסט וועט ווייַזן ווי אַנדערליינד

<u>This line of text will render as underlined</u>

ניצן HTML ס פעליקייַט טראָפּ טאַגס מיט לייטווייט סטיילז.

קליין טעקסט

פֿאַר די-עמפאַסייזינג ינלינע אָדער בלאַקס פון טעקסט, נוצן די <small>קוויטל צו שטעלן טעקסט אין 85% די גרייס פון דער פאָטער. כעדינג עלעמענטן באַקומען זייער אייגן font-sizeפֿאַר נעסטעד <small>עלעמענטן.

איר קענט אַלטערנאַטיוועלי נוצן אַן ינלינע עלעמענט מיט .smallאין פּלאַץ פון קיין <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

דרייסט

צו ונטערשטרייַכן אַ טעקסט סניפּאַט מיט אַ כעוויער שריפֿט וואָג.

די פאלגענדע סניפּאַט פון טעקסט איז רענדערד ווי דרייסט טעקסט .

<strong>rendered as bold text</strong>

ייטאַליקס

פֿאַר עמפאַסייזינג אַ סניפּאַט פון טעקסט מיט ייטאַליקס.

די פאלגענדע סניפּאַט פון טעקסט איז רענדערד ווי ייטאַלייזד טעקסט .

<em>rendered as italicized text</em>

אַלטערנאַטיווע עלעמענטן

פילן פריי צו נוצן <b>און <i>אין HTML5. <b>איז מענט צו הויכפּונקט ווערטער אָדער פראַסעס אָן קאַנווייינג נאָך וויכטיקייט בשעת <i>איז מערסטנס פֿאַר קול, טעכניש טערמינען, עטק.

אַליינמאַנט קלאסן

לייכט ריאַלייז טעקסט צו קאַמפּאָונאַנץ מיט טעקסט אַליינמאַנט קלאסן.

לינקס אַליינד טעקסט.

צענטער אַליינד טעקסט.

רעכט אַליינד טעקסט.

גערעכטפארטיקט טעקסט.

קיין ייַנוויקלען טעקסט.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

טראַנספאָרמאַציע קלאסן

יבערמאַכן טעקסט אין קאַמפּאָונאַנץ מיט טעקסט קאַפּיטאַליזיישאַן קלאסן.

נידעריקער טעקסט.

הויכער טעקסט.

קאַפּיטאַלייזד טעקסט.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

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

יקערדיק אַבריווייישאַן

אַן אַבריווייישאַן פון דעם וואָרט אַטריביוט איז attr .

<abbr title="attribute">attr</abbr>

איניציאליזם

לייג .initialismצו אַ אַבריווייישאַן פֿאַר אַ ביסל קלענערער שריפֿט גרייס.

HTML איז דער בעסטער זאַך זינט סלייסט ברויט.

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

ווענדט זיך

פאָרשטעלן קאָנטאַקט אינפֿאָרמאַציע פֿאַר די ניראַסט אָוועס אָדער די גאנצע גוף פון אַרבעט. ופהיטן פאָרמאַטטינג דורך ענדיקן אַלע שורות מיט <br>.

טוויטטער, ינק.
1355 מאַרקעט סטריט, סוויט 900
סאַן פֿראַנסיסקאָ, CA 94103
פּ: (123) 456-7890

גאַנץ נאָמען
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

בלאָק קוואָטעס

פֿאַר ציטירן בלאַקס פון אינהאַלט פון אן אנדער מקור אין דיין דאָקומענט.

פעליקייַט בלאַקקוואָטע

ייַנוויקלען <blockquote>קיין HTML ווי די ציטירן. פֿאַר גלייך קוואָטעס, מיר רעקאָמענדירן אַ <p>.

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָזוערע וועט זיין אַן אַנטי.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

בלאַקקוואָטע אָפּציעס

סטייל און אינהאַלט ענדערונגען פֿאַר פּשוט ווערייישאַנז אויף אַ נאָרמאַל <blockquote>.

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

לייג אַ <footer>צו ידענטיפיצירן די מקור. ייַנוויקלען די נאָמען פון די מקור אַרבעט אין <cite>.

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָזוערע וועט זיין אַן אַנטי.

איינער באַרימט אין מקור טיטל

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

אַלטערנאַטיווע דיספּלייז

לייג .blockquote-reverseצו פֿאַר אַ בלאַקקוואָטע מיט רעכט-אַליינד אינהאַלט.

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָזוערע וועט זיין אַן אַנטי.

איינער באַרימט אין מקור טיטל

<blockquote class="blockquote-reverse">
  ...
</blockquote>

רשימות

אַנאָרדערד

א רשימה פון זאכן אין וואָס די סדר טוט נישט בפירוש ענין.

לאָמיר פּסום דאָלאָר זיצן אַמעט
קאָנסעקטעטור אַדאַפּיססינג עליט
גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
פאַסיליטיז אין פּריטיום ניסל אַלקוועט
נולל וואָלוטפּאַט אַליקוום וועליט
- Phasellus iaculis neque
- פּורוס סאָדאַלעס ולטריסיעס
- וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
אַנעאַן זיצן אַמעט עראַט נונק
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

באפוילן

א רשימה פון זאכן אין וואָס די סדר טוט בפירוש ענין.

לאָמיר פּסום דאָלאָר זיצן אַמעט
קאָנסעקטעטור אַדאַפּיססינג עליט
גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
פאַסיליטיז אין פּריטיום ניסל אַלקוועט
נולל וואָלוטפּאַט אַליקוום וועליט
Faucibus porta lacus fringilla vel
אַנעאַן זיצן אַמעט עראַט נונק
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

ונסטיילד

אַראָפּנעמען די פעליקייַט list-styleאון לינקס גרענעץ אויף רשימה זאכן (בלויז קינדער). דאָס איז בלויז אַפּלייז צו גלייך קינדער רשימה ייטאַמז , טייַטש איר וועט אויך דאַרפֿן צו לייגן די קלאַס פֿאַר קיין נעסטעד רשימות.

לאָמיר פּסום דאָלאָר זיצן אַמעט
קאָנסעקטעטור אַדאַפּיססינג עליט
גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
פאַסיליטיז אין פּריטיום ניסל אַלקוועט
נולל וואָלוטפּאַט אַליקוום וועליט
- Phasellus iaculis neque
- פּורוס סאָדאַלעס ולטריסיעס
- וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
אַנעאַן זיצן אַמעט עראַט נונק
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

אין ליניע

שטעלן אַלע רשימה זאכן אויף אַ איין שורה מיט display: inline-block;און עטלעכע ליכט וואַטן.

לייענען אויף
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

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

א רשימה פון טערמינען מיט זייער פֿאַרבונדן דיסקריפּשאַנז.

באַשרייַבונג רשימות: א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
Euismod: וועסטיבולום id ligula porta felis euismod semper eget lacinia odio Sem nec elit.; דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.
Malesuada porta: עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

האָריזאָנטאַל באַשרייַבונג

מאַכן טערמינען און דיסקריפּשאַנז אין <dl>שורה אַרויף זייַט-ביי-זייַט. סטאַרץ אַוועק סטאַקט ווי פעליקייַט <dl>s, אָבער ווען די נאַוובאַר יקספּאַנדז, אַזוי טאָן דאָס.

באַשרייַבונג רשימות: א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
Euismod: וועסטיבולום id ligula porta felis euismod semper eget lacinia odio Sem nec elit.; דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.
Malesuada porta: עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.
Felis euismod semper ege lacinia: פוססע דאַפּיבוס, טעללוס אַ היימען קאַמאָודאָו, טאָרטאָר מאַוריס קאַנדימאַנטום ניבה, און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

אַוטאָ-טראַנגקייטינג

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

אין ליניע

ייַנוויקלען ינלינע סניפּפּעץ פון קאָד מיט <code>.

פֿאַר בייַשפּיל, <section>זאָל זיין אלנגעוויקלט ווי ינלינע.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

באַניצער אַרייַנשרייַב

ניצן די <kbd>צו אָנווייַזן אַרייַנשרייַב וואָס איז טיפּיקלי אריין דורך קלאַוויאַטור.

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

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

יקערדיק בלאָק

ניצן <pre>פֿאַר קייפל שורות פון קאָד. זייט זיכער צו אַנטלויפן קיין ווינקל בראַקאַץ אין די קאָד פֿאַר געהעריק רענדערינג.

<p> מוסטער טעקסט דאָ ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

וועריאַבאַלז

פֿאַר ינדאַקייטינג וועריאַבאַלז נוצן די <var>קוויטל.

י = מ רענטגענ + ב

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

מוסטער רעזולטאַט

פֿאַר ינדאַקייטינג בלאַקס מוסטער רעזולטאַט פון אַ פּראָגראַם נוצן די <samp>קוויטל.

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

יקערדיק בייַשפּיל

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

אָפּטיאָנאַל טיש קעפּל.
#	ערשטע נאמען	לעצטע נאמען	נאמען
1	מארק	אָטאָ	@מדאָ
2	יעקב	Thornton	@פעט
3	לערי	די פויגל	@טוויטער

<table class="table">
  ...
</table>

סטרייפּט ראָוז

ניצן .table-stripedצו לייגן זעבראַ-סטריפּינג צו קיין טיש רודערן אין די <tbody>.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

סטרייפּט טישן זענען סטיילד דורך די :nth-childCSS סעלעקטאָר, וואָס איז ניט בנימצא אין Internet Explorer 8.

#	ערשטע נאמען	לעצטע נאמען	נאמען
1	מארק	אָטאָ	@מדאָ
2	יעקב	Thornton	@פעט
3	לערי	די פויגל	@טוויטער

<table class="table table-striped">
  ...
</table>

באָרדערד טיש

לייג .table-borderedפֿאַר געמארקן אויף אַלע זייטן פון די טיש און סעלז.

#	ערשטע נאמען	לעצטע נאמען	נאמען
1	מארק	אָטאָ	@מדאָ
2	יעקב	Thornton	@פעט
3	לערי	די פויגל	@טוויטער

<table class="table table-bordered">
  ...
</table>

האָווער ראָוז

לייג .table-hoverצו געבן אַ האָווער שטאַט אויף טיש ראָוז אין אַ <tbody>.

#	ערשטע נאמען	לעצטע נאמען	נאמען
1	מארק	אָטאָ	@מדאָ
2	יעקב	Thornton	@פעט
3	לערי	די פויגל	@טוויטער

<table class="table table-hover">
  ...
</table>

קאַנדענסט טיש

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

#	ערשטע נאמען	לעצטע נאמען	נאמען
1	מארק	אָטאָ	@מדאָ
2	יעקב	Thornton	@פעט
3	לערי די פויגל		@טוויטער

<table class="table table-condensed">
  ...
</table>

קאָנטעקסטואַל קלאסן

ניצן קאָנטעקסטואַל קלאסן צו קאָלירן טיש ראָוז אָדער יחיד סעלז.

קלאַס	באַשרייַבונג
`.active`	אַפּלייז די האָווער קאָליר צו אַ באַזונדער רודערן אָדער צעל
`.success`	ינדיקייץ אַ מצליח אָדער positive קאַמף
`.info`	ינדיקייץ אַ נייטראַל ינפאָרמאַטיוו ענדערונג אָדער קאַמף
`.warning`	ינדיקייץ אַ ווארענונג וואָס קען דאַרפֿן ופמערקזאַמקייַט
`.danger`	ינדיקייץ אַ געפערלעך אָדער פּאַטענטשאַלי נעגאַטיוו קאַמף

#	זייַל כעדינג	זייַל כעדינג	זייַל כעדינג
1	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
2	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
3	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
4	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
5	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
6	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
7	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
8	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט
9	זייַל אינהאַלט	זייַל אינהאַלט	זייַל אינהאַלט

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש צו אַ טיש רודערן אָדער יחיד צעל בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו ניצערס פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטאַד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (דער קענטיק טעקסט אין די באַטייַטיק טיש רודערן / צעל), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .sr-onlyקלאַס.

אָפּרופיק טישן

שאַפֿן אָפּרופיק טישן דורך ראַפּינג קיין .tableאין .table-responsiveצו מאַכן זיי מעגילע כאָריזאַנטאַלי אויף קליין דעוויסעס (אונטער 768 פּקס). ווען איר זען עפּעס גרעסער ווי 768 פּקס ברייט, איר וועט נישט זען קיין חילוק אין די טישן.

ווערטיקאַל קליפּינג / טראַנגקיישאַן

אָפּרופיק טישן נוצן overflow-y: hidden, וואָס קליפּס אַוועק קיין אינהאַלט וואָס גייט ווייַטער פון די דנאָ אָדער שפּיץ עדזשאַז פון די טיש. אין באַזונדער, דאָס קענען ויסשליסן דראָפּדאָוון מעניוז און אנדערע דריט-פּאַרטיי ווידזשיץ.

פירעפאָקס און פעלדזעץ

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

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

פֿאַר מער אינפֿאָרמאַציע, לייענען דעם Stack Overflow ענטפער .

#	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג
1	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל
2	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל
3	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל

#	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג	טיש כעדינג
1	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל
2	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל	טיש צעל
3	טיש צעל	טיש צעל	טיש צעל	טיש צעל	��יש צעל	טיש צעל

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

יקערדיק בייַשפּיל

יחיד פאָרעם קאָנטראָלס באַקומען אויטאָמאַטיש עטלעכע גלאבאלע סטילינג. אַלע טעקסטשאַוואַל <input>, <textarea>, און <select>עלעמענטן מיט .form-controlזענען באַשטימט צו width: 100%;פעליקייַט. ייַנוויקלען לאַבעלס און קאָנטראָלס .form-groupפֿאַר אָפּטימום ספּייסינג.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

דו זאלסט נישט מישן פאָרעם גרופּעס מיט אַרייַנשרייַב גרופּעס

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

אָנליין פאָרעם

לייג .form-inlineצו דיין פאָרעם (וואָס טוט ניט האָבן צו זיין אַ <form>) פֿאַר לינקס-אַליינד און ינלינע-בלאָק קאָנטראָלס. דאָס אַפּלייז בלויז צו פארמען אין וויופּאָרטס וואָס זענען לפּחות 768 פּקס ברייט.

קען דאַרפן מנהג ווידטס

ינפּוץ און סאַלעקץ זענען width: 100%;געווענדט דורך פעליקייַט אין Bootstrap. אין ינלינע פארמען, מיר באַשטעטיק אַז width: auto;אַזוי קייפל קאָנטראָלס קענען וווינען אויף דער זעלביקער שורה. דעפּענדינג אויף דיין אויסלייג, נאָך מנהג ווידטס קען זיין פארלאנגט.

שטענדיק לייגן לאַבעלס

סקרין לייענער וועט האָבן קאָנפליקט מיט דיין פארמען אויב איר טאָן ניט אַרייַננעמען אַ פירמע פֿאַר יעדער אַרייַנשרייַב. פֿאַר די ינלינע פארמען, איר קענען באַהאַלטן די לאַבעלס ניצן די .sr-onlyקלאַס. עס זענען נאָך אָלטערנאַטיוו מעטהאָדס צו צושטעלן אַ פירמע פֿאַר אַסיסטיוו טעקנאַלאַדזשיז, אַזאַ ווי די aria-label, aria-labelledbyאָדער titleאַטריביוט. אויב גאָרניט פון די איז פאָרשטעלן, די פאַרשטעלן לייענער קענען נוצן דעם placeholderאַטריביוט, אויב עס איז פאָרשטעלן, אָבער טאָן placeholderניט רעקאָמענדירן צו נוצן עס ווי אַ פאַרבייַט פֿאַר אנדערע לייבלינג מעטהאָדס.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

האָריזאָנטאַל פאָרעם

ניצן Bootstrap ס פּרעדעפינעד גריד קלאסן צו ייַנרייען לאַבעלס און גרופּעס פון פאָרעם קאָנטראָלס אין אַ האָריזאָנטאַל אויסלייג דורך אַדינג .form-horizontalצו די פאָרעם (וואָס טוט נישט האָבן צו זיין אַ <form>). טאן אַזוי ענדערונגען .form-groupס צו ביכייוו ווי גריד ראָוז, אַזוי ניט דאַרפֿן פֿאַר .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

שטיצט קאָנטראָלס

ביישפילן פון נאָרמאַל פאָרעם קאָנטראָלס געשטיצט אין אַ בייַשפּיל פאָרעם אויסלייג.

ינפּוץ

מערסט פּראָסט פאָרעם קאָנטראָל, טעקסט-באזירט אַרייַנשרייַב פעלדער. כולל שטיצן פֿאַר אַלע HTML5 טייפּס: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telאון color.

טיפּ דעקלאַראַציע פארלאנגט

ינפּוץ וועט זיין גאָר סטיילד בלויז אויב זיי typeזענען רעכט דערקלערט.

<input type="text" class="form-control" placeholder="Text input">

אַרייַנשרייַב גרופּעס

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

טעקסטאַרעאַ

פאָרעם קאָנטראָל וואָס שטיצט קייפל שורות פון טעקסט. טוישן rowsאַטריביוט ווי נייטיק.

<textarea class="form-control" rows="3"></textarea>

טשעקקבאָקסעס און ראַדיאָס

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

פאַרקריפּלט טשעקקבאָקסעס און ראַדיאָס זענען געשטיצט, אָבער צו צושטעלן אַ "ניט-דערלויבט" לויפֿער אויף האָווער פון די פאָטער <label>, איר וועט דאַרפֿן צו לייגן דעם .disabledקלאַס צו די פאָטער .radio, .radio-inline, .checkbox, אָדער .checkbox-inline.

פעליקייַט (סטאַקט)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ינלינע טשעקקבאָקסעס און ראַדיאָס

ניצן די .checkbox-inlineאָדער .radio-inlineקלאסן אויף אַ סעריע פון טשעקקבאָקסעס אָדער ראַדיאָס פֿאַר קאָנטראָלס וואָס דערשייַנען אויף דער זעלביקער שורה.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

טשעקקבאָקסעס און ראַדיאָס אָן פירמע טעקסט

אויב איר האָט קיין טעקסט אין די <label>, די אַרייַנשרייַב איז פּאַזישאַנד ווי איר וואָלט דערוואַרטן. דערווייַל אַרבעט בלויז אויף ניט-ינלינע טשעקקבאָקסעס און ראַדיאָס. געדענקט צו נאָך צושטעלן עטלעכע פאָרעם פון פירמע פֿאַר אַסיסטיוו טעקנאַלאַדזשיז (פֿאַר בייַשפּיל, ניצן aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

סאַלעקץ

באַמערקונג אַז פילע געבוירן אויסקלייַבן מעניוז - ניימלי אין Safari און קראָום - האָבן ראַונדיד עקן וואָס קענען ניט זיין מאַדאַפייד דורך border-radiusפּראָפּערטיעס.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

פֿאַר <select>קאָנטראָלס מיט די multipleאַטריביוט, קייפל אָפּציעס זענען געוויזן דורך פעליקייַט.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

סטאַטיק קאָנטראָל

ווען איר דאַרפֿן צו שטעלן קלאָר טעקסט ווייַטער צו אַ פאָרעם פירמע אין אַ פאָרעם, נוצן די .form-control-staticקלאַס אויף אַ <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

פאָקוס שטאַט

מיר באַזייַטיקן די פעליקייַט outlineסטיילז אויף עטלעכע פאָרעם קאָנטראָלס און צולייגן אַ box-shadowאין זיין אָרט פֿאַר :focus.

דעמאָ `:focus`שטאַט

דער אויבן בייַשפּיל אַרייַנשרייַב ניצט מנהג סטיילז אין אונדזער דאַקיומענטיישאַן צו באַווייַזן די :focusשטאַט אויף אַ .form-control.

פאַרקריפּלט שטאַט

לייג די disabledבוליאַן אַטריביוט אויף אַן אַרייַנשרייַב צו פאַרמייַדן באַניצער ינטעראַקשאַנז. פאַרקריפּלט ינפּוץ דערשייַנען לייטער און לייגן אַ not-allowedלויפֿער.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

פאַרקריפּלט פיעלדסעץ

לייג די disabledאַטריביוט צו אַ <fieldset>צו דיסייבאַל אַלע די קאָנטראָלס אין <fieldset>אַמאָל.

היטונג וועגן לינק פאַנגקשאַנאַליטי פון`<a>`

דורך פעליקייַט, בראַוזערז וועט מייַכל אַלע געבוירן פאָרעם קאָנטראָלס ( <input>, <select>און <button>עלעמענטן) אין אַ <fieldset disabled>ווי פאַרקריפּלט, פּרעווענטינג ביידע קלאַוויאַטור און מויז ינטעראַקשאַנז אויף זיי. אָבער, אויב דיין פאָרעם אויך כולל <a ... class="btn btn-*">עלעמענטן, די וועט זיין בלויז אַ נוסח פון pointer-events: none. ווי אנגעוויזן אין די אָפּטיילונג וועגן פאַרקריפּלט שטאַט פֿאַר קנעפּלעך (און ספּאַסיפיקלי אין די סאַב-אָפּטיילונג פֿאַר אַנקער עלעמענטן), דעם CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד און איז נישט גאָר געשטיצט אין אָפּעראַ 18 און ווייטער, אָדער אין Internet Explorer 11, און וואַן. ניט פאַרהיטן קלאַוויאַטור יוזערז פון קענען צו פאָקוס אָדער אַקטאַווייט די לינקס. אַזוי צו זיין זיכער, נוצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל אַזאַ פֿאַרבינדונגען.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

בשעת Bootstrap וועט צולייגן די סטיילז אין אַלע בראַוזערז, Internet Explorer 11 און ווייטער טאָן ניט גאָר שטיצן די disabledאַטריביוט אויף אַ <fieldset>. ניצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל די פעלדסעט אין די בראַוזערז.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

לייענ-בלויז שטאַט

לייג די readonlyבוליאַן אַטריביוט אויף אַ אַרייַנשרייַב צו פאַרמייַדן מאָדיפיקאַטיאָן פון די אַרייַנשרייַב ווערט. לייענען-בלויז ינפּוץ דערשייַנען לייטער (פּונקט ווי פאַרקריפּלט ינפּוץ), אָבער האַלטן די נאָרמאַל לויפֿער.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

הילף טעקסט

בלאָק מדרגה הילף טעקסט פֿאַר פאָרעם קאָנטראָלס.

אַססאָסיאַטינג הילף טעקסט מיט פאָרעם קאָנטראָלס

הילף טעקסט זאָל זיין בפירוש פֿאַרבונדן מיט די פאָרעם קאָנטראָל עס שייך צו ניצן די aria-describedbyאַטריביוט. דאָס וועט ענשור אַז אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער - וועט מעלדן דעם הילף טעקסט ווען דער באַניצער פאָוקיסיז אָדער גייט אריין די קאָנטראָל.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

וואַלאַדיישאַן שטאַטן

באָאָטסטראַפּ כולל וואַלאַדיישאַן סטיילז פֿאַר טעות, ווארענונג און הצלחה שטאַטן אויף פאָרעם קאָנטראָלס. צו נוצן, לייגן .has-warning, .has-error, אָדער .has-successצו די פאָטער עלעמענט. קיין .control-label, .form-control, און .help-blockאין דעם עלעמענט וועט באַקומען די וואַלאַדיישאַן סטיילז.

קאַנווייינג וואַלאַדיישאַן שטאַט צו אַסיסטיוו טעקנאַלאַדזשיז און קאָלאָרבלינד ניצערס

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

פאַרזיכערן אַז אַן אָלטערנאַטיוו אָנווייַז פון שטאַט איז אויך צוגעשטעלט. פֿאַר בייַשפּיל, איר קענען אַרייַננעמען אַ אָנצוהערעניש וועגן שטאַט אין די פאָרעם קאָנטראָל ס <label>טעקסט זיך (ווי איז דער פאַל אין די פאלגענדע קאָד בייַשפּיל), אַרייַננעמען אַ גליפיקאָן (מיט צונעמען אנדער ברירה טעקסט ניצן די .sr-onlyקלאַס - זען די גליפיקאָן ביישפילן ), אָדער דורך צושטעלן אַ נאָך הילף טעקסט בלאָק. ספּאַסיפיקלי פֿאַר אַסיסטאַטיוו טעקנאַלאַדזשיז, פאַרקריפּלט פאָרעם קאָנטראָלס קענען אויך זיין אַסיינד אַן aria-invalid="true"אַטריביוט.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

מיט אַפּשאַנאַל ייקאַנז

איר קענען אויך לייגן אַפּשאַנאַל באַמערקונגען ייקאַנז מיט די אַדישאַן פון .has-feedbackאון די רעכט בילדל.

באַמערקונגען ייקאַנז אַרבעט בלויז מיט טעקסטשאַוואַל <input class="form-control">עלעמענטן.

ייקאַנז, לאַבעלס און אַרייַנשרייַב גרופּעס

מאַנואַל פּאַזישאַנינג פון באַמערקונגען ייקאַנז איז פארלאנגט פֿאַר ינפּוץ אָן אַ פירמע און פֿאַר אַרייַנשרייַב גרופּעס מיט אַן אַדישאַן אויף די רעכט. איר זענט שטארק ינקעראַדזשד צו צושטעלן לאַבעלס פֿאַר אַלע ינפּוץ פֿאַר אַקסעסאַביליטי סיבות. אויב איר ווילט צו פאַרמיידן די ווייַז פון לאַבעלס, באַהאַלטן זיי מיט די .sr-onlyקלאַס. אויב איר מוזן טאָן אָן לאַבעלס, סטרויערן די topווערט פון די באַמערקונגען בילדל. פֿאַר אַרייַנשרייַב גרופּעס, סטרויערן די rightווערט צו אַ צונעמען פּיקסעל ווערט דיפּענדינג אויף די ברייט פון דיין אַדדאָן.

קאַנווייינג די טייַטש פון די ייקאַן צו אַסיסטיוו טעקנאַלאַדזשיז

צו ענשור אַז אַסיסטאַטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער - ריכטיק קאַנוויי די טייַטש פון אַ ייקאַן, נאָך פאַרבאָרגן טעקסט זאָל זיין אַרייַנגערעכנט אין די .sr-onlyקלאַס און בפירוש פֿאַרבונדן מיט די פאָרעם קאָנטראָל עס איז שייך צו ניצן aria-describedby. אַלטערנאַטיוועלי, מאַכן זיכער אַז די טייַטש (פֿאַר בייַשפּיל, דער פאַקט אַז עס איז אַ ווארענונג פֿאַר אַ באַזונדער טעקסט פּאָזיציע פעלד) איז קאַנווייד אין עטלעכע אנדערע פאָרעם, אַזאַ ווי טשאַנגינג די טעקסט פון די פאַקטיש <label>פֿאַרבונדן מיט די פאָרעם קאָנטראָל.

כאָטש די פאלגענדע ביישפילן שוין דערמאָנען די וואַלאַדיישאַן שטאַט פון זייער ריספּעקטיוו פאָרעם קאָנטראָלס אין די <label>טעקסט זיך, די אויבן טעכניק (ניצן .sr-onlyטעקסט און aria-describedby) איז אַרייַנגערעכנט פֿאַר ילאַסטראַטיוו צוועקן.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

אָפּטיאָנאַל ייקאַנז אין האָריזאָנטאַל און ינלינע פארמען

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

אָפּטיאָנאַל ייקאַנז מיט פאַרבאָרגן `.sr-only`לאַבעלס

אויב איר נוצן די .sr-onlyקלאַס צו באַהאַלטן אַ פאָרעם קאָנטראָל ס <label>(אלא ווי ניצן אנדערע לייבלינג אָפּציעס, אַזאַ ווי די aria-labelאַטריביוט), Bootstrap וועט אויטאָמאַטיש סטרויערן די שטעלע פון די בילדל אַמאָל עס איז צוגעגעבן.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

קאָנטראָל סייזינג

באַשטעטיק כייץ ניצן קלאסן ווי .input-lg, און שטעלן ווידטס ניצן גריד זייַל קלאסן ווי .col-lg-*.

הייך סייזינג

שאַפֿן העכער אָדער קירצער פאָרעם קאָנטראָלס וואָס גלייַכן קנעפּל סיזעס.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

האָריזאָנטאַל פאָרעם גרופּע סיזעס

געשווינד גרייס לאַבעלס און פאָרעם קאָנטראָלס .form-horizontalדורך אַדינג .form-group-lgאָדער .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

זייַל סייזינג

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

קנעפּל טאַגס

ניצן די קנעפּל קלאסן אויף אַן <a>, <button>, אָדער <input>עלעמענט.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

קאָנטעקסט-ספּעציפיש באַניץ

כאָטש קנעפּל קלאסן קענען זיין געוויינט אויף <a>און <button>עלעמענטן, בלויז <button>עלעמענטן זענען געשטיצט אין אונדזער נאַוו און נאַוובאַר קאַמפּאָונאַנץ.

לינקס אַקטינג ווי קנעפּלעך

אויב די <a>עלעמענטן זענען גענוצט צו שפּילן ווי קנעפּלעך - טריגערינג אין-בלאַט פאַנגקשאַנאַליטי, אלא ווי נאַוואַגייטינג צו אן אנדער דאָקומענט אָדער אָפּטיילונג אין דעם קראַנט בלאַט - זיי זאָל אויך באַקומען אַ צונעמען role="button".

קרייז בלעטערער רענדערינג

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

צווישן אנדערע זאכן, עס איז אַ זשוק אין פירעפאָקס <30 וואָס פּריווענץ אונדז פון באַשטעטיקן די line-heightפון <input>-באזירט קנעפּלעך, וואָס מאכט זיי נישט פּונקט גלייַכן די הייך פון אנדערע קנעפּלעך אויף פירעפאָקס.

אָפּציעס

ניצן קיין פון די בנימצא קנעפּל קלאסן צו געשווינד מאַכן אַ סטיילד קנעפּל.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

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

סיזעס

ליב געהאט גרעסערע אָדער קלענערער קנעפּלעך? לייג .btn-lg, .btn-sm, אָדער .btn-xsפֿאַר נאָך סיזעס.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

שאַפֿן בלאָק מדרגה קנעפּלעך - די וואָס שפּאַן די פול ברייט פון אַ פאָטער - דורך אַדינג .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

אַקטיוו שטאַט

די קנעפּלעך וועט זיין געדריקט (מיט אַ דאַרקער הינטערגרונט, דאַרקער גרענעץ און ינסעט שאָטן) ווען אַקטיוו. פֿאַר <button>עלעמענטן, דאָס איז געטאן דורך :active. פֿאַר <a>עלעמענטן, עס איז געטאן מיט .active. אָבער, איר קענט נוצן .activeאויף <button>s (און אַרייַננעמען די aria-pressed="true"אַטריביוט) אויב איר דאַרפֿן צו רעפּלאַקייט די אַקטיוו שטאַט פּראָגראַממאַטיק.

קנעפּל עלעמענט

ניט דאַרפֿן צו לייגן :activeווי עס איז אַ פּסעוודאָ-קלאַס, אָבער אויב איר דאַרפֿן צו צווינגען די זעלבע אויסזען, גיין פאָרויס און לייגן .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

אַנקער עלעמענט

לייג די .activeקלאַס צו <a>קנעפּלעך.

ערשטיק לינק לינק

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

פאַרקריפּלט שטאַט

מאַכן די קנעפּלעך קוקן אַנקליקאַבאַל דורך פאַדינג זיי צוריק מיט opacity.

קנעפּל עלעמענט

לייג די disabledאַטריביוט צו <button>קנעפּלעך.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

אויב איר לייגן דעם disabledאַטריביוט צו אַ <button>, Internet Explorer 9 און ווייטער וועט מאַכן טעקסט גרוי מיט אַ פּאַסקודנע טעקסט-שאָטן וואָס מיר קענען נישט פאַרריכטן.

אַנקער עלעמענט

לייג די .disabledקלאַס צו <a>קנעפּלעך.

ערשטיק לינק לינק

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

מיר נוצן .disabledווי אַ נוצן קלאַס דאָ, ענלעך צו דער פּראָסט .activeקלאַס, אַזוי קיין פּרעפיקס איז פארלאנגט.

לינק פאַנגקשאַנאַליטי קייוויאַט

דער קלאַס ניצט pointer-events: noneצו פּרובירן צו דיסייבאַל די לינק פאַנגקשאַנאַליטי פון <a>s, אָבער די CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד און איז נישט גאָר געשטיצט אין אָפּעראַ 18 און ווייטער, אָדער אין Internet Explorer 11. אין דערצו, אפילו אין בראַוזערז וואָס שטיצן pointer-events: none, קלאַוויאַטור. נאַוויגאַציע בלייבט אַנאַפעקטיד, טייַטש אַז סייטיד קלאַוויאַטור יוזערז און יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז וועט נאָך קענען צו אַקטאַווייט די לינקס. אַזוי צו זיין זיכער, נוצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל אַזאַ פֿאַרבינדונגען.

אָפּרופיק בילדער

בילדער אין Bootstrap 3 קענען זיין אָפּרופיק-פרייַנדלעך דורך די אַדישאַן פון די .img-responsiveקלאַס. דאָס אַפּלייז max-width: 100%;, height: auto;און display: block;צו די בילד אַזוי אַז עס סקאַלעס נייסלי צו די פאָטער עלעמענט.

צו צענטער בילדער וואָס נוצן די .img-responsiveקלאַס, נוצן .center-blockאַנשטאָט פון .text-center. זען די העלפּער קלאסן אָפּטיילונג פֿאַר מער דעטאַילס וועגן .center-blockבאַניץ.

SVG בילדער און הייסט 8-10

אין Internet Explorer 8-10, SVG בילדער מיט .img-responsiveזענען דיספּראַפּאָרשאַנאַטלי סייזד. צו פאַרריכטן דעם, לייגן width: 100% \9;אויב נייטיק. באָאָטסטראַפּ טוט נישט צולייגן דעם אויטאָמאַטיש ווייַל עס ז קאַמפּלאַקיישאַנז צו אנדערע בילד פֿאָרמאַטירונגען.

<img src="..." class="img-responsive" alt="Responsive image">

בילד שאַפּעס

לייג קלאסן צו אַן <img>עלעמענט צו לייכט סטיל בילדער אין קיין פּרויעקט.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

האַלטן אין מיינונג אַז Internet Explorer 8 פעלן שטיצן פֿאַר ראַונדיד עקן.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

קאָנטעקסטואַל פארבן

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

פוססע דאַפּיבוס, טעללוס אַ היימען קאָממאָדאָ, טאָרטאָר מאַוריס ניבה.

נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.

דויס מאָליס, עס איז ניט-קאָממאָדאָ לאַקטוס, עס איז קיין פּאָרטאַטיוו.

עס איז מעגלעך צו מאַכן פאַרשידענע ווערייאַטיז.

עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

דאָנעק ullamcorper nulla ניט מעטוס לאָקטאָר פרינגיללאַ.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

האַנדלינג מיט ספּעציפישקייט

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

קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

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

קאָנטעקסטואַל באַקגראַונדז

ענלעך צו די קאָנטעקסטואַל טעקסט קאָליר קלאסן, לייכט שטעלן דעם הינטערגרונט פון אַן עלעמענ�� צו קיין קאָנטעקסטואַל קלאַס. אַנקער קאַמפּאָונאַנץ וועט דאַרקאַן אויף האָווער, פּונקט ווי די טעקסט קלאסן.

נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.

דויס מאָליס, עס איז ניט-קאָממאָדאָ לאַקטוס, עס איז קיין פּאָרטאַטיוו.

עס איז מעגלעך צו מאַכן פאַרשידענע ווערייאַטיז.

עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

דאָנעק ullamcorper nulla ניט מעטוס לאָקטאָר פרינגיללאַ.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

האַנדלינג מיט ספּעציפישקייט

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

קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

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

נאָענט בילדל

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

קאַרעץ

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

<span class="caret"></span>

שנעל פלאָוץ

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

צענטער אינהאַלט בלאַקס

שטעלן אַן עלעמענט צו display: blockאון צענטער דורך margin. בנימצא ווי אַ מיקסין און קלאַס.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

לייכט קלאָר floatס דורך אַדינג .clearfix צו די פאָטער עלעמענט . ניצט די מיקראָ קלירפיקס ווי פּאָפּולעריזעד דורך Nicolas Gallagher. קענען אויך זיין געוויינט ווי אַ מיקסין.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ווייזן און באַהאַלטן אינהאַלט

צווינגען אַן עלעמענט צו זיין געוויזן אָדער פאַרבאָרגן ( אַרייַנגערעכנט פֿאַר פאַרשטעלן לייענער ) מיט די נוצן פון .showאון .hiddenקלאסן. די קלאסן נוצן !importantצו ויסמיידן ספּעסיפיקאַטי קאָנפליקט, פּונקט ווי די שנעל פלאָוץ . זיי זענען בלויז בנימצא פֿאַר בלאָק מדרגה טאַגאַלינג. זיי קענען אויך זיין געוויינט ווי מיקסינס.

.hideאיז בנימצא, אָבער עס טוט נישט שטענדיק ווירקן פאַרשטעלן לייענער און איז דיפּרישיייטיד ווי פון וו3.0.1. ניצן .hiddenאָדער .sr-onlyאַנשטאָט.

דערצו, .invisibleאיר קענען נוצן בלויז די וויזאַביליטי פון אַן עלעמענט, טייַטש אַז עס displayאיז נישט מאַדאַפייד און דער עלעמענט קען נאָך ווירקן די לויפן פון דעם דאָקומענט.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

אינהאַלט פון פאַרשטעלן לייענער און קלאַוויאַטור נאַוויגאַציע

באַהאַלטן אַן עלעמענט צו אַלע דעוויסעס אַחוץ פאַרשטעלן לייענער מיט .sr-only. קאַמביין .sr-onlyמיט .sr-only-focusableצו ווייַזן דעם עלעמענט ווידער ווען עס איז פאָוקיסט (למשל דורך אַ קלאַוויאַטור-בלויז באַניצער). נייטיק פֿאַר די פאלגענדע בעסטער פּראַקטיסיז פֿאַר אַקסעסאַביליטי . קענען אויך זיין געוויינט ווי מיקסינס.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

בילד פאַרבייַט

ניצן די .text-hideקלאַס אָדער מיקסין צו פאַרבייַטן די טעקסט אינהאַלט פון אַן עלעמענט מיט אַ הינטערגרונט בילד.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

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

בנימצא קלאסן

ניצן אַ איין אָדער אַ קאָמבינאַציע פון די בנימצא קלאסן פֿאַר טאַגאַלינג אינהאַלט אַריבער וויופּאָרט ברייקפּאָינץ.

	עקסטרע קליין דעוויסעספאָנעס (<768 פּקס)	קליין מכשיריםטאַבלעץ (≥768 פּקס)	מיטל דעוויסעסדעסקטאָפּס (≥992 פּקס)	גרויס מכשיריםדעסקטאָפּס (≥1200 פּקס)
`.visible-xs-*`	קענטיק	פאַרבאָרגן	פאַרבאָרגן	פאַרבאָרגן
`.visible-sm-*`	פאַרבאָרגן	קענטיק	פאַרבאָרגן	פאַרבאָרגן
`.visible-md-*`	פאַרבאָרגן	פאַרבאָרגן	קענטיק	פאַרבאָרגן
`.visible-lg-*`	פאַרבאָרגן	פאַרבאָרגן	פאַרבאָרגן	קענטיק
`.hidden-xs`	פאַרבאָרגן	קענטיק	קענטיק	קענטיק
`.hidden-sm`	קענטיק	פאַרבאָרגן	קענטיק	קענטיק
`.hidden-md`	קענטיק	קענטיק	פאַרבאָרגן	קענטיק
`.hidden-lg`	קענטיק	קענטיק	קענטיק	פאַרבאָרגן

זינט וו3.2.0, די .visible-*-*קלאסן פֿאַר יעדער ברייקפּאָינט קומען אין דריי ווערייישאַנז, איינער פֿאַר יעדער CSS displayפאַרמאָג ווערט ליסטעד אונטן.

גרופע פון קלאסן	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

אַזוי, פֿאַר עקסטרע קליין ( xs) סקרינז פֿאַר בייַשפּיל, די בנימצא .visible-*-*קלאסן זענען: .visible-xs-block, .visible-xs-inline, און .visible-xs-inline-block.

די קלאסן .visible-xs, .visible-sm, .visible-md, און .visible-lgאויך עקסיסטירן, אָבער זענען דיפּרישיייטיד ווי פון וו3.2.0 . זיי זענען בעערעך עקוויוואַלענט צו .visible-*-block, אַחוץ מיט נאָך ספּעציעל קאַסעס פֿאַר טאַגאַלינג <table>-פֿאַרבונדענע עלעמענטן.

דרוק קלאסן

ענלעך צו די רעגולער אָפּרופיק קלאסן, נוצן די פֿאַר טאַגאַלינג אינהאַלט פֿאַר דרוקן.

קלאסן	בלעטערער	דרוק
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	פאַרבאָרגן	קענטיק
`.hidden-print`	קענטיק	פאַרבאָרגן

דער קלאַס .visible-printאויך יגזיסץ אָבער איז דיפּרישיייטיד ווי פון וו3.2.0. עס איז בעערעך עקוויוואַלענט צו .visible-print-block, אַחוץ מיט נאָך ספּעציעל קאַסעס פֿאַר <table>-פֿאַרבונדענע עלעמענטן.

טעסט קאַסעס

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

קענטיק אויף ...

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

עקסטרע קליין ✔ קענטיק אויף X-small

קליין ✔ קענטיק אויף קליין

מיטל ✔ קענטיק אויף מיטל

גרויס ✔ קענטיק אויף גרויס

עקסטרע קליין און קליין ✔ קענטיק אויף X-קליין און קליין

מיטל און גרויס ✔ קענטיק אויף מיטל און גרויס

עקסטרע קליין און מיטל ✔ קענטיק אויף X-קליין און מיטל

קליין און גרויס ✔ קענטיק אויף קליין און גרויס

עקסטרע קליין און גרויס ✔ קענטיק אויף X-קליין און גרויס

קליין און מיטל ✔ קענטיק אויף קליין און מיטל

פאַרבאָרגן אויף ...

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

עקסטרע קליין ✔ פאַרבאָרגן אויף X-small

קליין ✔ פאַרבאָרגן אויף קליין

מיטל ✔ פאַרבאָרגן אויף מיטל

גרויס ✔ פאַרבאָרגן אויף גרויס

עקסטרע קליין און קליין ✔ פאַרבאָרגן אויף X-קליין און קליין

מיטל און גרויס ✔ פאַרבאָרגן אויף מיטל און גרויס

עקסטרע קליין און מיטל ✔ פאַרבאָרגן אויף X-קליין און מיטל

קליין און גרויס ✔ פאַרבאָרגן אויף קליין און גרויס

עקסטרע קליין און גרויס ✔ פאַרבאָרגן אויף X-קליין און גרויס

קליין און מיטל ✔ פאַרבאָרגן אויף קליין און מיטל

Bootstrap's CSS איז געבויט אויף Less, אַ פּרעפּראָסעססאָר מיט נאָך פאַנגקשאַנאַליטי ווי וועריאַבאַלז, מיקסינס און פאַנגקשאַנז פֿאַר קאַמפּיילינג CSS. יענע וואָס זוכן צו נוצן די מקור ווייניקער טעקעס אַנשטאָט פון אונדזער קאַמפּיילד CSS טעקעס קענען נוצן די פילע וועריאַבאַלז און מיקסינס וואָס מיר נוצן איבער די פריימווערק.

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

קאַמפּיילינג באָאָצטראַפּ

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

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

וועריאַבאַלז

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

קאָלאָרס

לייכט נוצן צוויי קאָליר סקימז: גרייסקאַלע און סעמאַנטיק. גרייַסקאַלע פארבן צושטעלן שנעל אַקסעס צו קאַמאַנלי געוויינט שיידז פון שוואַרץ בשעת סעמאַנטיק אַרייַננעמען פאַרשידן פארבן אַסיינד צו מינינגפאַל קאָנטעקסטואַל וואַלועס.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

סקאַפאַלדינג

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

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

לינקס

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

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

באַמערקונג אַז די @link-hover-colorניצט אַ פונקציע, אן אנדער אָסאַם געצייַג פֿון Less, צו אַוטאָמאַדזשיקלי שאַפֿן די רעכט כאַווער קאָלירן. איר קענט נוצן darken, lighten, saturate, און desaturate.

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

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ייקאַנז

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

קאַמפּאָונאַנץ

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

פאַרקויפער מיקסינס

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

קעסטל-סייזינג

באַשטעטיק דיין קאַמפּאָונאַנץ קעסטל מאָדעל מיט אַ איין מיקסין. פֿאַר קאָנטעקסט, זען דעם נוציק אַרטיקל פֿון מאָזיללאַ .

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

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ראַונדיד עקן

הייַנט אַלע מאָדערן בראַוזערז שטיצן די ניט-פּרעפיקסעדborder-radius פאַרמאָג. ווי אַזאַ, עס איז קיין .border-radius()מיקסין, אָבער Bootstrap ינקלודז דורכוועג פֿאַר געשווינד ראַונדינג צוויי עקן אויף אַ באַזונדער זייַט פון אַ כייפעץ.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

קעסטל (דראָפּ) שאַדאָוז

אויב דיין ציל וילעם איז ניצן די לעצטע און גרעסטע בראַוזערז און דעוויסעס, זיין זיכער צו נוצן דיbox-shadow פאַרמאָג אויף זיך. אויב איר דאַרפֿן שטיצן פֿאַר עלטערע אַנדרויד (פאַר-וו 4) און יאָס דעוויסעס (פאַר-יאָס 5), נוצן די דיפּרישיייטיד מיקסין צו קלייַבן די פארלאנגט -webkitפּרעפיקס.

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

זייט זיכער צו נוצן rgba()פארבן אין דיין קעסטל שאַדאָוז אַזוי זיי צונויפגיסן ווי סימלאַסלי ווי מעגלעך מיט באַקגראַונדז.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

טראַנזישאַנז

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

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

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

טראַנספאָרמאַציעס

דרייען, וואָג, איבערזעצן (מאַך), אָדער סקיינדזש קיין כייפעץ.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

אַנאַמיישאַנז

א איין מיקסין פֿאַר ניצן אַלע די אַנאַמיישאַן פּראָפּערטיעס פון CSS3 אין איין דעקלאַראַציע און אנדערע מיקסינס פֿאַר יחיד פּראָפּערטיעס.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

אָופּאַסאַטי

שטעלן די אָופּאַסאַטי פֿאַר אַלע בראַוזערז און צושטעלן אַ filterפאַלבאַק פֿאַר IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

אָרטהאָלדער טעקסט

צושטעלן קאָנטעקסט פֿאַר פאָרעם קאָנטראָלס אין יעדער פעלד.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

שפאלטן

דזשענערייט שפאלטן דורך CSS אין אַ איין עלעמענט.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

גראַדיענץ

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

איר קענען אויך ספּעציפיצירן די ווינקל פון אַ נאָרמאַל צוויי-קאָליר, לינעאַר גראַדיענט:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

אַרויף די אַנטי און נוצן דרייַ פארבן אַנשטאָט. שטעלן די ערשטער קאָליר, די רגע קאָליר, די רגע קאָליר סטאָפּ (אַ פּראָצענט ווערט ווי 25%), און די דריט קאָליר מיט די מיקסינס:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

קאָפּ אַרויף! אויב איר אלץ דאַרפֿן צו באַזייַטיקן אַ גראַדיענט, זיין זיכער צו באַזייַטיקן IE-ספּעציפיש filterאיר קען האָבן צוגעלייגט. איר קענען טאָן דאָס דורך ניצן די .reset-filter()מיקסין צוזאמען background-image: none;.

נוצן מיקסינס

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

Clearfix

פארגעסן צו לייגן class="clearfix"צו קיין עלעמענט און אַנשטאָט לייגן די .clearfix()מיקסין ווו צונעמען. ניצט די מיקראָ קלירפיקס פון Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

האָריזאָנטאַל סענטערינג

געשווינד צענטער קיין עלעמענט אין זיין פאָטער. ריקווייערז widthאָדער max-widthצו זיין באַשטימט.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

סייזינג העלפּערס

ספּעציפיצירן די דימענשאַנז פון אַ כייפעץ מער לייכט.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

רעסיזאַבלע טעקסט געביטן

לייכט קאַנפיגיער די רעסיזע אָפּציעס פֿאַר קיין טעקסט שטח אָדער קיין אנדערע עלעמענט. דיפאָלץ צו נאָרמאַל בלעטערער נאַטור ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

טרונקייטינג טעקסט

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

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

רעטינאַ בילדער

ספּעציפיצירן צוויי בילד פּאַטס און די @1x בילד דימענשאַנז, און Bootstrap וועט צושטעלן אַ @2x מעדיע אָנפֿרעג. אויב איר האָבן פילע בילדער צו דינען, באַטראַכטן שרייבן דיין רעטינאַ בילד CSS מאַניואַלי אין אַ איין מידיאַ אָנפֿרעג.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

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

וואָס איז אַרייַנגערעכנט

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

דרך	באַשרייַבונג
`lib/`	רובין יידלשטיין קאָד (Sass קאַנפיגיעריישאַן, ראַילס און קאָמפּאַס ינטאַגריישאַנז)
`tasks/`	קאָנווערטער סקריפּס (ווענדן אַפּסטרים ווייניקער צו סאַס)
`test/`	זאַמלונג טעסץ
`templates/`	קאָמפּאַס פּעקל באַשייַמפּערלעך
`vendor/assets/`	סאַס, דזשאַוואַסקריפּט און שריפֿט טעקעס
`Rakefile`	ינערלעך טאַסקס, אַזאַ ווי גראַבליע און קאָנווערט

באַזוכן די GitHub ריפּאַזאַטאָרי פון Sass פּאָרט צו זען די טעקעס אין קאַמף.

ייַנמאָנטירונג

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

באָאָטסטראַפּ פֿאַר סאַסס

CSS

איבערבליק

HTML5 דאָקטיפּע

מאָביל ערשטער

טיפּאָגראַפי און לינקס

נאָרמאַלייז.css

קאַנטיינערז

גריד סיסטעם

הקדמה

מידיאַ קוויריז

גריד אָפּציעס

בייַשפּיל: סטאַקט-צו-האָריזאָנטאַל

בייַשפּיל: פליסיק קאַנטיינער

בייַשפּיל: מאָביל און דעסקטאַפּ

בייַשפּיל: מאָביל, טאַבלעט, דעסקטאַפּ

בייַשפּיל: זייַל ראַפּינג

אָפּרופיק זייַל ריסעץ

אָפסעטטינג שפאלטן

נעסטינג שפאלטן

זייַל אָרדערינג

ווייניקער מיקסינס און וועריאַבאַלז

וועריאַבאַלז

מיקסינס

בייַשפּיל באַניץ

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

העאַדינגס

h1. באָאָטסטראַפּ כעדינג

h2. באָאָטסטראַפּ כעדינג

h3. באָאָטסטראַפּ כעדינג

h4. באָאָטסטראַפּ כעדינג

h5. באָאָטסטראַפּ כעדינג

h6. באָאָטסטראַפּ כעדינג

h1. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h2. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h3. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h4. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h5. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

h6. באָאָטסטראַפּ כעדינג צווייטיק טעקסט

גוף קאָפּיע

קאָפּיע פון ​​​​די גוף

געבויט מיט ווייניקער

ינלינע טעקסט עלעמענטן

אנגעצייכנט טעקסט

אויסגעמעקט טעקסט

סטרייקינג טעקסט

אריינגעלייגט טעקסט

אונטערליינד טעקסט

קליין טעקסט

דרייסט

ייטאַליקס

אַלטערנאַטיווע עלעמענטן

אַליינמאַנט קלאסן

טראַנספאָרמאַציע קלאסן

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

יקערדיק אַבריווייישאַן

איניציאליזם

ווענדט זיך

בלאָק קוואָטעס

פעליקייַט בלאַקקוואָטע

בלאַקקוואָטע אָפּציעס

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

אַלטערנאַטיווע דיספּלייז

רשימות

אַנאָרדערד

באפוילן

ונסטיילד

אין ליניע

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

האָריזאָנטאַל באַשרייַבונג

אַוטאָ-טראַנגקייטינג

קאָד

אין ליניע

באַניצער אַרייַנשרייַב

יקערדיק בלאָק

וועריאַבאַלז

מוסטער רעזולטאַט

טישן

יקערדיק בייַשפּיל

סטרייפּט ראָוז

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

קאָפּיע פון די גוף

דעמאָ `:focus`שטאַט

היטונג וועגן לינק פאַנגקשאַנאַליטי פון`<a>`

אָפּטיאָנאַל ייקאַנז מיט פאַרבאָרגן `.sr-only`לאַבעלס