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.
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.
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-only
kilasi naa.
Awọn .btn
kilasi 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.
Ṣ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.
Fancy tobi tabi kere bọtini? Fikun -un .btn-lg
tabi .btn-sm
fun awọn iwọn afikun.
Ṣẹda awọn bọtini ipele idina — awọn ti o ni iwọn kikun ti obi — nipa fifi .btn-block
.
Awọn bọtini yoo han ni titẹ (pẹlu abẹlẹ dudu, aala dudu, ati ojiji inset) nigbati o nṣiṣẹ. 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.
Jẹ ki awọn bọtini dabi aiṣiṣẹ nipa fifi disabled
abuda Boolean kun si eyikeyi <button>
eroja.
Awọn bọtini alaabo nipa lilo <a>
eroja naa huwa diẹ ti o yatọ:
<a>
s ko ṣe atilẹyin abuda naadisabled
, nitorinaa o gbọdọ ṣafikun.disabled
kilasi 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-events
lori 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 yẹ ki o pẹlu
aria-disabled="true"
abuda lati tọka ipo ti nkan si awọn imọ-ẹrọ iranlọwọ.
Asopọ iṣẹ caveat
Kilasi naa .disabled
nlo pointer-events: none
lati gbiyanju lati mu iṣẹ ọna asopọ ṣiṣẹ ti <a>
s, ṣugbọn ohun-ini CSS ko tii ni idiwọn. 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, ṣafikun abuda kan tabindex="-1"
lori awọn ọna asopọ wọnyi (lati ṣe idiwọ fun wọn lati gbigba idojukọ keyboard) ati lo JavaScript aṣa lati mu iṣẹ ṣiṣe wọn ṣiṣẹ.
Ṣ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ṣẹ.
Ṣ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 .active
kilasi ati aria-pressed="true"
si faili <button>
.
Awọn ara Bootstrap .button
le ṣ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-group
awọn bọtini ti a tunṣe wọnyẹn lati jẹ ki ihuwasi toggling wọn ṣiṣẹ nipasẹ JavaScript ati ṣafikun .btn-group-toggle
si 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ẹ click
iṣẹ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 checked
ohun-ini igbewọle pẹlu ọwọ—iwọ yoo nilo lati yi .active
lori <label>
pẹlu ọwọ.
Ṣe akiyesi pe awọn bọtini ti a ti ṣayẹwo tẹlẹ nilo ki o fi ọwọ kun .active
kilasi naa si ti titẹ sii <label>
.
Ọna | Apejuwe |
---|---|
$().button('toggle') |
Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ. |
$().button('dispose') |
Pa bọtini eroja run. |