Butonoj

Uzu la kutimajn butonstilojn de Bootstrap por agoj en formoj, dialogoj kaj pli kun subteno por pluraj grandecoj, ŝtatoj kaj pli.

Ekzemploj

Bootstrap inkluzivas plurajn antaŭdifinitajn butonstilojn, ĉiu servante sian propran semantikan celon, kun kelkaj kromaĵoj enmetitaj por pli da kontrolo.

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

Malebligu tekstan envolvadon

Se vi ne volas, ke la butonteksto envolviĝu, vi povas aldoni la .text-nowrapklason al la butono. En Sass, vi povas agordi $btn-white-space: nowrapmalŝalti tekston envolvadon por ĉiu butono.

Butonetikedoj

La .btnklasoj estas dizajnitaj por esti uzataj kun la <button>elemento. Tamen, vi ankaŭ povas uzi ĉi tiujn klasojn sur <a>aŭ <input>elementoj (kvankam iuj retumiloj povas apliki iomete malsaman bildigon).

Kiam oni uzas butonklasojn pri <a>elementoj, kiuj estas uzataj por ekigi en-paĝan funkcion (kiel kolapsa enhavo), anstataŭ ligi al novaj paĝoj aŭ sekcioj ene de la nuna paĝo, ĉi tiuj ligiloj devus ricevi role="button"por taŭge transdoni sian celon al helpaj teknologioj kiel ekzemple. ekranlegiloj.

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

Skizo butonoj

Ĉu vi bezonas butonon, sed ne la fortajn fonkolorojn, kiujn ili alportas? Anstataŭigu la defaŭltajn modifklasojn per .btn-outline-*tiuj por forigi ĉiujn fonbildojn kaj kolorojn sur iu ajn butono.

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

Grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-lgaŭ .btn-smpor pliaj grandecoj.

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

Kreu bloknivelajn butonojn—tiujn kiuj ampleksas la tutan larĝon de gepatro—aldonante .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>

Aktiva stato

Butonoj aperos premitaj kiam aktivaj kun pli malhela fono, pli malhela rando, kaj, kiam ombroj estas ebligitaj, enmetita ombro. Ne necesas aldoni klason al <button>s ĉar ili uzas pseŭdoklason . Tamen, vi ankoraŭ povas devigi la saman aktivan aspekton kun .active(kaj inkluzivi la aria-pressed=“true”atributon) se vi bezonas reprodukti la staton programe.

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

Malfunkciigita ŝtato

Faru butonojn aspekti neaktivaj aldonante la disabledbulean atributon al iu ajn <button>elemento.

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

Malŝaltitaj butonoj uzantaj la <a>elementon kondutas iom malsame:

• <a>s ne subtenas la disabledatributon, do vi devas aldoni la .disabledklason por ke ĝi videble aspektu malŝaltita.
• Iuj estontecaj stiloj estas inkluzivitaj por malŝalti ĉiujn pointer-eventsankrajn butonojn. En retumiloj kiuj subtenas tiun posedaĵon, vi tute ne vidos la malfunkciigitan kursoron.
• Malfunkciigitaj butonoj uzado <a>devus inkluzivi la aria-disabled="true"atributon por indiki la staton de la elemento al helpaj teknologioj.
• Malŝaltitaj butonoj uzantaj <a> ne devus inkluzivi la hrefatributon.

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

Ligo-funkcieca averto

Por kovri kazojn, kie vi devas konservi la hrefatributon sur malfunkciigita ligilo, la .disabledklaso uzas pointer-events: nonepor provi malŝalti la ligan funkcion de <a>s. Notu, ke ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita por HTML, sed ĉiuj modernaj retumiloj subtenas ĝin. Krome, eĉ en retumiloj kiuj subtenas pointer-events: none, klavarnavigado restas netuŝita, kio signifas, ke videblaj klavaruzantoj kaj uzantoj de helpaj teknologioj ankoraŭ povos aktivigi ĉi tiujn ligilojn. Do por esti sekura, krom aria-disabled="true", ankaŭ inkluzivu tabindex="-1"atributon sur ĉi tiuj ligiloj por malhelpi ilin ricevi klavaran fokuson, kaj uzu kutiman JavaScript por tute malŝalti ilian funkciecon.

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

Butonaldonaĵo

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Ŝaltigu ŝtatojn

Aldoni data-toggle="button"por ŝanĝi la staton de butono active. Se vi antaŭŝanĝas butonon, vi devas permane aldoni la .activeklason kaj aria-pressed="true" al la <button>.

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

Markobutono kaj radiobutonoj

La stiloj de Bootstrap .buttonpovas esti aplikitaj al aliaj elementoj, kiel <label>s, por provizi markobutonon aŭ radiostilan butonon. Aldonu data-toggle="buttons"al .btn-groupenhavanta tiujn modifitajn butonojn por ebligi ilian ŝanĝantan konduton per JavaScript kaj aldonu .btn-group-togglepor stiligi la <input>s ene de viaj butonoj. Notu, ke vi povas krei unuopajn enig-elektrajn butonojn aŭ grupojn de ili.

La kontrolita stato por ĉi tiuj butonoj estas ĝisdatigita nur per clickevento sur la butono. Se vi uzas alian metodon por ĝisdatigi la enigaĵon—ekz., per <input type="reset">aŭ permane aplikante la checkedposedaĵon de la enigo—vi devos ŝalti .activela <label>mane.

Notu, ke antaŭkontrolitaj butonoj postulas, ke vi mane aldoni la .activeklason al la enigo de <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>

Metodoj