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>

Butonetikedoj

La .btnklasoj estas dezajnitaj 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 (kun pli malhela fono, pli malhela rando kaj enmetita ombro) kiam aktivaj. 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 devus inkluzivi la aria-disabled="true"atributon por indiki la staton de la elemento al helpaj teknologioj.

<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" autocomplete="off">
  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 permane aldonu la .activeklason al la enigo <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>

Metodoj