Foirmeacha

Samplaí agus treoirlínte úsáide le haghaidh stíleanna rialaithe foirmeacha, roghanna leagan amach, agus comhpháirteanna saincheaptha chun raon leathan foirmeacha a chruthú.

Forbhreathnú

Leathnaíonn rialuithe foirmeacha Bootstrap ar ár stíleanna foirmeacha Atosaithe le ranganna. Bain úsáid as na ranganna seo chun tarraingt isteach ina dtaispeántais shaincheaptha le haghaidh rindreála níos comhsheasmhaí thar brabhsálaithe agus gléasanna.

Bí cinnte go n-úsáideann tú typetréith chuí ar gach ionchur (m.sh., emaille haghaidh seoladh ríomhphoist nó numberle haghaidh faisnéise uimhriúla) chun leas a bhaint as rialuithe ionchuir níos nuaí amhail fíorú ríomhphoist, roghnú uimhreacha, agus go leor eile.

Seo sampla tapa chun stíleanna foirmeacha Bootstrap a léiriú. Lean ort ag léamh le haghaidh doiciméadú ar na ranganna riachtanacha, leagan amach na bhfoirmeacha, agus go leor eile.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Rialuithe foirm

Stílítear rialuithe foirme téacs—cosúil le <input>s, <select>s, agus <textarea>s leis an .form-controlrang. San áireamh tá stíleanna le haghaidh cuma ginearálta, staid fócais, méid, agus níos mó.

Bí cinnte iniúchadh a dhéanamh ar ár bhfoirmeacha saincheaptha chun tuilleadh stíl <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Le haghaidh ionchuir comhad, babhtáil an .form-controlle haghaidh .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Sizing

Socraigh airde ag baint úsáide as ranganna mar .form-control-lgagus .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Léamh amháin

Cuir an readonlyaitreabúid Boole ar ionchur chun mionathrú ar luach an ionchuir a chosc. Tá cuma níos éadroime ar ionchuir inléite amháin (cosúil le hionchuir faoi mhíchumas), ach coinníonn siad an cúrsóir caighdeánach.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Téacs simplí inléite amháin

Más mian leat <input readonly>eilimintí i d’fhoirm a bheith stílithe mar ghnáth-théacs, bain úsáid as an .form-control-plaintextrang chun stíliú réimse na foirme réamhshocraithe a bhaint agus coinnigh an corrlach agus an stuáil cheart.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Ionchuir Raon

Socraigh ionchuir raon inscrollaithe cothrománach ag baint úsáide as .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Seiceálacha agus raidiónna

Feabhsaítear ticbhoscaí réamhshocraithe agus raidiónna le cabhair ó .form-check, rang amháin don dá chineál ionchuir a fheabhsaíonn leagan amach agus iompar a n-eilimintí HTML . Tá ticbhoscaí ann chun rogha amháin nó roinnt roghanna a roghnú i liosta, agus tá raidiónna chun rogha amháin a roghnú as go leor.

Tacaítear le ticbhoscaí agus raidiónna do dhaoine faoi mhíchumas. Cuirfidh an disabledtréith dath níos éadroime i bhfeidhm chun cabhrú le staid an ionchuir a léiriú.

Tacaíonn ticbhoscaí agus cnaipí raidió le bailíochtú foirmeacha HTML-bhunaithe agus soláthraíonn siad lipéid achomair inrochtana. Mar sin, is eilimintí deartháireacha iad ár gcuid <input>agus ár gcuid <label>deartháireacha seachas eilimintí <input>laistigh de <label>. Tá sé seo beagán níos briathar mar ní mór duit a shonrú idagus fortréithe a bhaineann leis an <input>agus <label>.

Réamhshocrú (cruachta)

De réir réamhshocraithe, déanfar aon líon ticbhoscaí agus raidiónna atá díreach ina ndeartháireacha a chruachadh go hingearach agus spásáil chuí a bheith acu le .form-check.

ticbhosca réamhshocraithe

ticbhosca díchumasaithe

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Raidió réamhshocraithe

An dara raidió réamhshocraithe

Raidió faoi mhíchumas

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

I líne

Grúpáil ticbhoscaí nó raidiónna ar an tsraith chothrománach chéanna trí chur .form-check-inlinele haon .form-check.

3 (míchumas)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (míchumas)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Gan lipéid

Cuir .position-staticleis na hionchuir laistigh .form-checknach bhfuil aon téacs lipéad orthu. Ná déan dearmad ainm inrochtana de chineál éigin a sholáthar do theicneolaíochtaí cúnta (mar shampla, ag baint úsáide as aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Leagan Amach

Ós rud é go bhfuil feidhm ag Bootstrap display: blockagus maidir width: 100%lenár rialuithe foirme go léir nach mór, cruachálfar foirmeacha go hingearach de réir réamhshocraithe. Is féidir ranganna breise a úsáid chun an leagan amach seo a athrú de réir foirme.

Foirm grúpaí

Is .form-groupé an rang an bealach is éasca chun struchtúr éigin a chur le foirmeacha. Soláthraíonn sé rang solúbtha a spreagann grúpáil cheart ar lipéid, rialuithe, téacs cabhrach roghnach, agus teachtaireachtaí bailíochtaithe foirmeacha. De réir réamhshocraithe ní bhaineann sé ach margin-bottom, ach piocann sé stíleanna breise isteach .form-inlinede réir mar is gá. Úsáid é le <fieldset>s, <div>s, nó beagnach aon eilimint eile.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Foirm greille

Is féidir foirmeacha níos casta a thógáil ag baint úsáide as ár ranganna greille. Úsáid iad seo le haghaidh leagan amach foirmeacha a éilíonn colúin iolracha, leithid éagsúil, agus roghanna ailínithe breise.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Foirm as a chéile

Is féidir leat babhtáil freisin .rowle haghaidh .form-row, athrú ar ár líne greille caighdeánach a sháraíonn gáitéir na gcolún réamhshocraithe le haghaidh leagan amach níos déine agus níos dlúithe.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Is féidir leagan amach níos casta a chruthú leis an gcóras greille freisin.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Foirm chothrománach

Cruthaigh foirmeacha cothrománacha leis an eangach tríd an .rowrang a chur le grúpaí foirme agus na .col-*-*ranganna a úsáid chun leithead do lipéid agus do rialtáin a shonrú. Bí cinnte go gcuirfidh .col-form-labeltú le do <label>chuid s freisin ionas go mbeidh siad dírithe go hingearach leis na rialuithe foirme a bhaineann leo.

Uaireanta, b'fhéidir go mbeadh ort úsáid a bhaint as fóntais corrlaigh nó stuála chun an ailíniú foirfe sin a theastaíonn uait a chruthú. Mar shampla, bhaineamar an padding-toplipéad ar ár lipéad ionchuir raidió cruachta chun bunlíne an téacs a ailíniú níos fearr.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Méid lipéad foirme cothrománach

Bí cinnte a úsáid .col-form-label-smnó .col-form-label-lgar do chuid <label>nó <legend>s a leanúint i gceart méid .form-control-lgagus .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Méid an cholúin

Mar a léiríodh sna samplaí roimhe seo, ligeann ár gcóras eangaí duit aon líon .cols a chur laistigh de .rownó .form-row. Roinnfidh siad an leithead atá ar fáil go cothrom eatarthu. Is féidir leat fo-thacar de do cholúin a phiocadh freisin chun níos mó spáis nó níos lú a ghlacadh, agus na .cols eile a roinnt go cothrom leis an gcuid eile, le haicmí colúin ar leith mar .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Uathmhéadú

Úsáideann an sampla thíos áirgiúlacht flexbox chun an t-ábhar a lárú go hingearach agus athraíonn .colsé .col-autoé ionas nach nglacfaidh do cholúin ach an oiread spáis agus is gá. Cuir ar bhealach eile, na méideanna colún féin bunaithe ar an ábhar.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Is féidir leat é sin a athmhúnlú arís le ranganna colúin a bhaineann go sonrach le méid.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Agus ar ndóigh tacaítear le rialuithe foirm saincheaptha .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Foirmeacha inlíne

Úsáid an .form-inlinerang chun sraith lipéad, rialuithe foirme, agus cnaipí a thaispeáint ar shraith chothrománach amháin. Athraíonn rialuithe foirm laistigh de fhoirmeacha inlíne beagán óna stáit réamhshocraithe.

Tá rialuithe display: flex, ag titim aon spás bán HTML agus ag ligean duit a chur ar fáil rialú ailínithe le spásáil agus fóntais flexbox .
Faigheann rialtáin agus grúpaí ionchuir width: autochun an réamhshocrú Bootstrap a shárú width: 100%.
Ní bhíonn rialtáin le feiceáil ach inlíne i bpoirt amhairc atá ar leithead 576px ar a laghad chun cuntais chúngacha ar ghléasanna soghluaiste a áireamh.

Seans go mbeidh ort aghaidh a thabhairt de láimh ar leithead agus ar ailíniú na rialuithe foirme aonair le fóntais spásála (mar a thaispeántar thíos). Ar deireadh, bí cinnte go n-áiríonn tú <label>rialú le gach foirm i gcónaí, fiú más gá duit é a cheilt ó chuairteoirí nach léitheoir scáileáin iad le .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Tacaítear freisin le rialuithe foirm saincheaptha agus le roghnúcháin.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Roghanna eile seachas lipéid fholaithe

Beidh deacrachtaí ag teicneolaíochtaí cúnta ar nós léitheoirí scáileáin le d’fhoirmeacha mura n-áiríonn tú lipéad le haghaidh gach ionchuir. Maidir leis na foirmeacha inlíne seo, is féidir leat na lipéid a cheilt ag baint úsáide as an .sr-onlyrang. Tá tuilleadh modhanna malartacha ann chun lipéad a sholáthar do theicneolaíochtaí cúnta, amhail an aria-label, aria-labelledbynó an titleaitreabúid. Mura bhfuil aon cheann díobh seo i láthair, féadfaidh teicneolaíochtaí cúnta dul i muinín an placeholdertréith a úsáid, más ann dóibh, ach tabhair faoi deara placeholdernach moltar é a úsáid in ionad modhanna eile lipéadaithe.

Téacs cabhrach

Is féidir téacs cabhrach blocleibhéil i bhfoirmeacha a chruthú trí úsáid a bhaint as .form-text(ar a dtugtaí .help-blockin v3 roimhe seo). Is féidir téacs cabhrach inlíne a chur i bhfeidhm go solúbtha ag baint úsáide as aon eilimint HTML inlíne agus ranganna fóntais mar .text-muted.

Téacs cabhrach a nascadh le rialuithe foirmeacha

Ba cheart go mbeadh baint shoiléir ag téacs cabhrach leis an rialú foirme a bhaineann leis an aria-describedbytréith a úsáid. Cinnteoidh sé seo go bhfógróidh teicneolaíochtaí cúnta - mar léitheoirí scáileáin - an téacs cabhrach seo nuair a dhíríonn an t-úsáideoir nó nuair a théann an t-úsáideoir isteach sa rialú.

Is féidir téacs cabhrach faoi bhun ionchuir a stíliú le .form-text. Áiríonn an rang seo display: blockagus cuireann sé roinnt corrlach barr leis le haghaidh spásáil éasca ó na hionchuir thuas.

Pasfhocal Caithfidh do phasfhocal a bheith 8-20 carachtar ar fad, litreacha agus uimhreacha a bheith ann, agus gan spásanna, carachtair speisialta nó emoji a bheith ann.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Is féidir le téacs inlíne aon eilimint HTML tipiciúil inlíne a úsáid (bíodh sé ina <small>, , <span>, nó rud éigin eile) gan rud ar bith níos mó ná aicme fóntais.

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Foirmeacha faoi mhíchumas

Cuir an disabledaitreabúid Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc agus chun cuma níos éadroime a dhéanamh air.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Cuir an disabledtréith le a <fieldset>chun na rialuithe go léir laistigh a dhíchumasú.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Uaimh le hancairí

Déileálann brabhsálaithe le gach rialtán foirm dhúchasach ( <input>, <select>, , agus <button>eilimintí) taobh istigh de <fieldset disabled>mar dhaoine faoi mhíchumas, rud a choscann idirghníomhartha méarchláir agus lucha orthu.

Mar sin féin, má tá eilimintí saincheaptha cosúil le cnaipe mar <a ... class="btn btn-*">, san áireamh ar d’fhoirm freisin, ní thabharfar ach stíl pointer-events: none. Mar a luadh sa rannán faoi staid mhíchumais le haghaidh cnaipí (agus go háirithe san fho-roinn le haghaidh eilimintí ancaire), níl an t-airí CSS seo caighdeánaithe go fóill agus ní thugtar tacaíocht iomlán dó in Internet Explorer 10. Beidh na rialuithe ancaire-bhunaithe fós ann freisin. fócasaithe agus inoibrithe ag baint úsáide as an méarchlár. Ní mór duit na rialuithe seo a mhodhnú de láimh trí chur tabindex="-1"leo chun iad a chosc ó fhócas a fháil agus aria-disabled="disabled"a staid a chur in iúl do theicneolaíochtaí cúnta.

Comhoiriúnacht tras-bhrabhsálaí

Cé go gcuirfidh Bootstrap na stíleanna seo i bhfeidhm i ngach brabhsálaí, ní thacaíonn Internet Explorer 11 agus thíos go hiomlán leis an disabledtréith ar <fieldset>. Úsáid JavaScript saincheaptha chun an réimse réimse sna brabhsálaithe seo a dhíchumasú.

Bailíochtú

Cuir aiseolas luachmhar inghníomhaithe ar fáil do d’úsáideoirí le bailíochtú foirm HTML5 – ar fáil inár mbrabhsálaithe go léir a dtacaítear leo . Roghnaigh ó aiseolas bailíochtaithe réamhshocraithe an bhrabhsálaí, nó cuir teachtaireachtaí saincheaptha i bhfeidhm lenár ranganna ionsuite agus JavaScript tosaithe.

Is eol dúinn nach bhfuil na stíleanna bailíochtaithe saincheaptha ar thaobh an chliaint agus na leideanna uirlisí inrochtana faoi láthair, ós rud é nach bhfuil siad nochta do theicneolaíochtaí cúnta. Cé go n-oibrímid ar réiteach, molaimid an rogha ar thaobh an fhreastalaí nó an modh bailíochtaithe brabhsálaí réamhshocraithe a úsáid.

Conas a oibríonn sé

Seo mar a oibríonn bailíochtú foirmeacha le Bootstrap:

Cuirtear bailíochtú foirm HTML i bhfeidhm trí dhá rang bhréige CSS, :invalidagus :valid. Baineann sé le <input>, <select>, agus <textarea>eilimintí.
Déanann Bootstrap na stíleanna :invalidagus na stíleanna chuig an rang :validtuismitheora a scóip, a chuirtear i bhfeidhm go hiondúil ar an . Seachas sin, taispeánann aon réimse riachtanach gan luach go bhfuil sé neamhbhailí ar ualach an leathanaigh. Ar an mbealach seo, is féidir leat a roghnú cathain a ghníomhachtú iad (go hiondúil tar éis iarracht a dhéanamh an fhoirm a chur isteach)..was-validated<form>
Chun cuma na foirme a athshocrú (mar shampla, i gcás aighneachtaí foirme dinimiciúla ag baint úsáide as AJAX), bain an .was-validatedrang den rang <form>arís tar éis í a chur isteach.
Mar chúltaca, .is-invalidis .is-validféidir ranganna a úsáid in ionad na bréige-ranganna le haghaidh bailíochtú taobh an fhreastalaí . Níl .was-validatedrang tuismitheora ag teastáil uathu.
Mar gheall ar shrianta ar an gcaoi a n-oibríonn CSS, ní féidir linn (faoi láthair) stíleanna a chur i bhfeidhm ar <label>fhoirm a thagann roimh rialú foirme sa DOM gan cabhair ó JavaScript saincheaptha.
Tacaíonn gach brabhsálaí nua-aimseartha leis an API bailíochtaithe srianta , sraith de mhodhanna JavaScript chun rialuithe foirmeacha a bhailíochtú.
Féadfaidh teachtaireachtaí aiseolais úsáid a bhaint as réamhshocruithe an bhrabhsálaí (difriúil do gach brabhsálaí, agus neamhshonraithe trí CSS) nó ár stíleanna aiseolais saincheaptha le HTML agus CSS breise.
Is féidir leat teachtaireachtaí saincheaptha bailíochta a sholáthar setCustomValidityi JavaScript.

Agus é sin san áireamh, smaoinigh ar na demos seo a leanas le haghaidh ár stíleanna bailíochtaithe foirmeacha saincheaptha, ranganna taobh freastalaí roghnacha, agus mainneachtainí brabhsálaí.

Stíleanna saincheaptha

Le haghaidh teachtaireachtaí bailíochtaithe foirme Bootstrap saincheaptha, beidh ort an novalidateaitreabúid Boole a chur le do <form>. Díchumasaíonn sé seo leideanna uirlisí aiseolais réamhshocraithe an bhrabhsálaí, ach soláthraíonn sé rochtain fós ar na APIanna bailíochtaithe foirmeacha i JavaScript. Déan iarracht an fhoirm thíos a chur isteach; Idircheapfaidh ár JavaScript an cnaipe cuir isteach agus seolfaidh sé aiseolas chugat. Agus tú ag iarraidh cur isteach, feicfidh tú na stíleanna :invalidagus na :validstíleanna a chuirtear i bhfeidhm ar rialuithe d'fhoirme.

Cuireann stíleanna aiseolais saincheaptha dathanna saincheaptha, teorainneacha, stíleanna fócais agus deilbhíní cúlra i bhfeidhm chun aiseolas a chur in iúl níos fearr. Níl deilbhíní cúlra le haghaidh <select>s ar fáil ach le .custom-select, agus ní .form-control.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Réamhshocruithe brabhsálaí

Nach bhfuil suim agat i dteachtaireachtaí aiseolais bailíochtaithe saincheaptha nó i scríobh JavaScript chun iompraíochtaí foirm a athrú? Gach go maith, is féidir leat úsáid a bhaint as an bhrabhsálaí réamhshocraithe. Déan iarracht an fhoirm thíos a chur isteach. Ag brath ar do bhrabhsálaí agus OS, feicfidh tú stíl aiseolais atá beagán difriúil.

Cé nach féidir na stíleanna aiseolais seo a stíliú le CSS, is féidir leat an téacs aiseolais a shaincheapadh fós trí JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Taobh an fhreastalaí

Molaimid bailíochtú taobh an chliaint a úsáid, ach ar eagla go dteastaíonn bailíochtú ar thaobh an fhreastalaí uait, is féidir leat réimsí foirme neamhbhailí agus bailí a chur in iúl le .is-invalidagus .is-valid. Tabhair faoi deara go .invalid-feedbackdtacaítear leis na ranganna seo freisin.

Le haghaidh réimsí neamhbhailí, cinntigh go bhfuil baint ag an aischothú/teachtaireacht earráide neamhbhailí leis an réimse foirme ábhartha ag baint úsáide as aria-describedby. Ligeann an tréith seo idgur féidir tagairt a dhéanamh do níos mó ná ceann amháin, ar eagla go díríonn an réimse ar théacs foirme breise cheana féin.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Eilimintí tacaithe

Tá stíleanna bailíochtaithe ar fáil do na rialuithe foirme agus na gcomhpháirteanna seo a leanas:

<input>s agus <textarea>s le.form-control
<select>s le .form-controlor.custom-select
.form-checks
.custom-checkboxs agus .custom-radios
.custom-file

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Leideanna uirlisí

Má cheadaíonn leagan amach d’fhoirme é, is féidir leat na ranganna a mhalartú le .{valid|invalid}-feedbackhaghaidh .{valid|invalid}-tooltipranganna chun aiseolas bailíochtaithe a thaispeáint i leid uirlisí stílithe. Bí cinnte go bhfuil tuismitheoir in éineacht leis chun leideanna position: relativeuirlisí a aimsiú. Sa sampla thíos, tá sé seo ag ár ranganna colún cheana féin, ach d'fhéadfadh go mbeadh socrú eile ag teastáil ó do thionscadal.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Saincheapadh

Is féidir stáit bhailíochtaithe a shaincheapadh trí Sass leis an $form-validation-statesléarscáil. Lonnaithe inár _variables.scssgcomhad, lúbtar an léarscáil Sass seo chun na stáit réamhshocraithe valid/ invalidbailíochtaithe a ghiniúint. San áireamh tá léarscáil neadaithe chun dath agus íocón gach stáit a shaincheapadh. Cé nach dtacaíonn brabhsálaithe le stát ar bith eile, is féidir leo siúd a úsáideann stíleanna saincheaptha aiseolas foirmeacha níos casta a chur leo go héasca.

Tabhair faoi deara le do thoil nach molaimid na luachanna seo a shaincheapadh gan an form-validation-statemixin a mhodhnú freisin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Bailíochtú grúpa ionchuir

Chun a fháil amach cad iad na heilimintí a dteastaíonn coirnéil chothromaithe taobh istigh de ghrúpa ionchuir le bailíochtú, tá .has-validationrang breise ag teastáil ó ghrúpa ionchuir.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Roghnaigh ainm úsáideora le do thoil.

Foirmeacha saincheaptha

Le haghaidh níos mó saincheaptha fós agus comhsheasmhacht trasbhrabhsálaí, bain úsáid as ár n-eilimintí foirm atá go hiomlán saincheaptha chun réamhshocruithe an bhrabhsálaí a athsholáthar. Tá siad bunaithe ar mharcáil shéimeantach agus inrochtana, mar sin is athsholáthar soladach iad d'aon rialú réamhshocraithe foirme.

Seiceálacha agus raidiónna

Tá gach ticbhosca agus raidió <input>agus <label>péireáil fillte i a <div>chun ár rialú saincheaptha a chruthú. Go struchtúrach , is é seo an cur chuige céanna lenár réamhshocrú .form-check.

Bainimid úsáid as an roghnóir siblíní ( ~) dár <input>stáit go léir - cosúil le :checked- chun ár dtáscaire foirme saincheaptha a stíliú i gceart. Nuair a chuirtear i gcomhar leis an .custom-control-labelrang, is féidir linn freisin an téacs do gach mír a stíl bunaithe ar an <input>staid.

<input>Cuirimid an réamhshocrú i bhfolach opacityagus úsáidimid an .custom-control-labelchun táscaire foirme saincheaptha nua a thógáil ina áit le ::beforeagus ::after. Ar an drochuair, ní féidir linn ceann saincheaptha a thógáil ó díreach toisc nach n- oibríonn <input>CSS ar an eilimint sin.content

Sna stáit seiceáilte, úsáidimid deilbhíní SVG leabaithe base64 ó Open Iconic . Soláthraíonn sé seo an smacht is fearr dúinn maidir le stíliú agus suíomh trasna brabhsálaithe agus gléasanna.

Boscaí seiceála

Seiceáil an ticbhosca saincheaptha seo

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Is féidir le ticbhoscaí saincheaptha an rang bréige a úsáid freisin :indeterminatenuair a shocraítear iad de láimh trí JavaScript (níl aon tréith HTML ar fáil chun é a shonrú).

Seiceáil an ticbhosca saincheaptha seo

Má tá jQuery á úsáid agat, ba cheart go mbeadh a leithéid de rud leordhóthanach:

$('.your-checkbox').prop('indeterminate', true)

Raidiónna

Scoránaigh an raidió saincheaptha seo

Nó scoránaigh an raidió saincheaptha eile seo

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

I líne

Scoránaigh an raidió saincheaptha seo

Nó scoránaigh an raidió saincheaptha eile seo

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Faoi mhíchumas

Is féidir ticbhoscaí agus raidiónna saincheaptha a dhíchumasú freisin. Cuir an disabledaitreabúid Boole leis an <input>agus déanfar an cur síos ar an táscaire saincheaptha agus ar an lipéad a stíliú go huathoibríoch.

Seiceáil an ticbhosca saincheaptha seo

Scoránaigh an raidió saincheaptha seo

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Lasca

Tá marcáil ticbhosca saincheaptha ag lasc ach úsáideann sé an .custom-switchrang chun lasc scoránaigh a dhéanamh. Tacaíonn lasca leis an disabledtréith freisin.

Scoránaigh an eilimint lasc seo

Eilimint lasc faoi mhíchumas

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Níl ag teastáil ó bhiachláir saincheaptha <select>ach rang saincheaptha, .custom-selectchun na stíleanna saincheaptha a spreagadh. Tá stíleanna saincheaptha teoranta don <select>chuma tosaigh agus ní féidir na s a mhodhnú <option>mar gheall ar theorainneacha an bhrabhsálaí.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Is féidir leat roghanna saincheaptha idir bheag agus mhór a roghnú freisin chun ár n-ionchur téacs den mhéid céanna a mheaitseáil.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Tacaítear leis an multipletréith freisin:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Mar atá an sizetréith:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Raon

<input type="range">Cruthaigh rialuithe saincheaptha le .custom-range. Tá an rian (an cúlra) agus an ordóg (an luach) le feiceáil mar an gcéanna thar brabhsálaithe. Toisc nach dtugann ach IE agus Firefox tacaíocht do “líonadh” a rian ón taobh clé nó ar dheis den ordóg mar mhodh chun dul chun cinn a léiriú go radhairc, ní thacaímid leis faoi láthair.

Raon samplach

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Tá luachanna intuigthe ag ionchuir raoin maidir le — minagus , faoi seach. Is féidir leat luachanna nua a shonrú dóibh siúd a úsáideann an agus na tréithe.max0100minmax

Raon samplach

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

De réir réamhshocraithe, cuireann raon “snap” isteach chuig luachanna an tslánuimhir. Chun é seo a athrú, is féidir leat luach a shonrú step. Sa sampla thíos, déanaimid líon na gcéimeanna a dhúbailt trí úsáid a bhaint as step="0.5".

Raon samplach

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Brabhsálaí comhaid

An breiseán molta chun ionchur comhaid saincheaptha a bheochan: bs-custom-file-input , sin an rud atá á úsáid againn faoi láthair anseo inár ndoiciméid.

Is é an t-ionchur comhaid an ceann is gnarly den tsraith agus teastaíonn JavaScript breise más mian leat iad a nascadh le Roghnaigh comhad feidhmiúil… agus téacs ainm comhaid roghnaithe.

Roghnaigh comhad

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Cuirimid an comhad réamhshocraithe i bhfolach <input>tríd opacityan <label>. Gintear an cnaipe agus suitear é le ::after. Ar deireadh, dearbhaímid go bhfuil widthspásáil cheart heightann <input>don ábhar mórthimpeall.

Na teaghráin a aistriú nó a shaincheapadh le SCSS

Úsáidtear an :lang()rang bréige chun an téacs “Brabhsáil” a aistriú go teangacha eile a cheadú. Sáraigh nó cuir iontrálacha leis an $custom-file-textathróg Sass leis an gclib teanga ábhartha agus teaghráin logánta. Is féidir na teaghráin Bhéarla a shaincheapadh ar an mbealach céanna. Mar shampla, seo mar a d’fhéadfadh duine aistriúchán Spáinnise a chur leis (is é cód teanga na Spáinne es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Seo lang(es)i bhfeidhm ar an ionchur comhaid saincheaptha le haghaidh aistriúchán Spáinnis:

Cartlann Roghnach

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Beidh ort teanga do dhoiciméid (nó fo-chrann de) a shocrú i gceart chun an téacs ceart a thaispeáint. Is féidir é seo a dhéanamh ag baint úsáide as an langtréith ar an <html>eilimint nó an Content-Languageceanntásc HTTP , i measc modhanna eile.

Na teaghráin a aistriú nó a shaincheapadh le HTML

Soláthraíonn Bootstrap bealach freisin chun an téacs “Brabhsáil” a aistriú go HTML leis an data-browsetréith is féidir a chur leis an lipéad ionchuir saincheaptha (mar shampla san Ollainnis):

Doiciméad Voeg je toe

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Foirmeacha

Forbhreathnú

Rialuithe foirm

Sizing

Léamh amháin

Téacs simplí inléite amháin

Ionchuir Raon

Seiceálacha agus raidiónna

Réamhshocrú (cruachta)

I líne

Gan lipéid

Leagan Amach

Foirm grúpaí

Foirm greille

Foirm as a chéile

Foirm chothrománach

Méid lipéad foirme cothrománach

Méid an cholúin

Uathmhéadú

Foirmeacha inlíne

Roghanna eile seachas lipéid fholaithe

Téacs cabhrach

Téacs cabhrach a nascadh le rialuithe foirmeacha

Foirmeacha faoi mhíchumas

Uaimh le hancairí

Comhoiriúnacht tras-bhrabhsálaí

Bailíochtú

Conas a oibríonn sé

Stíleanna saincheaptha

Réamhshocruithe brabhsálaí

Taobh an fhreastalaí

Eilimintí tacaithe

Leideanna uirlisí

Saincheapadh

Bailíochtú grúpa ionchuir

Foirmeacha saincheaptha

Seiceálacha agus raidiónna

Boscaí seiceála

Raidiónna

I líne

Faoi mhíchumas

Lasca

Roghnaigh roghchlár

Raon

Brabhsálaí comhaid

Na teaghráin a aistriú nó a shaincheapadh le SCSS

Na teaghráin a aistriú nó a shaincheapadh le HTML