קנעפּלעך

ניצן 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>

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

אויב איר טאָן ניט וועלן די קנעפּל טעקסט צו ייַנוויקלען, איר קענען לייגן דעם .text-nowrapקלאַס צו די קנעפּל. אין Sass, איר קענען שטעלן $btn-white-space: nowrapצו דיסייבאַל טעקסט ראַפּינג פֿאַר יעדער קנעפּל.

קנעפּל טאַגס

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

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

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

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

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" 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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

מעטהאָדס