Awọn bọtini

Lo awọn ara bọtini aṣa Bootstrap fun awọn iṣe ni awọn fọọmu, awọn ijiroro, ati diẹ sii pẹlu atilẹyin fun awọn titobi pupọ, awọn ipinlẹ, ati diẹ sii.

Awọn apẹẹrẹ

Bootstrap pẹlu ọpọlọpọ awọn aza bọtini asọye, ọkọọkan n ṣiṣẹ idi itumọ tirẹ, pẹlu awọn afikun diẹ ti a sọ sinu fun iṣakoso diẹ sii.

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

Mu ọrọ murasilẹ kuro

Ti o ko ba fẹ ki ọrọ bọtini naa di ipari, o le ṣafikun .text-nowrapkilasi naa si bọtini. Ni Sass, o le ṣeto $btn-white-space: nowraplati mu ipari ọrọ ṣiṣẹ fun bọtini kọọkan.

Awọn aami bọtini

Awọn .btnkilasi jẹ apẹrẹ fun lilo pẹlu <button>eroja. Sibẹsibẹ, o tun le lo awọn kilasi wọnyi lori <a>tabi <input>awọn eroja (botilẹjẹpe diẹ ninu awọn aṣawakiri le lo adaṣe ti o yatọ diẹ).

Nigbati o ba nlo awọn kilasi bọtini lori <a>awọn eroja ti a lo lati ma nfa iṣẹ ṣiṣe oju-iwe (bii akoonu ti n ṣubu), dipo sisopọ si awọn oju-iwe tuntun tabi awọn apakan laarin oju-iwe lọwọlọwọ, awọn ọna asopọ wọnyi yẹ ki o fun ni role="button"lati sọ idi wọn ni deede si awọn imọ-ẹrọ iranlọwọ gẹgẹbi iboju onkawe.

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

Awọn bọtini itọka

Ṣe o nilo bọtini kan, ṣugbọn kii ṣe awọn awọ isale hefty ti wọn mu? Rọpo awọn kilasi iyipada aiyipada pẹlu awọn .btn-outline-*eyi lati yọ gbogbo awọn aworan abẹlẹ ati awọn awọ kuro lori bọtini eyikeyi.

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

Awọn iwọn

Fancy tobi tabi kere bọtini? Fikun -un .btn-lgtabi .btn-smfun awọn iwọn afikun.

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

Ṣẹda awọn bọtini ipele idina — awọn ti o ni iwọn kikun ti obi — nipa fifi .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>

Ipo ti nṣiṣe lọwọ

Awọn bọtini yoo han ni titẹ nigbati o n ṣiṣẹ pẹlu abẹlẹ dudu, aala dudu, ati, nigbati awọn ojiji ba ṣiṣẹ, ojiji inset. Ko si iwulo lati ṣafikun kilasi kan si <button>s bi wọn ṣe nlo kilasi apeso . Bibẹẹkọ, o tun le fi ipa mu irisi ti nṣiṣe lọwọ kanna pẹlu .active(ati pẹlu aria-pressed=“true”abuda naa) ti o ba nilo lati tun ṣe ipinlẹ ni eto.

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

Ipo alaabo

Jẹ ki awọn bọtini dabi aiṣiṣẹ nipa fifi disabledabuda Boolean kun si eyikeyi <button>eroja.

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

Awọn bọtini alaabo nipa lilo <a>eroja naa huwa diẹ ti o yatọ:

• <a>s ko ṣe atilẹyin abuda naa disabled, nitorinaa o gbọdọ ṣafikun .disabledkilasi naa lati jẹ ki oju han ni alaabo.
• Diẹ ninu awọn aza ore-ọjọ iwaju wa pẹlu lati mu gbogbo rẹ kuro pointer-eventslori awọn bọtini oran. Ninu awọn aṣawakiri ti o ṣe atilẹyin ohun-ini yẹn, iwọ kii yoo rii kọsọ alaabo rara.
• Awọn bọtini alaabo nipa lilo <a>yẹ ki o pẹlu aria-disabled="true"abuda lati tọka ipo ti nkan si awọn imọ-ẹrọ iranlọwọ.
• Awọn bọtini alaabo nipa lilo <a> ko yẹ ki o pẹlu hrefabuda naa.

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

Asopọ iṣẹ caveat

Lati bo awọn ọran nibiti o ni lati tọju hrefabuda naa lori ọna asopọ alaabo, .disabledkilasi naa lo pointer-events: nonelati gbiyanju lati mu iṣẹ ọna asopọ ti <a>s. Ṣe akiyesi pe ohun-ini CSS yii ko tii ni idiwọn fun HTML, ṣugbọn gbogbo awọn aṣawakiri ode oni ṣe atilẹyin fun. Ni afikun, paapaa ninu awọn aṣawakiri ti o ṣe atilẹyin pointer-events: none, lilọ kiri keyboard ko ni ipa, afipamo pe awọn olumulo keyboard ti o rii ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo tun ni anfani lati mu awọn ọna asopọ wọnyi ṣiṣẹ. Nitorinaa lati wa ni ailewu, ni afikun si aria-disabled="true", tun pẹlu abuda kan tabindex="-1"lori awọn ọna asopọ wọnyi lati ṣe idiwọ wọn lati gbigba idojukọ keyboard, ati lo JavaScript aṣa lati mu iṣẹ ṣiṣe wọn ṣiṣẹ lapapọ.

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

Ohun itanna bọtini

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Yipada awọn ipinlẹ

Ṣafikun data-toggle="button"lati yi ipo bọtini kan pada active. Ti o ba n yi bọtini kan ṣaju, o gbọdọ fi ọwọ kun .activekilasi ati aria-pressed="true" si faili <button>.

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

Apoti ati awọn bọtini redio

Awọn ara Bootstrap .buttonle ṣee lo si awọn eroja miiran, gẹgẹbi awọn <label>s, lati pese apoti ayẹwo tabi bọtini ara redio toggling. Ṣafikun data-toggle="buttons"si .btn-groupawọn bọtini ti a tunṣe wọnyẹn lati jẹ ki ihuwasi toggling wọn ṣiṣẹ nipasẹ JavaScript ati ṣafikun .btn-group-togglesi ara awọn <input>s laarin awọn bọtini rẹ. Ṣe akiyesi pe o le ṣẹda awọn bọtini agbara titẹ sii ẹyọkan tabi awọn ẹgbẹ ninu wọn.

Ipo ti a ṣayẹwo fun awọn bọtini wọnyi jẹ imudojuiwọn nikan nipasẹ clickiṣẹlẹ lori bọtini. Ti o ba lo ọna miiran lati ṣe imudojuiwọn igbewọle naa—fun apẹẹrẹ, pẹlu <input type="reset">tabi nipa lilo checkedohun-ini igbewọle pẹlu ọwọ—iwọ yoo nilo lati yi .activelori <label>pẹlu ọwọ.

Ṣe akiyesi pe awọn bọtini ti a ti ṣayẹwo tẹlẹ nilo ki o fi ọwọ kun .activekilasi naa si ti titẹ sii <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>

Awọn ọna