קנעפּלעך

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

ביישפילן

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

קנעפּל טאַגס

די .btnקלאסן זענען דיזיינד צו זיין געוויינט מיט דעם <button>עלעמענט. אָבער, איר קענען אויך נוצן די קלאסן אויף <a>אָדער <input>עלעמענטן (כאָטש עטלעכע בראַוזערז קען צולייגן אַ ביסל אַנדערש רענדערינג).

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

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

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

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

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

סיזעס

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

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

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

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

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

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

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

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

פאַרקריפּלט קנעפּלעך ניצן דעם <a>עלעמענט ביכייוו אַ ביסל אַנדערש:

• <a>s טאָן ניט שטיצן דעם disabledאַטריביוט, אַזוי איר מוזן לייגן די .disabledקלאַס צו מאַכן עס וויזשוואַלי דערשייַנען פאַרקריפּלט.
• עטלעכע צוקונפֿט-פרייַנדלעך סטיילז זענען אַרייַנגערעכנט צו דיסייבאַל אַלע pointer-eventsאויף אַנקער קנעפּלעך. אין בראַוזערז וואָס שטיצן דעם פאַרמאָג, איר וועט נישט זען די פאַרקריפּלט לויפֿער.
• פאַרקריפּלט קנעפּלעך זאָל אַרייַננעמען די aria-disabled="true"אַטריביוט צו אָנווייַזן די שטאַט פון די עלעמענט צו אַסיסטיוו טעקנאַלאַדזשיז.

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

קנעפּל פּלוגין

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

באַשטימען שטאַטן

לייג צו באַשטימען די שטאַט data-toggle="button"פון אַ קנעפּל . activeאויב איר פאַרמאַכן אַ קנעפּל, איר מוזן מאַניואַלי לייגן די .activeקלאַס און aria-pressed="true" צו די <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

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

די סטיילז פון .buttonבאָאָטסטראַפּ קענען זיין געווענדט צו אנדערע עלעמענטן, אַזאַ ווי <label>s, צו צושטעלן טשעקקבאָקס אָדער ראַדיאָ סטיל קנעפּל טאַגאַלינג. לייג data-toggle="buttons"צו אַ .btn-groupמיט די מאַדאַפייד קנעפּלעך צו געבן זייער טאַגאַלינג נאַטור דורך דזשאַוואַסקריפּט און לייגן .btn-group-toggleצו סטיל די <input>ס אין דיין קנעפּלעך. באַמערקונג אַז איר קענען שאַפֿן איין אַרייַנשרייַב-Powered קנעפּלעך אָדער גרופּעס פון זיי.

די אָפּגעשטעלט שטאַט פֿאַר די קנעפּלעך איז דערהייַנטיקט בלויז דורך clickגעשעעניש אויף דעם קנעפּל. אויב איר נוצן אן אנדער מעטאָד צו דערהייַנטיקן די אַרייַנשרייַב, למשל, מיט <input type="reset">אָדער דורך מאַניואַלי אַפּלייינג די checkedפאַרמאָג פון די אַרייַנשרייַב, איר דאַרפֿן צו באַשטימען .activeדעם <label>מאַניואַלי.

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

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

מעטהאָדס