Source

Nkyerɛwee ahorow

Nhwɛsoɔ ne dwumadie akwankyerɛ a ɛfa fom control styles, layout options, ne custom components a wɔde yɛ form ahodoɔ pii.

Nsɛm a Wɔaka abom

Bootstrap no fom controls no trɛw yɛn Rebooted form styles no mu ne adesua ahorow. Fa saa adesua ahorow yi di dwuma fa paw wɔn nkyerɛkyerɛmu a wɔahyɛ da ayɛ no mu ma nkyerɛase a ɛkɔ so daa wɔ browser ne mfiri ahorow nyinaa so.

Hwɛ sɛ wode typesu a ɛfata bedi dwuma wɔ nsɛm a wɔde ahyɛ mu nyinaa so (sɛ nhwɛso no, emailama imel address anaa numberakontaabu ho nsɛm) de anya nsɛm a wɔde hyɛ mu no sohwɛ foforo te sɛ imel nokwaredi, nɔma a wɔpaw, ne nea ɛkeka ho no so mfaso.

Nhwɛsoɔ a ɛyɛ ntɛm a ɛbɛkyerɛ Bootstrap no form styles nie. Kɔ so kenkan ma nsɛm a ɛfa adesua ahorow a wɔhwehwɛ, kratasin nhyehyɛe, ne nea ɛkeka ho ho.

Yɛrenkyɛ wo email no mma obi foforo da. 
<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-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>

Fom a wɔde di dwuma

Wɔde adesuakuw no na ɛyɛ nkyerɛwee kwan so tumi ahorow—te sɛ <input>s, <select>s, ne <textarea>s—no sɛnea wɔyɛ .form-controlno. Nea ɛka ho ne ntadehyɛ ahorow a wɔde hwɛ sɛnea ɛte wɔ ɔkwan a ɛkɔ akyiri so, tebea a wɔde wɔn adwene si so, ne kɛseyɛ, ne nea ɛkeka ho.

Hwɛ hu sɛ wobɛhwehwɛ yɛn amanne nkrataa no mu na ama woakɔ so ayɛ style <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>

Sɛ wopɛ fael nsɛm a wɔde hyɛ mu a, sesa .form-controlma .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 a wɔde yɛ nneɛma

Fa adesua ahorow te sɛ .form-control-lgne .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>

Akenkan nkutoo

Fa readonlyboolean su no ka ho wɔ input bi so na asiw nsakrae a wɔbɛyɛ wɔ input no bo no mu. Nsɛm a wɔde kenkan nkutoo no da adi sɛ ɛyɛ hare (te sɛ nsɛm a wɔde hyɛ mu a wɔagyae mu no ara pɛ), nanso kura cursor a ɛwɔ hɔ no mu.

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

Nkyerɛwee a ɛnyɛ den nkutoo a wɔkenkan

Sɛ wopɛ sɛ wonya <input readonly>elements wɔ wo fom mu styled sɛ plain text a, fa .form-control-plaintextclass no yi default form field styling no na kora margin ne padding a ɛfata no so.

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

Nnaka a wɔde hyɛ mu ne radio ahorow

.form-checkWɔde , adesuakuw biako ma nsɛm a wɔde hyɛ mu ahorow abien no nyinaa a ɛma wɔn HTML nneɛma no nhyehyɛe ne wɔn nneyɛe tu mpɔn na ɛma default checkboxes ne radio ahorow no tu mpɔn . Nnaka a wɔde hyɛ mu no yɛ nea wɔde paw nneɛma biako anaa pii wɔ list bi mu, bere a radio ahorow no yɛ nea wɔde paw ɔkwan biako fi pii mu.

Wɔboa checkboxes ne radio ahorow a wɔagyae mu, nanso sɛ wode not-allowedcursor bɛma wɔ hover of the parent <label>, ɛho behia sɛ wode disabledattribute no ka .form-check-input. Attribute a wɔagyae no de kɔla a ɛyɛ hann bedi dwuma de aboa akyerɛ input no tebea.

Wɔasi checkboxes ne radios a wɔde di dwuma no de boa HTML-based form validation na ɛma labels a ɛyɛ tiawa a wotumi nya. Sɛnea ɛte no, yɛn <input>s ne <label>s yɛ anuanom nneɛma a ɛne an <input>within a <label>. Eyi yɛ verbose kakra sɛnea ɛsɛ sɛ wokyerɛ idne forattributes de bata <input>ne <label>.

Default (a wɔaboaboa ano) .

Sɛnea wɔahyɛ no, wɔde checkbox ne radio dodow biara a ɛyɛ anuanom a wɔbɛn no ntɛm ara no bɛhyehyɛ no tẽẽ na wɔde .form-check.

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

Inline no mu

Kuw checkboxes anaa radio ahorow wɔ row koro no ara a ɛkɔ soro no so denam biribiara a wode bɛka ho .form-check-inlineno so .form-check.

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

Sɛ wɔmfa nkyerɛwde biara nka ho

Fa ka .position-staticinputs a ɛwɔ mu .form-checka enni label text biara ho. Kae sɛ wobɛda so ara de nkyerɛwde bi ama mfiridwuma a ɛboa (sɛ nhwɛso no, sɛ wode bedi dwuma 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>

Twa kwan

Esiane sɛ Bootstrap di dwuma display: blockna width: 100%ɛkame ayɛ sɛ ɛyɛ yɛn fom controls nyinaa nti, forms bɛ default stack vertically. Wobetumi de adesua foforo adi dwuma de ayɛ nsakrae wɔ nhyehyɛe yi mu wɔ krataa biara so.

Yɛ akuw ahorow

Adesuakuw .form-groupno ne ɔkwan a ɛyɛ mmerɛw a wɔfa so de nhyehyɛe bi ka nkrataa ahorow ho. Ɛma adesuakuw a ɛyɛ mmerɛw a ɛhyɛ labels, controls, mmoa nsɛm a wobetumi apaw, ne nkrasɛm a wɔde di nkrasɛm a wɔde ma no akuwakuw yiye ho nkuran. By default it only applies margin-bottom, nanso ɛfa styles afoforo wɔ mu .form-inlinesɛnea ɛho hia. Fa di dwuma wɔ <fieldset>s, <div>s, anaa ɛkame ayɛ sɛ ade foforo biara ho.

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

Fom grid no

Wobetumi de yɛn grid adesua ahorow no akyekye nkrataa a ɛyɛ den kɛse. Fa eyinom di dwuma ma fom nhyehyɛe a ɛhwehwɛ sɛ wɔde nkyerɛwde ahorow pii, ntrɛwmu ahorow, ne nhyehyɛe afoforo a wobɛpaw.

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

Nkyerɛwee row

Wubetumi nso sesa .rowama .form-row, yɛn gyinapɛn grid row no mu nsakrae a ɛbɔ default column gutters no so ma nhyehyɛe a ɛyɛ den na ɛyɛ ketewaa.

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

Wobetumi nso de grid nhyehyɛe no ayɛ nhyehyɛe ahorow a ɛyɛ den kɛse.

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

Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro

Fa grid no yɛ horizontal forms denam .rowclass no a wode bɛka form groups ho na wode .col-*-*classes no adi dwuma de akyerɛ wo labels ne controls no trɛw. Hwɛ hu sɛ wode bɛka .col-form-labelwo <label>s nso ho sɛnea ɛbɛyɛ a wɔbɛyɛ vertically centered ne wɔn a ɛbata ho form controls.

Ɛtɔ mmere bi a, ebia ɛho behia sɛ wode margin anaa padding utilities di dwuma de yɛ saa alignment a edi mũ a wuhia no. Sɛ nhwɛso no, yɛayi nea padding-topɛwɔ yɛn stacked radio inputs label no so na ama nsɛm no mfiase no ahyia yiye.

Radio ahorow
Hwɛ adaka no mu 
<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>
Horizontal kratasin label no kɛseyɛ

Hwɛ hu sɛ wode .col-form-label-smanaa .col-form-label-lgwo <label>s anaa s bedi dwuma de adi ne <legend>kɛse no akyi yiye ..form-control-lg.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>

Kɔla a wɔde yɛ kɛse

Sɛnea wɔakyerɛ wɔ nhwɛso ahorow a atwam no mu no, yɛn grid nhyehyɛe no ma wo kwan ma wode .cols dodow biara gu a .rowanaa .form-row. Wɔbɛkyekyɛ ntrɛwmu a ɛwɔ hɔ no mu pɛpɛɛpɛ wɔ wɔn ntam. Wubetumi nso apaw wo nkyerɛwde ahorow no fã ketewaa bi de agye baabi kɛse anaa kakraa bi, bere a .cols a aka no kyekyɛ nkae no mu pɛpɛɛpɛ, a nkyerɛwde ahorow pɔtee bi te sɛ .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>

Auto-sizing a wɔde yɛ nneɛma

Nhwɛsoɔ a ɛwɔ aseɛ ha yi de flexbox utility di dwuma de hyɛ emu nsɛm no mfimfini gyina hɔ na ɛsesa .colkɔ .col-autosɛdeɛ ɛbɛyɛ a wo columns no bɛgye baabi dodoɔ a ɛhia nko ara. Sɛ yɛbɛka no ɔkwan foforo so a, kɔla no kɛse gyina emu nsɛm so.

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

Afei wubetumi remix saa bio ne size-specific column classes.

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

Na nokwarem no , wɔboa custom form controls .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" 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>

Nkrataa a ɛwɔ intanɛt so

Fa .form-inlineadesua no kyerɛ label ahorow, fom controls, ne button ahorow a ɛtoatoa so wɔ row biako a ɛkɔ soro so. Fom sohwɛ a ɛwɔ inline fom mu no gu ahorow kakra wɔ wɔn default tebea no ho.

  • Controls yɛ display: flex, a ɛbubu HTML white space biara na ɛma wo kwan ma wode alignment control a ɛwɔ spacing ne flexbox utilities ma.
  • Controls ne input akuw gye width: autode bu Bootstrap default no width: 100%so .
  • Controls no pue wɔ inline mu nkutoo wɔ viewports a anyɛ yiye koraa no ne tɛtrɛtɛ yɛ 576px de bu akontaa ma viewports teateaa wɔ mobile devices so.

Ebia ɛho behia sɛ wode nsa di ankorankoro kratasin sohwɛ ahorow no trɛw ne sɛnea ɛne ntamgyinafo utilities (sɛnea wɔakyerɛ wɔ ase ha no) hyia no ho dwuma. Nea etwa to no, hwɛ hu sɛ wode a <label>bɛka kratasin biara sohwɛ ho bere nyinaa, sɛ ɛho hia mpo sɛ wode sie ahɔho a wɔnyɛ screenreader a wɔde .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>

Wɔboa custom form controls ne selects nso.

<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>
Nneɛma foforo a wɔde besi nkyerɛwde a wɔde asie ananmu

Mfiridwuma a ɛboa te sɛ screen readers benya ɔhaw wɔ wo nkrataa no ho sɛ woamfa label anhyɛ biribiara a wode bɛhyɛ mu no mu a. Wɔ saa inline nkrataa yi ho no, wubetumi de .sr-onlyadesuakuw no asie nkyerɛwde ahorow no. Akwan foforo wɔ hɔ a wɔfa so de ahyɛnsode ma mfiridwuma a ɛboa, te sɛ aria-label, aria-labelledbyanaa titlesu no. Sɛ eyinom mu biara nni hɔ a, mfiridwuma a ɛboa no betumi de placeholdersu no adi dwuma, sɛ ɛwɔ hɔ a, nanso hyɛ no nsow sɛ wɔmfa nni dwuma placeholdersɛ akwan foforo a wɔfa so de nkyerɛwde gu so no ananmu.

Mmoa nsɛm

Wobetumi de .form-text(kan no na wonim no sɛ .help-blockwɔ v3 mu) ayɛ Block-level mmoa nsɛm a ɛwɔ nkrataa mu. Wobetumi de inline mmoa nkyerɛwee adi dwuma wɔ ɔkwan a ɛyɛ mmerɛw so denam inline HTML element biara ne mfaso adesua ahorow te sɛ .text-muted.

Mmoa nsɛm a wɔde bata kratasin sohwɛ ahorow ho

Ɛsɛ sɛ mmoa nsɛm no bata krataa sohwɛ a ɛfa aria-describedbysu no a wɔde bedi dwuma ho no ho pefee. Eyi bɛma wɔahwɛ ahu sɛ mfiridwuma a ɛboa—te sɛ screen readers—bɛbɔ mmoa nsɛm yi ho amanneɛ bere a nea ɔde di dwuma no de n’adwene si so anaasɛ ɔhyɛn control no mu no.

Mmoa nsɛm a ɛwɔ inputs ase no betumi ayɛ styled ne .form-text. Saa adesua yi de bi ka ho display: blockna ɛde top margin bi ka ho ma ɛyɛ mmerɛw sɛ wɔbɛma ntam kwan afi nsɛm a wɔde ahyɛ mu a ɛwɔ atifi hɔ no mu.

Ɛsɛ sɛ wo password no tenten yɛ nkyerɛwde 8-20, nkyerɛwde ne nɔma wom, na ɛnsɛ sɛ ɛwɔ ntam, nkyerɛwde soronko, anaa emoji. 
<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>

Inline text betumi de inline HTML element biara a ɛyɛ nea wɔtaa de di dwuma (sɛ ɛyɛ <small>, <span>, anaa biribi foforo) adi dwuma a biribiara nni mu sɛ utility class.

Ɛsɛ sɛ ne tenten yɛ nkyerɛwde 8-20. 
<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>

Nkrataa a wɔadi dɛm

Fa disabledboolean attribute no ka ho wɔ input bi so na asiw ɔdefo nkitahodi ano na ama ayɛ te sɛ nea ɛyɛ hare.

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

Fa disabledattribute no ka a ho na <fieldset>ama controls a ɛwɔ mu no nyinaa ayɛ adwuma.

<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>
Kɔkɔbɔ a wɔde ankora ahorow ahyɛ mu

Sɛnea wɔahyɛ no, browser ahorow no bɛfa native form controls ( <input>, <select>ne <button>elements) a ɛwɔ a mu <fieldset disabled>nyinaa sɛ wɔagyae, na asiw keyboard ne mouse nkitahodi nyinaa ano wɔ wɔn so. Nanso, sɛ wo kratasin no nso de <a ... class="btn btn-*">nneɛma bi ka ho a, wɔbɛma eyinom kwan a ɛyɛ pointer-events: none. Sɛnea wɔahyɛ no nsow wɔ ɔfa a ɛfa disabled state ho ma buttons (na titiriw wɔ ɔfa ketewa a ɛfa anchor elements ho), saa CSS agyapade yi nnya nyɛɛ standardized na wonnya mmoa koraa wɔ Opera 18 ne nea ɛba fam, anaasɛ wɔ Internet Explorer 10 mu, na edii nkonim 't nsiw keyboard dwumadiefoɔ kwan sɛ wɔbɛtumi de wɔn adwene asi so anaasɛ wɔbɛma saa links yi ayɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma link ahorow a ɛtete saa no nyɛ adwuma.

Cross-browser a ɛne ne ho hyia

Bere a Bootstrap de saa akwan yi bedi dwuma wɔ browser ahorow nyinaa mu no, Internet Explorer 11 ne nea ɛwɔ ase ha no ntumi mmoa disabledsu no koraa wɔ <fieldset>. Fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma fieldset no nyɛ adwuma wɔ browser ahorow yi mu.

Nneɛma a Wɔde Di Dwuma

Fa nsɛm a ɛsom bo, a ɛyɛ adwuma ma wo dwumadiefoɔ no denam HTML5 kratasin a wɔde di dwuma so– a ɛwɔ yɛn brawsa a yɛboa nyinaa mu . Paw fi browser default validation feedback no mu, anaa fa custom messages di dwuma denam yɛn adesua ahorow a wɔasisi ne JavaScript a wɔde fi ase no so.

Yɛkamfo custom validation styles kyerɛ kɛse efisɛ wɔmfa native browser defaults mma screen akenkanfo.

Sɛnea ɛyɛ adwuma

Sɛnea fom validation yɛ adwuma wɔ Bootstrap ho ni:

  • HTML kratasin a wɔde di dwuma no yɛ nea wɔde di dwuma denam CSS no pseudo-classes abien no so, :invalidne :valid. Ɛfa <input>, <select>, ne <textarea>element ahorow ho.
  • Bootstrap scopes :invalidne :validstyles to awofo .was-validatedadesua, mpɛn pii no wɔde di dwuma wɔ <form>. Sɛ ɛnte saa a, afuo biara a wɔhwehwɛ a enni botae no bɛda adi sɛ ɛnyɛ adwuma wɔ kratafa a wɔde hyɛ mu. Saa kwan yi so no, wubetumi apaw bere a wode bɛyɛ adwuma (mpɛn pii no bere a wɔabɔ mmɔden sɛ wode kratasin bɛmena akyi).
  • Sɛ́ fallback, .is-invalidna .is-validwobetumi de adesua ahorow adi dwuma sen sɛ wɔde pseudo-klas ahorow no bedi dwuma ama server afã validation . Wɔnhwehwɛ sɛ wɔyɛ .was-validatedawofo adesua.
  • Esiane anohyeto ahorow a ɛwɔ sɛnea CSS yɛ adwuma mu nti, yentumi (mprempren) mfa styles nni dwuma wɔ a <label>a ɛba ansa na form control bi anim wɔ DOM no mu a JavaScript a wɔahyɛ da ayɛ no mmoa nka ho.
  • Nnɛyi brawsa nyinaa boa constraint validation API , JavaScript akwan a ɛtoatoa so a wɔfa so ma fom sohwɛ ahorow di dwuma.
  • Nsɛm a wɔde ma no betumi de browser defaults (sono ma browser biara, na ɛnam CSS so ntumi nkyerɛw) anaa yɛn nsɛm a wɔde ma a wɔahyɛ da ayɛ a HTML ne CSS foforo wom adi dwuma.
  • Wubetumi de nkrasɛm a wɔahyɛ da ayɛ a ɛkyerɛ sɛ ɛyɛ nokware ama setCustomValiditywɔ JavaScript mu.

Bere a ɛno wɔ w’adwenem no, susuw demo ahorow a edidi so yi ho ma yɛn custom form validation styles, optional server side classes, ne browser defaults.

Nneɛma a wɔde yɛ nneɛma a wɔahyɛ da ayɛ

Sɛ wopɛ Bootstrap fom validation nkrasɛm a wɔahyɛ da ayɛ a, ɛho behia sɛ wode novalidateboolean attribute no ka wo <form>. Wei ma browser default feedback adwinnade no nyɛ adwuma, nanso ɛda so ara ma kwan kɔ fom validation API ahorow a ɛwɔ JavaScript mu no so. Bɔ mmɔden sɛ wode kratasin a ɛwɔ ase ha no bɛmena; yɛn JavaScript no bɛtwa submit button no mu na ɛde nsɛm a ɛfa ho akɔma wo.

Sɛ worebɔ mmɔden sɛ wode bɛmena a, wubehu :invalidne :validstyles a wɔde adi dwuma wɔ wo form controls no so.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
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>

Browser no yɛ nea wɔahyɛ da ayɛ

W’ani nnye custom validation feedback messages anaa JavaScript a wobɛkyerɛw de asesa form suban ho? Ne nyinaa ye, wubetumi de browser no defaults adi dwuma. Bɔ mmɔden sɛ wode kratasin a ɛwɔ ase ha no bɛmena. Ɛgyina wo browser ne OS so no, wobɛhunu ɔkwan soronko kakra a wobɛfa so akyerɛ wo nsɛm.

Bere a wontumi mfa CSS nsiesie saa nsɛm a wɔka fa ho no, woda so ara betumi afa JavaScript so ayɛ nsɛm a wɔka kyerɛ no ho nhyehyɛe.

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

Server afã

Yɛhyɛ nyansa sɛ fa client side validation di dwuma, nanso sɛ ɛba sɛ wuhia server side a, wubetumi de .is-invalidne .is-valid. Hyɛ no nsow sɛ .invalid-feedbackwɔboa nso wɔ adesua ahorow yi mu.

Ɛte sɛ nea eye!
Ɛte sɛ nea eye!
@
Yɛsrɛ wo paw edin a wode bedi dwuma.
Yɛsrɛ sɛ momfa kurow a ɛfata mma.
Yɛsrɛ sɛ fa tebea a ɛfata ma.
Yɛsrɛ sɛ fa zip a ɛfata ma.
Ɛsɛ sɛ wopene so ansa na wode akɔma. 
<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>

Nneɛma a wɔboa

Yɛn nhwɛsoɔ nkrataa kyerɛ native textual <input>s wɔ atifi hɔ, nanso fom validation styles wɔ hɔ ma yɛn custom form controls, nso.

Nhwɛso nsɛm a wɔde ma a ɛnyɛ adwuma
Nhwɛso pii a ɛnyɛ nokware nsɛm a wɔde ma
Nhwɛso a enni mu amanne paw nsɛm a wɔka
Nhwɛso a ɛnyɛ adwuma a wɔahyɛ da ayɛ fael nsɛm a wɔka 
<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>

Nnwinnade Ho Afotu

Sɛ wo fom nhyehyeɛ ma ho kwan a, wobɛtumi asesa .{valid|invalid}-feedbackadesua ahodoɔ no ama .{valid|invalid}-tooltipadesua ahodoɔ no de akyerɛ validation feedback wɔ styled tooltip mu. Hwɛ hu sɛ wowɔ ɔwofo bi a position: relativeɔwɔ so ma adwinnade ho nsɛm a wɔde besi hɔ. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛn column classes no wɔ yei dada, nanso wo project no betumi ahwehwɛ sɛ wobɛhyehyɛ foforɔ.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<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>

Nkrataa a wɔahyɛ da ayɛ

Sɛ wopɛ sɛ woyɛ nsakrae pii mpo na ɛma wohu browser no pɛpɛɛpɛ a, fa yɛn form elements a wɔahyɛ da ayɛ no koraa no si browser defaults no ananmu. Wɔasi wɔ semantic ne accessible markup atifi, enti wɔyɛ solid replacements ma default form control biara.

Nnaka a wɔde hyɛ mu ne radio ahorow

Wɔde checkbox ne radio biara abɔ a <div>ne nua bi <span>de ayɛ yɛn custom control ne a <label>ama nsɛm a ɛka ho no. Wɔ nhyehyɛe mu no, eyi yɛ ɔkwan koro no ara a yɛn default no fa so .form-check.

Yɛde sibling selector ( ~) di dwuma ma yɛn <input>aman nyinaa —te sɛ :checked—de yɛ yɛn custom form indicator no sɛnea ɛfata. Sɛ yɛde ka .custom-control-labeladesuakuw no ho a, yebetumi nso ayɛ nsɛm a wɔakyerɛw ama ade biara a egyina <input>'s tebea so.

Yɛde default no sie <input>ne opacityna yɛde di dwuma .custom-control-labelde si custom form indicator foforo wɔ ne ananmu ne ::beforene ::after. Awerɛhosɛm ne sɛ yentumi nsi custom biako mfi kɛkɛ <input>efisɛ CSS's contentnyɛ adwuma wɔ saa element no so.

Wɔ tebea horow a wɔahwɛ mu no, yɛde base64 embedded SVG ahyɛnsode ahorow a efi Open Iconic . Eyi ma yenya tumi a eye sen biara ma styling ne positioning wɔ browser ne mfiri ahorow nyinaa so.

Nnaka a wɔde hyɛ mu

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

Custom checkboxes nso betumi de :indeterminatepseudo class no adi dwuma bere a wɔde nsa ahyɛ mu denam JavaScript so (HTML su biara nni hɔ a wɔde bɛkyerɛ).

Sɛ wode jQuery redi dwuma a, ɛsɛ sɛ biribi te sɛ eyi dɔɔso:

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

Radio ahorow

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

Inline no mu

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

Dɛmdie

Wobetumi asiw nnaka a wɔahyɛ da ayɛ ne radio ahorow nso ano. Fa disabledboolean attribute no ka ho <input>na custom indicator ne label nkyerɛkyerɛmu no bɛyɛ automatically styled.

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

Paw menu no

Custom <select>menus hia custom class nkutoo, .custom-selectna ama woatumi akanyan custom styles no.

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

Wubetumi nso apaw afi nketewa ne akɛse a wɔahyɛ da apaw mu ma ɛne yɛn nsɛm a wɔde hyɛ mu a ne kɛse yɛ pɛ no ahyia.

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

Wɔsan multiplenso boa su no:

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

Sɛnea sizesu no te no:

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

Fael browser no

Fael input no yɛ gnarly sen biara wɔ bunch no mu na ɛhwehwɛ JavaScript foforo sɛ wopɛ sɛ wode hook wɔn ne functional Choose file... ne fael din text a woapaw.

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

Yɛde default fael no sie <input>via opacityna mmom yɛ style no <label>. Wɔyɛ bɔtn no na wɔde si hɔ ne ::after. Nea etwa to no, yɛpae mu ka sɛ a widthne heightwɔ so <input>ma ntam kwan a ɛfata ma nsɛm a atwa ho ahyia.

Nhama no a wɔkyerɛ ase anaasɛ wɔreyɛ no sɛnea wopɛ

Wɔde :lang()pseudo-class no di dwuma de ma kwan ma wɔkyerɛ “Browse” nsɛm no ase kɔ kasa afoforo mu. Fa kasa tag a ɛfa ho ne localized strings no to so anaa fa nsɛm a wɔakyerɛw no ka $custom-file-textSass variable no ho . Wobetumi ayɛ Engiresi nhama no ho nhyehyɛe saa ara. Sɛ nhwɛso no, sɛnea obi betumi de Spania nkyerɛase bi aka ho ni (Spanish kasa mmara ne ):es

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

Ɛha na lang(es)ɛreyɛ adwuma wɔ fael a wɔahyɛ da ahyɛ mu ama Spania nkyerɛase:

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

Ɛho behia sɛ wode wo krataa no kasa (anaasɛ ne dua ketewa) no si hɔ yiye sɛnea ɛbɛyɛ a wɔbɛda nsɛm a ɛteɛ adi. Wobetumi de attribute langa ɛwɔ <html>element no so anaa Content-LanguageHTTP header , ne akwan afoforo ayɛ eyi.