Butonat

Përdorni stilet e butonave të personalizuar të Bootstrap për veprime në forma, dialog dhe më shumë me mbështetje për madhësi, gjendje të shumëfishta dhe më shumë.

Shembuj

Bootstrap përfshin disa stile të paracaktuara të butonave, secila i shërben qëllimit të vet semantik, me disa shtesa të futura për më shumë kontroll.

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

Çaktivizo mbështjelljen e tekstit

Nëse nuk dëshironi që teksti i butonit të mbështillet, mund ta shtoni .text-nowrapklasën në buton. Në Sass, mund të vendosni $btn-white-space: nowraptë çaktivizoni mbështjelljen e tekstit për çdo buton.

Etiketat e butonave

Klasat .btnjanë krijuar për t'u përdorur me <button>elementin. Megjithatë, ju mund t'i përdorni këto klasa në <a>ose <input>elementë (megjithëse disa shfletues mund të aplikojnë një paraqitje paksa të ndryshme).

Kur përdorni klasat e butonave në <a>elementë që përdoren për të aktivizuar funksionalitetin brenda faqes (si p.sh. përmbajtja e kolapsit), në vend që të lidhen me faqe ose seksione të reja brenda faqes aktuale, këtyre lidhjeve duhet t'u jepet një përçim i role="button"duhur për të përcjellë qëllimin e tyre në teknologjitë ndihmëse si p.sh. lexuesit e ekranit.

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

Butonat skicë

Keni nevojë për një buton, por jo për ngjyrat e mëdha të sfondit që sjellin? Zëvendësoni klasat e modifikuesve të parazgjedhur me .btn-outline-*ato për të hequr të gjitha imazhet dhe ngjyrat e sfondit në çdo buton.

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

Përmasat

Dëshironi butona më të mëdhenj apo më të vegjël? Shtoni .btn-lgose .btn-smpër madhësi shtesë.

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

Krijoni butona të nivelit të bllokut—ato që përfshijnë gjerësinë e plotë të një prindi—duke shtuar .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>

Gjendja aktive

Butonat do të shfaqen të shtypur kur janë aktivë me një sfond më të errët, kufij më të errët dhe, kur hijet janë të aktivizuara, një hije e futur. Nuk ka nevojë të shtoni një klasë në <button>s pasi ata përdorin një pseudo-klasë . Megjithatë, ju mund të detyroni të njëjtën pamje aktive me .active(dhe të përfshini aria-pressed=“true”atributin) nëse duhet të përsërisni gjendjen në mënyrë programore.

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

Gjendja me aftësi të kufizuara

Bëjini butonat të duken joaktivë duke shtuar disabledatributin boolean në çdo <button>element.

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

Butonat e çaktivizuar që përdorin <a>elementin sillen pak më ndryshe:

• <a>s nuk e mbështesin disabledatributin, kështu që duhet të shtoni .disabledklasën për ta bërë atë vizualisht të duket e paaftë.
• Përfshihen disa stile të përshtatshme për të ardhmen për të çaktivizuar të gjitha pointer-eventsbutonat e ankorimit. Në shfletuesit që mbështesin atë pronë, nuk do ta shihni fare kursorin e çaktivizuar.
• Butonat e çaktivizuar që përdorin <a>duhet të përfshijnë aria-disabled="true"atributin për të treguar gjendjen e elementit ndaj teknologjive ndihmëse.
• Butonat e çaktivizuar duke përdorur <a> nuk duhet të përfshijnë hrefatributin.

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

Paralajmërim për funksionalitetin e lidhjes

Për të mbuluar rastet kur duhet ta mbani hrefatributin në një lidhje të çaktivizuar, .disabledklasa përdor pointer-events: nonepër të provuar të çaktivizojë funksionalitetin e lidhjes së <a>s. Vini re se kjo pronë CSS nuk është ende e standardizuar për HTML, por të gjithë shfletuesit modernë e mbështesin atë. Përveç kësaj, edhe në shfletuesit që mbështesin pointer-events: none, navigimi i tastierës mbetet i paprekur, që do të thotë se përdoruesit e tastierës me shikim dhe përdoruesit e teknologjive ndihmëse do të jenë ende në gjendje t'i aktivizojnë këto lidhje. Pra, për të qenë të sigurt, përveç aria-disabled="true", përfshini gjithashtu një tabindex="-1"atribut në këto lidhje për t'i parandaluar ata të marrin fokusin e tastierës dhe përdorni JavaScript të personalizuar për të çaktivizuar plotësisht funksionalitetin e tyre.

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

Shtojca e butonave

Bëni më shumë me butona. Kontrolloni gjendjet e butonit ose krijoni grupe butonash për më shumë komponentë si shiritat e veglave.

Ndrysho gjendjet

Shto data-toggle="button"për të ndryshuar gjendjen e një butoni active. Nëse po ndërroni paraprakisht një buton, duhet të shtoni manualisht .activeklasën dhe aria-pressed="true" në <button>.

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

Kutia e kontrollit dhe butonat e radios

Stilet e Bootstrap .buttonmund të aplikohen në elementë të tjerë, të tillë si <label>s, për të siguruar kutinë e zgjedhjes ose ndryshimin e butonit të stilit të radios. Shtoni data-toggle="buttons"në një .btn-groupqë përmban ato butona të modifikuar për të mundësuar sjelljen e tyre të ndërrimit nëpërmjet JavaScript dhe shtoni .btn-group-togglenë stilin <input>s brenda butonave tuaj. Vini re se mund të krijoni butona të vetëm me hyrje ose grupe të tyre.

Gjendja e kontrolluar për këta butona përditësohet vetëm nëpërmjet clickngjarjes në buton. Nëse përdorni një metodë tjetër për të përditësuar hyrjen - p.sh., me <input type="reset">ose duke aplikuar manualisht veçorinë e hyrjes - do t'ju duhet të checkedndërroni manualisht..active<label>

Vini re se butonat e kontrolluar paraprakisht kërkojnë që ju të shtoni manualisht .activeklasën në hyrjen e <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>

Metodat