Botymau

Defnyddiwch arddulliau botwm arfer Bootstrap ar gyfer gweithredoedd mewn ffurfiau, deialogau, a mwy gyda chefnogaeth ar gyfer meintiau lluosog, taleithiau, a mwy.

Enghreifftiau

Mae Bootstrap yn cynnwys sawl arddull botwm wedi'i ddiffinio ymlaen llaw, pob un yn gwasanaethu ei bwrpas semantig ei hun, gydag ychydig o bethau ychwanegol yn cael eu taflu i mewn i gael mwy o reolaeth.

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

Analluogi lapio testun

Os nad ydych chi am i destun y botwm lapio, gallwch chi ychwanegu'r .text-nowrapdosbarth at y botwm. Yn Sass, gallwch chi osod $btn-white-space: nowrapi analluogi lapio testun ar gyfer pob botwm.

Tagiau botwm

Mae'r .btndosbarthiadau wedi'u cynllunio i'w defnyddio gyda'r <button>elfen. Fodd bynnag, gallwch hefyd ddefnyddio'r dosbarthiadau hyn ar <a>neu <input>elfennau (er y gall rhai porwyr ddefnyddio rendrad ychydig yn wahanol).

Wrth ddefnyddio dosbarthiadau botwm ar <a>elfennau a ddefnyddir i sbarduno ymarferoldeb mewn tudalen (fel cynnwys yn cwympo), yn hytrach na chysylltu â thudalennau neu adrannau newydd o fewn y dudalen gyfredol, dylid rhoi'r dolenni hyn role="button"i gyfleu eu pwrpas yn briodol i dechnolegau cynorthwyol megis darllenwyr sgrin.

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

Botymau amlinellol

Angen botwm, ond nid y lliwiau cefndir mawr sydd ganddyn nhw? Disodli'r dosbarthiadau addasydd rhagosodedig gyda'r .btn-outline-*rhai i gael gwared ar yr holl ddelweddau cefndir a lliwiau ar unrhyw fotwm.

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

Meintiau

Awydd botymau mwy neu lai? Ychwanegu .btn-lgneu .btn-smar gyfer meintiau ychwanegol.

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

Creu botymau lefel bloc - y rhai sy'n rhychwantu lled llawn rhiant - trwy ychwanegu .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>

Cyflwr gweithredol

Bydd botymau'n ymddangos wedi'u gwasgu pan fyddant yn weithredol gyda chefndir tywyllach, ffin dywyllach, a, phan fydd cysgodion wedi'u galluogi, cysgod mewnosod. Nid oes angen ychwanegu dosbarth at <button>s gan eu bod yn defnyddio dosbarth ffug . Fodd bynnag, gallwch barhau i orfodi'r un ymddangosiad gweithredol gyda .active(a chynnwys y aria-pressed=“true”priodoledd) pe bai angen i chi ailadrodd y cyflwr yn rhaglennol.

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

Cyflwr anabl

Gwnewch i fotymau edrych yn anactif trwy ychwanegu'r disabledbriodwedd boolaidd i unrhyw <button>elfen.

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

Mae botymau anabl sy'n defnyddio'r <a>elfen yn ymddwyn ychydig yn wahanol:

• <a>s ddim yn cefnogi'r disabledpriodoledd, felly mae'n rhaid i chi ychwanegu'r .disableddosbarth i wneud iddo ymddangos yn anabl yn weledol.
• Mae rhai arddulliau cyfeillgar i'r dyfodol wedi'u cynnwys i analluogi popeth pointer-eventsar fotymau angori. Mewn porwyr sy'n cynnal yr eiddo hwnnw, ni fyddwch yn gweld y cyrchwr anabl o gwbl.
• Dylai defnyddio botymau anabl <a>gynnwys y aria-disabled="true"priodoledd i ddangos cyflwr yr elfen i dechnolegau cynorthwyol.
• <a> Ni ddylai defnyddio botymau anabl gynnwys y hrefpriodoledd.

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

Cafeat swyddogaeth cyswllt

I ymdrin ag achosion lle mae'n rhaid i chi gadw'r hrefpriodoledd ar ddolen anabl, mae'r .disableddosbarth yn defnyddio pointer-events: nonei geisio analluogi ymarferoldeb cyswllt <a>s. Sylwch nad yw'r eiddo CSS hwn wedi'i safoni ar gyfer HTML eto, ond mae pob porwr modern yn ei gefnogi. Yn ogystal, hyd yn oed mewn porwyr sy'n cefnogi pointer-events: none, nid yw llywio bysellfwrdd yn cael ei effeithio o hyd, sy'n golygu y bydd defnyddwyr bysellfwrdd sy'n gweld a defnyddwyr technolegau cynorthwyol yn dal i allu actifadu'r dolenni hyn. Felly i fod yn ddiogel, yn ogystal â aria-disabled="true", dylech hefyd gynnwys tabindex="-1"priodoledd ar y dolenni hyn i'w hatal rhag derbyn ffocws bysellfwrdd, a defnyddio JavaScript wedi'i deilwra i analluogi eu swyddogaeth yn gyfan gwbl.

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

Ategyn botwm

Gwnewch fwy gyda botymau. Rheoli cyflwr botymau neu greu grwpiau o fotymau ar gyfer mwy o gydrannau fel bariau offer.

Toglo gwladwriaethau

Ychwanegu data-toggle="button"i toglo cyflwr botwm active. Os ydych chi'n toglo botwm ymlaen llaw, rhaid i chi ychwanegu'r .activedosbarth â llaw ac aria-pressed="true" at y <button>.

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

Blwch siec a botymau radio

Gellir cymhwyso arddulliau Bootstrap .buttoni elfennau eraill, megis <label>s, i ddarparu blwch ticio neu doggling botwm arddull radio. Ychwanegu data-toggle="buttons"at .btn-groupy botwm sy'n cynnwys y botymau wedi'u haddasu i alluogi eu hymddygiad toggling trwy JavaScript ac ychwanegu .btn-group-toggleat arddull yr <input>s o fewn eich botymau. Sylwch y gallwch chi greu botymau unigol wedi'u pweru gan fewnbwn neu grwpiau ohonyn nhw.

Dim ond trwy clickddigwyddiad ar y botwm y caiff cyflwr wedi'i wirio ar gyfer y botymau hyn ei ddiweddaru . Os ydych chi'n defnyddio dull arall i ddiweddaru'r mewnbwn - ee, gyda <input type="reset">neu drwy gymhwyso priodwedd y mewnbwn â llaw checked- bydd angen i chi toglo .activear y mewnbwn <label>â llaw.

Sylwch fod botymau sydd wedi'u gwirio ymlaen llaw yn gofyn i chi ychwanegu'r .activedosbarth â llaw i fewnbwn <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>

Dulliau