Source

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" placeholder="Enter email">
    <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" placeholder="Password">
  </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" placeholder="Password">
    </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 díchumasaithe, ach chun not-allowedcúrsóir a sholáthar ar ainliú an tuismitheora <label>, beidh ort an disabledtréith a chur leis an .form-check-input. Cuirfidh an aitreabúid díchumasaithe dath níos éadroime i bhfeidhm chun cabhrú le staid an ionchuir a léiriú.

Tógtar ticbhoscaí agus raidiónna chun tacú le bailíochtú foirmeacha bunaithe ar HTML agus chun lipéid ghonta inrochtana a sholáthar. Mar sin, is gnéithe deartháireacha <input>agus deirfiúracha iad ár gcuid agus ár gcuid <label>féin 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 cheann .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 lipéad 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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 gcalafoirt 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á modhanna malartacha eile 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 bloc-leibhéal 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á rang 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 disabledtréith Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc agus chun go mbeidh cuma níos éadroime 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>
    <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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Uaimh le hancairí

De réir réamhshocraithe, déileálfaidh brabhsálaithe le gach rialtán foirm dhúchasach ( <input>, <select>agus <button>eilimintí) taobh istigh de a <fieldset disabled>bheith díchumasaithe, ag cosc ar idirghníomhaíochtaí méarchláir agus lucha araon. Mar sin féin, má tá gnéithe san fhoirm ar do fhoirm freisin <a ... class="btn btn-*">, ní thabharfar ach stíl pointer-events: none. Mar a tugadh faoi deara 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 fós agus ní thacaítear go hiomlán leis in Internet Explorer 10, agus ní chuirfidh sé cosc ar úsáideoirí méarchláir a bheith in ann na naisc seo a dhíriú nó a ghníomhachtú. Chun a bheith sábháilte, bain úsáid as JavaScript saincheaptha chun naisc den sórt sin a dhíchumasú.

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.

Molaimid faoi láthair go n-úsáidfí stíleanna bailíochtaithe saincheaptha, toisc nach bhfuil teachtaireachtaí bailíochtaithe réamhshocraithe an bhrabhsálaí nochta go comhsheasmhach do theicneolaíochtaí cúnta i ngach brabhsálaí (go háirithe, Chrome ar ríomhaire deisce agus soghluaiste).

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.

Ainm

Looks good!

Sloinne

Looks good!

Ainm úsáideora

Please choose a username.

Cathair

Please provide a valid city.

Stáit

Please provide a valid state.

Zip

Please provide a valid zip.

Aontú le téarmaí agus coinníollacha

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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 taobh an fhreastalaí uait, is féidir leat réimsí foirme neamhbhailí agus bailí a léiriú le .is-invalidagus .is-valid. Tabhair faoi deara go .invalid-feedbackdtacaítear leis na ranganna seo freisin.

Ainm

Breathnaíonn go maith!

Sloinne

Breathnaíonn go maith!

Ainm úsáideora

Roghnaigh ainm úsáideora le do thoil.

Cathair

Tabhair cathair bhailí le do thoil.

Stáit

Tabhair staid bhailí le do thoil.

Zip

Cuir zip bailí ar fáil.

Aontú le téarmaí agus coinníollacha

Ní mór duit aontú roimh chur isteach.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

Eilimintí tacaithe

Léiríonn ár bhfoirmeacha samplacha na téacsanna dúchasacha <input>thuas, ach tá stíleanna bailíochtaithe foirmeacha ar fáil dár rialuithe foirm saincheaptha freisin.

<form class="was-validated">
  <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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</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-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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ó fillte i <div>le deartháir nó deirfiúr <span>chun ár rialú saincheaptha a chruthú agus le <label>haghaidh an téacs a théann leis. 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="customRadioInline1" 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="customRadioInline1" 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="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</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

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

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

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í

Foirmeacha saincheaptha

Seiceálacha agus raidiónna

Boscaí seiceála

Raidiónna

I líne

Faoi mhíchumas

Roghnaigh roghchlár

Raon

Brabhsálaí comhaid

Na teaghráin a aistriú nó a shaincheapadh