Source

Sɛbɛnw

Misaliw ni baarakɛcogo ɲɛfɔli sɛbɛnw kɔlɔsili cogoyaw kan, labɛncogo suganditaw, ani ladamu yɔrɔw walasa ka sɛbɛn suguya caman dilan.

Kuma bɛɛ lajɛlen

Bootstrap ka foroko kunkankow bɛ bonya an ka Rebooted foroko cogoyaw kan ni kalanw ye. Baara kɛ ni o kalanw ye walasa ka i yɛrɛ sugandi u ka jiralanw kɔnɔ minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye walasa ka ɲɛfɔli kɛ cogo kelen na navigatɛriw ni minɛnw kɔnɔ.

Aw ye aw jija ka baara kɛ ni fɛn bɛnnen typeye donnakow bɛɛ kan (misali la, emailimayili ladɛrɛsi walima numberjatebɔ kunnafoniw kama) walasa ka nafa sɔrɔ donnakow kunnafoni kuraw la i n’a fɔ imɛri sɛgɛsɛgɛli, nimɔrɔ sugandili, ani fɛn wɛrɛw.

Nin ye misali teliya ye walasa ka Bootstrap ka foroko cogoyaw jira. Aw bɛ to ka kalan kɛ walasa ka sɛbɛnw sɔrɔ kalan wajibiyalenw kan, sɛbɛnw labɛncogo ani fɛn wɛrɛw.

An tɛna i ka email tila ni mɔgɔ wɛrɛ ye abada. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Foroko kunkankow

Sɛbɛnni cogoya kɔrɔsibagaw—i n’a fɔ <input>s, <select>s ani <textarea>s—u bɛ cogoya ni .form-controlkalasi ye. O la, cogoyaw bɛ yen minnu bɛ kɛ ka ɲɛsin fɛn bɛɛ yecogo ma, sinsin cogoya, bonya ani fɛn wɛrɛw.

Aw ye aw jija ka an ka ladamu sɛbɛnw sɛgɛsɛgɛ walasa ka style <select>s wɛrɛw sɔrɔ.

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

Walasa ka filen dontaw sɔrɔ, i ka .form-controlfor .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 (Sizing) kɛ

Aw bɛ sanfɛlanw sigi ni kalanw ye i n' a fɔ .form-control-lgani .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>

Kalan dɔrɔn

A bɛ readonlyboolean attribut (boli) fara donnafɛn dɔ kan walasa ka donnafɛn nafa caman caman cili bali. Kalan dɔrɔn dontaw bɛ ye ka nɔgɔya (i n’a fɔ donnakow balilenw), nka u bɛ taamasiyɛn jɔnjɔn mara.

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

Sɛbɛn gansan kalanni dɔrɔn

N’i ​​b’a fɛ ka <input readonly>fɛn dɔw sɔrɔ i ka foroko kɔnɔ minnu bɛ kɛ cogo la i n’a fɔ sɛbɛn gansan, i ka baara kɛ ni .form-control-plaintextkalasi ye walasa ka foroko foroko cogoya dafalen bɔ yen ani ka margin ni padding ɲuman mara.

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

Range Inputs (Dɔnniyaw).

Set horizontalement scrollable range inputs ni .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>

Jateminɛ kɛyɔrɔw ani arajow

sɛgɛsɛgɛlikɛyɔrɔw ni arajow daminɛtaw bɛ ɲɛ ni dɛmɛ ye .form-check, kalan kelen donnadon suguya fila bɛɛ la min bɛ u ka HTML fɛnw labɛncogo n' u kɛcogo ɲɛ Jateminɛ kɛyɔrɔw ye sugandili kelen walima caman sugandili ye lisi dɔ kɔnɔ, ka sɔrɔ arajow ye sugandili kelen sugandi caman cɛma.

Jateminɛkɛyɔrɔw ni arajo minnu bɛ se ka baara kɛ, olu bɛ dɛmɛ. Attribut disabledbɛna kulɛri nɔgɔman dɔ kɛ walasa ka dɛmɛ don ka donnakow cogoya jira.

Jateminɛ kɛsu ni arajo butɔni bɛ HTML-based form validation dɛmɛ ani ka labeli surunw di, minnu bɛ se ka sɔrɔ. O cogo la, an ka <input>s ni <label>s ye balimakɛ-fɛnw ye k’a sɔrɔ an tɛ kelen ye min <input>kɔnɔ a <label>. nin ye kumasen ye dɔɔnin i n' a fɔ i ka kan ka ɲɛfɔli idni forjogo jira walasa ka ni <input>ni jɛ <label>.

Default (dafalen) .

Ka da a kan, jatebɔlanw ni arajo hakɛ o hakɛ min ye balimakɛw ye teliya la, olu bɛna bila ɲɔgɔn kan cogo bɛnnen na ni .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">
  <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 kɔnɔ

kuluw lajɛyɔrɔw walima arajow kulu kelen kan jirisunba kelen kan ni dɔ farali .form-check-inlineye fɛn o fɛn .form-checkkan .

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

Ni labeliw tɛ

Fàrala .position-staticdontaw kan minnu kɔnɔ .form-checkminnu tɛ ni labeli sɛbɛn si ye. Aw ye aw hakili to a la hali bi ka labeli sugu dɔ di dɛmɛni fɛɛrɛw ma (misali la, ka baara kɛ ni 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>

Labɛn cogo

Komin Bootstrap bɛ baara Kɛ display: blockani width: 100%an ka forobaciyɛn-kɔlɔsili-minɛnw bɛɛ lajɛlen na, foroko-sɛbɛnw bɛna ɲɔgɔn Sɔrɔ ka Kɛɲɛ ni jɔlen ye. Kalanso wɛrɛw bɛ se ka kɛ walasa ka o labɛncogo caman ɲɔgɔnna kɛ ka kɛɲɛ ni sɛbɛn kelen-kelen bɛɛ ye.

Aw bɛ kuluw sigi sen kan

Kalanso .form-groupye fɛɛrɛ nɔgɔman ye min bɛ se ka sigicogo dɔw fara sɛbɛnw kan. A bɛ kalan dɔ di min bɛ se ka wuli ka bɔ a nɔ na, ​​min bɛ dusu don mɔgɔw kɔnɔ u ka kuluw kɛ ɲɔgɔn fɛ cogo bɛnnen na, ka kunnafoniw di, ka dɛmɛ sɛbɛn minnu bɛ se ka sugandi, ani ka sɛbɛnw tiɲɛni cikanw ci. By default it only applies margin-bottom, nka a bɛ cogoya wɛrɛw ta ka don .form-inlinei n’a fɔ a mago bɛ cogo min na. Baara kɛ n’a ye ni <fieldset>s, <div>s, walima fɛn wɛrɛw ye minnu bɛ se ka fɔ.

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

Formulaire grid

Foroko gɛlɛnw bɛ se ka jɔ ni an ka grid classes ye. Baara kɛ ni ninnu ye sɛbɛnw labɛncogo kama minnu bɛ kulu caman wajibiya, bonya caman wɛrɛw, ani ɲɔgɔndan sugandicogo wɛrɛw.

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

Foroko row

Aw bɛ se fana ka swap .rowfor .form-row, an ka standard grid row caman caman ɲɔgɔnna min bɛ kolon gutters defaults override for tighter and compact layouts.

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

Layidu minnu ka gɛlɛn kosɛbɛ, olu fana bɛ se ka dilan ni grid system ye.

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

Foro horizontal (fɔcogo tilennen).

Aw bɛ foroko tilennenw da ni jatebɔlan ye ni .rowkalasi farali ye kuluw dilancogo kan ani ka baara kɛ ni .col-*-*kalasiw ye walasa k’aw ka labeliw ni kɔrɔsiliw bonya jira. Aw ye aw jija ka dɔ fara .col-form-labelaw ka <label>s kan fana walasa u ka kɛ vertically centered ni u ni u ni ɲɔgɔn cɛ formulaire controls ye.

Tuma dɔw la, i bɛ se ka baara kɛ ni margin walima padding utilities ye walasa ka o alignment dafalen dilan i mago bɛ min na. Misali la, an ye padding-topan ka arajo dontaw labeli min bɛ ɲɔgɔn kan, o bɔ yen walasa ka sɛbɛnni basigilenw labɛn ka ɲɛ.

Arajow
A’ ye yɔrɔ lajɛ 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <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>
Formulaire horizontale label sizing

Aw ye aw jija ka baara kɛ ni .col-form-label-smwalima .col-form-label-lgka aw ka <label>s walima <legend>s kɛ walasa ka tugu a bonya la ka ɲɛ .form-control-lgani .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>

Kolonw bonya

I n’a fɔ a jiralen bɛ cogo min na misali tɛmɛnenw na, an ka jatebɔcogo b’a to i bɛ se ka .cols hakɛ o hakɛ bila a .rowwalima .form-row. U bɛna bonya sɔrɔlenw tila u ni ɲɔgɔn cɛ cogo kelen na. Aw bɛ se fana k’aw ka kuluw kulu fitinin dɔ ta walasa ka yɔrɔ caman walima yɔrɔ fitinin ta, k’a sɔrɔ .cols tɔw bɛ tɔw tila ɲɔgɔn na, ni kuluw kalasi kɛrɛnkɛrɛnnenw ye i n’a fɔ .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>

Oto-sizing (yɛrɛ-sɛgɛsɛgɛli).

Misali min bɛ duguma o bɛ baara Kɛ ni flexbox nafamafɛn ye walasa ka kɔnɔkow cɛmancɛ jɔlen na ani ka fɛn caman Changer .colka Kɛ .col-autowalasa i ka kuluw bɛ yɔrɔ caman dɔrɔn Ta i n’a fɔ u mago bɛ cogo min na. Ni an y’a fɔ cogo wɛrɛ la, kulu bɛ a yɛrɛ bonya ka da a kɔnɔkow kan.

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

O kɔfɛ, aw bɛ se k’o ɲagami kokura siɲɛ kelen ni hakɛ kɛrɛnkɛrɛnnen koloma kalanw ye.

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

Ani tiɲɛ na, custom form controls bɛ dɛmɛ.

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

Inline sɛbɛnw

Baara kɛ ni .form-inlinekalan ye walasa ka labeliw, foroko kunkankow ani butɔni dɔw jira ɲɔgɔn kɔ jirisun kelen kan. Formulaire controls inline forms kɔnɔ, olu bɛ danfara dɔɔnin ka bɔ u cogoya kɔrɔw la.

  • Kontrɔliw ye display: flex, ka HTML yɔrɔ finman o yɔrɔ finman bɛɛ Dabɔ ani k’a To i bɛ se ka alignment control Di ni spacing ani flexbox utilities ye.
  • Kontrɔli ni donna kuluw bɛ sɔrɔ width: autoka Bootstrap default wuli width: 100%.
  • Kontrɔliw bɛ jira dɔrɔn layini kɔnɔ filɛlikɛyɔrɔw la minnu bonya ye 576px ye a dɔgɔyalenba la walasa ka jate kɛ filɛlikɛyɔrɔ fitininw na telefɔni selilɛriw kan.

Aw bɛ se ka sɛbɛnfura kelen-kelen bɛɛ kunkankow bonya n’u labɛncogo ɲɛnabɔ ni bolo ye ni yɔrɔjan nafamafɛnw ye (i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ). A laban na, aw ye aw jija ka a don tuma bɛɛ <label>ni sɛbɛnfura kelen-kelen bɛɛ kunnafoni ye, hali n’aw mago bɛ a la k’a dogo mɔgɔ minnu tɛ ekran kalanbagaw ye ni .sr-only.

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

Custom form controls ani selects fana bɛ dɛmɛ.

<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>
Fɛn wɛrɛw minnu bɛ se ka kɛ ka tɛmɛ labeli dogolenw kan

Dɛmɛn fɛɛrɛw i n’a fɔ ɛkran kalanbagaw bɛna gɛlɛya sɔrɔ i ka sɛbɛnw na ni i ma sɛbɛn dɔ don donta bɛɛ la. Nin inline sɛbɛnw kama, aw bɛ se ka labeliw dogo ni .sr-onlykalan ye. Fɛɛrɛ wɛrɛw bɛ yen minnu bɛ se ka kɛ walasa ka taamasiyɛn di dɛmɛ fɛɛrɛw ma, i n’a fɔ aria-label, aria-labelledbywalima fɛn titlemin bɛ kɛ ka fɛn dɔ jira. Ni ninnu si tɛ yen, dɛmɛ fɛɛrɛw bɛ se ka baara kɛ ni o placeholderjogo ye, ni u bɛ yen, nka aw k’a kɔlɔsi ko baara kɛli ye placeholderka kɛ taamasiyɛn kɛcogo wɛrɛw nɔnabila ye, o tɛ ladilikan ye.

Dɛmɛ sɛbɛn

Block-level dɛmɛ sɛbɛnni minnu bɛ sɛbɛnw kɔnɔ, olu bɛ se ka dabɔ ni .form-text(a tun bɛ fɔ fɔlɔ i n’a fɔ .help-blockv3 kɔnɔ). Inline dɛmɛ sɛbɛnni bɛ se ka waleya cogo la min bɛ se ka wuli ni inline HTML element suguya o suguya ye ani utility classes i n' a fɔ .text-muted.

Dɛmɛ sɛbɛn ni sɛbɛnfura kunkankow fara ɲɔgɔn kan

Dɛmɛ sɛbɛn ka kan ka jɛ k’a jɛya ni sɛbɛnfura kunkanko ye a bɛ tali kɛ ni fɛn ye min bɛ baara kɛ ni o fɛn aria-describedbyye. O bɛna a to dɛmɛ fɛɛrɛw — i n’a fɔ ɛkran kalanbagaw — bɛna o dɛmɛ sɛbɛn in laseli kɛ ni baarakɛla ye a sinsin walima ni a donna kunnafoni na.

Dɛmɛ sɛbɛn minnu bɛ dontaw jukɔrɔ, olu bɛ se ka kɛ cogoya la ni .form-text. Nin kalan in kɔnɔ, display: blocksanfɛ-dakun dɔw bɛ yen ani ka fara a kan walasa ka yɔrɔjan nɔgɔya ka bɔ donnakow la sanfɛ.

I ka tɔgɔlasɛbɛn janya ka kan ka kɛ taamasiyɛn 8-20 ye, lɛtɛrɛw ni nimɔrɔw ka kan ka sɔrɔ a kɔnɔ, wa a man kan ka kɛ ni yɔrɔw ye, sɛbɛnni kɛrɛnkɛrɛnnenw, walima emojiw. 
<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 sɛbɛnni bɛ Se ka baara Kɛ ni HTML fɛn o fɛn ye min bɛ Kɛ inline kɔnɔ (a kɛra <small>, <span>, walima fɛn wɛrɛ ye) ni foyi tɛ yen ni nafalan-klasi tɛ.

A ka kan ka kɛ sɛbɛnnibolo 8-20 ye. 
<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>

Seko ni dɔnko sɛbɛnw

A bɛ disabledboolean attribut (boli) fara donnafɛn dɔ kan walasa ka baarakɛlaw ka jɛɲɔgɔnyaw bali ani k’a kɛ i n’a fɔ a ka nɔgɔn.

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

A ka disabledfɛntigiya fara a kan <fieldset>walasa ka kunnafoni bɛɛ bali a kɔnɔ.

<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-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Kɔlɔsili ni ankɔriw ye

O cogo la, navigatɔrɔw bɛna foroko kɔrɔw bɛɛ minɛ ( <input>, <select>ani <button>fɛnw) minnu bɛ a kɔnɔ <fieldset disabled>i n’a fɔ u ma baara kɛ, ka klaviyeti ni sosɛti bɛɛ ka jɛɲɔgɔnya bali u kan. Nka, ni i ka foroko fana bɛ ni <a ... class="btn btn-*">fɛnw ye, olu bɛna di dɔrɔn cogoya dɔ ma min ye pointer-events: none. I n’a fɔ a fɔra cogo min na dakun na min bɛ kuma butɔni cogoya balilen kan (ani kɛrɛnkɛrɛnnenya la dakun fitinin min bɛ ankɔri fɛnw kan), nin CSS nafolo in ma labɛn fɔlɔ wa a ma dɛmɛ bɛrɛbɛrɛ Internet Explorer 10 kɔnɔ, wa a tɛna klaviyeti baarakɛlaw bali ka kɛ se ka sinsin walima ka baara kɛ ni nin jɛgɛnsira ninnu ye. O la sa, walisa i ka se ka i yɛrɛ tanga, baara kɛ ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walisa k’o ɲɔgɔnna ladɛrɛsiw bali.

Cross-browser ka baarakɛcogo ɲuman

Hali ni Bootstrap bɛna o cogoyaw waleya navigatɔrɔw bɛɛ la, Internet Explorer 11 ani a duguma tɛ fɛn in dɛmɛ kosɛbɛ a disabledkan <fieldset>. Baara kɛ ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walasa ka forow labɛncogo bali o navigatɛriw kɔnɔ.

Validation (Sɔrɔli).

Aw ye hakilina nafamaw di aw ka baarakɛlaw ma minnu bɛ se ka wale kɛ ni HTML5 sɛbɛnfura tiɲɛni ye– min bɛ sɔrɔ an ka navigatɔrɔw bɛɛ kɔnɔ minnu bɛ dɛmɛ sɔrɔ . Sugandili kɛ navigatɛri default validation feedback kɔnɔ, walima ka cikanw waleya ni an ka kalansenw ye minnu bɛ don a kɔnɔ ani JavaScript daminɛ.

An bɛ ladilikan di sisan ka baara kɛ ni sɛgɛsɛgɛli kɛcogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, bawo native navigateur default validation messages tɛ to ka jira dɛmɛnan fɛɛrɛw la navigatɔrɔw bɛɛ kɔnɔ (kɛrɛnkɛrɛnnenya la, Chrome min bɛ tabali kan ani telefɔni selilɛri kan).

A bɛ baara kɛ cogo min na

Formulaire validation bɛ baara kɛ cogo min na ni Bootstrap ye, o filɛ nin ye:

  • HTML foroko sɛgɛsɛgɛli bɛ Kɛ CSS ka pseudo-classes fila fɛ, :invalidani :valid. A bɛ tali kɛ <input>, <select>, ani <textarea>fɛnw na.
  • Bootstrap bɛ scopes the :invalidand :validstyles to parent .was-validatedclass, a ka c’a la a bɛ kɛ ka <form>. N’o tɛ, foro wajibiyalen o foro wajibiyalen tɛ ni nafa tɛ, o bɛ jira ko a tɛ baara kɛ ɲɛ doni na. O cogo la, i bɛ se k’a sugandi waati min na i bɛna u baara (a ka c’a la, sɛbɛn cilen kɔfɛ).
  • Walasa ka sɛbɛn in cogoya lasegin (misali la, ni sɛbɛn cicogo dinamiki ye ni AJAX ye), i ka .was-validatedkalasi bɔ a la <form>tuguni cilen kɔfɛ.
  • I n’a fɔ fallback, .is-invalidani .is-validkalasiw bɛ se ka baara kɛ ni pseudo-classes nɔ na ka ɲɛsin server fan fɛ validation ma . U tɛ .was-validatedbangebagaw ka kalan wajibiya.
  • K’a sababu Kɛ gɛlɛyaw ye CSS baaracogo la, an tɛ Se (sisan) ka cogoyaw Kɛ a la <label>min bɛ Nà foroba-kɔlɔsili ɲɛfɛ DOM kɔnɔ ni JavaScript ladamulen dɛmɛ tɛ.
  • Bi navigatɔrɔw bɛɛ bɛ constraint validation API dɛmɛ , o ye JavaScript fɛɛrɛw ye minnu bɛ kɛ ka forobaciyɛn kunkankow sɛmɛntiya.
  • Jaabi cikanw bɛ se ka baara kɛ ni navigatɔrɔn ka defaults (navigatɛri kelen-kelen bɛɛ ta tɛ kelen ye, wa u tɛ se ka kɛ cogo la CSS fɛ) walima an ka jaabiw cogoya ladamulenw ni HTML ni CSS wɛrɛw ye.
  • Aw bɛ se ka ladamu cikanw di ni setCustomValidityJavaScript ye.

O hakili la, i ka nin demow lajɛ an ka ladamu sɛbɛnw tiɲɛni cogoyaw la, sèrwɛri fan fɛ kalan minnu bɛ se ka sugandi, ani navigatɔrɔw ka defaults.

Laadalata cogoyaw

Ni aw b’a fɛ ka Bootstrap foroko dafalen cikanw sɔrɔ, aw ka kan ka novalidateboolean fɛnsɛbɛnni fara aw ka <form>. O bɛ browser default feedback baarakɛminɛnw bali, nka o bɛɛ n’a ta, a bɛ se ka kɛ sababu ye ka formulaire validation APIw sɔrɔ JavaScript kɔnɔ. A ɲini ka sɛbɛn in di min bɛ duguma; an ka JavaScript bɛna submit button minɛ ka hakilinaw lase i ma. Ni i b’a ɲini ka ci, i bɛna a ye ko :invalidani :validcogoyaw bɛ tali kɛ i ka foroko kunkankow la.

Ladamuni kɛcogoyaw bɛ ladamu kulɛriw, dancɛw, sinsincogo cogoyaw ani kɔkanna taamasiyɛnw kɛ walasa ka hakilinaw lase mɔgɔw ma ka ɲɛ. Background icons for <select>s bɛ sɔrɔ ni .custom-select, dɔrɔn de ye , wa .form-control.

Looks good!
Looks good!
@ Bamako
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Navigatɛri ka defaults

Aw t’a fɛ ka ladamu tiɲɛni jaabi cikanw sɔrɔ walima ka JavaScript sɛbɛn walasa ka foroko kɛcogo caman Changer wa? O bɛɛ ka ɲi, i bɛ se ka baara kɛ ni browser defaults ye. A ɲini ka sɛbɛn in ci min bɛ duguma. Ka kɛɲɛ n’i ka navigatɔrɔ ni OS ye, i bɛna hakilinaw dicogo wɛrɛ ye dɔɔnin.

Hali n’o hakilinaw cogoyaw tɛ se ka cogoya kɛ ni CSS ye, i bɛ se ka jaabiw sɛbɛncogo ladilan hali bi JavaScript fɛ.

@ Bamako 
<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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server fan fɛ

An b’a ɲini aw fɛ aw ka baara kɛ ni kiliyan fan fɛ sɛgɛsɛgɛli ye, nka ni aw mago bɛ baarakɛla fan fɛ sɛgɛsɛgɛli la, aw bɛ se ka foroko forow jira minnu tɛ tiɲɛ ye ani minnu bɛ se ka kɛ ni .is-invalidani .is-valid. A kɔlɔsi ko .invalid-feedbackfana bɛ dɛmɛ ni nin kalan ninnu ye.

A ɲɛ ka ɲi!
A ɲɛ ka ɲi!
@ Bamako
Aw ye baarakɛla tɔgɔ dɔ sugandi.
Aw ye dugu dɔ di min bɛ se ka baara kɛ.
Aw ye jamana dɔ sugandi min bɛ se ka kɛ.
Aw ye zipu ɲuman di aw ma.
Aw ka kan ka sɔn a ma sani aw ka a bila. 
<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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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>

Fɛn minnu bɛ dɛmɛ

Validation styles bɛ sɔrɔ nin formulaire controles ni components ninnu na:

  • <input>s ni <textarea>s ni .form-control(ka se kelen .form-controlma donna kuluw kɔnɔ) .
  • <select>s ni .form-controlwalima.custom-select
  • .form-checks
  • .custom-checkboxs ni .custom-radios
  • .custom-file
Aw ye cikan dɔ sɛbɛn sɛbɛnnikɛlan kɔnɔ.
Misali la, jaabi sɛbɛn min tɛ tiɲɛ ye
Misali wɛrɛw jaabi sɛbɛn tiɲɛnenw
Misali laada sugandili jaabi tiɲɛnenw
Misali la, ladamu filen jaabi tiɲɛnenw 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

  <div class="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>

Baarakɛminɛnw ladilikanw

Ni i ka foroko labɛncogo b’a to, i bɛ se ka kalanw falen-falen .{valid|invalid}-feedbackkalanw kama .{valid|invalid}-tooltipwalasa ka dantigɛli hakilinaw jira baarakɛminɛnw labɛncogo la. Aw ye aw jija ka bangebaga dɔ position: relativesɔrɔ a kan baarakɛminɛnw bilali kama. Misali min bɛ duguma, an ka kulu kalanw bɛ nin sɔrɔ kaban, nka i ka porozɛ bɛ se ka kɛ sababu ye ka sigicogo wɛrɛ de wajibiya.

Looks good!
Looks good!
@ Bamako
Please choose a unique and valid username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ka kɛɲɛ ni mɔgɔw sago ye

Validation states bɛ se ka ladamu Sass fɛ ni $form-validation-stateskarti ye. A bɛ an ka _variables.scssdosiye kɔnɔ, nin Sass karti in bɛ loop over ka default valid/ invalidvalidation states (dafalen / validation states) lawuli. Karta min bɛ a kɔnɔ, o bɛ sɔrɔ a kɔnɔ walasa ka jamana kelen-kelen bɛɛ ka kulɛri ni a taamasiyɛnw labɛn ka kɛɲɛ ni u yɛrɛ sago ye. Hali ni jamana wɛrɛw tɛ dɛmɛ sɔrɔ navigatɛriw fɛ, minnu bɛ baara kɛ ni ladamu cogoyaw ye, olu bɛ se ka forobaciyɛn jaabi gɛlɛnw fara nɔgɔya la.

Aw k’a dɔn ko an tɛ ladilikan di ka nin nafaw ladilan k’a sɔrɔ an ma form-validation-statemixin fana sɛmɛntiya.

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

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

Laadalata sɛbɛnw

Walasa ka fɛn caman wɛrɛw sɔrɔ ani ka navigatɔrɔw ka ɲɔgɔn sɔrɔ cogo min na, baara kɛ ni an ka foroko kɔnɔfɛnw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye pewu walasa ka navigatɔrɔw ka fɛnw bila u nɔ na. U jɔlen bɛ kɔrɔko ni sɔrɔli taamasiyɛnw sanfɛ, o la u ye fɛn sabatilenw ye minnu bɛ se ka kɛ foroko kɔrɔsili fɔlɔw bɛɛ nɔnabila ye.

Jateminɛ kɛyɔrɔw ani arajow

Checkbox kelen-kelen bɛɛ ani arajo <input>ani <label>pari bɛ siri a la <div>walasa k’an ka custom control dilan. Jatebla siratigɛ la, nin ye an ka default kɛcogo kelen ye .form-check.

An bɛ baara kɛ ni balimakɛ sugandilan ( ~) ye an ka <input>jamanaw bɛɛ kama—i n’a fɔ :checked—walasa ka an ka ladamu sɛbɛn jiralan cogoya ka ɲɛ. Ni an farala .custom-control-labelkalan kan, an bɛ se fana ka sɛbɛnni kɛcogo kɛ fɛn kelen-kelen bɛɛ la ka da <input>'s cogoya kan.

An bɛ default dogo <input>ni opacityani ka baara kɛ ni the ye .custom-control-labelwalasa ka ladamu sɛbɛn jiralan kura jɔ a nɔ na ni ::beforeani ::after. A fɔ man di nka an tɛ se ka ladamu dɔ jɔ ka bɔ dɔrɔn <input>bawo CSS'w contenttɛ baara kɛ o element kan.

Jamana minnu sɛgɛsɛgɛra, an bɛ baara kɛ ni base64 SVG taamasiyɛnw ye minnu bɛ don Open Iconic kɔnɔ. O bɛ kunnafoni ɲuman Di an ma cogoya ni jɔyɔrɔko la navigatɔrɔw ni minɛnw kɔnɔ.

Jateminɛw kɛyɔrɔw

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

Ladamuni-sɛbɛnw fana bɛ Se ka baara Kɛ ni :indeterminatepseudo class ye ni u bɛ Se ka Kɛ ni bolo ye JavaScript fɛ (HTML fɛn si tɛ yen min bɛ Se k’a Jira).

N'i bɛ baara Kɛ ni jQuery ye, nin ɲɔgɔnna dɔ ka kan ka Bɔ:

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

Arajow

<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 kɔnɔ

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

A jɔ la

Labɛnw ni arajow fana bɛ se ka bali. A bɛ disabledboolean fɛnsɛbɛn fara a kan <input>ani ladamu jiralan ni labeli ɲɛfɔli bɛna kɛ a yɛrɛma cogoya la.

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

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

Switches (switchw).

Switch dɔ bɛ ni markup ye custom checkbox nka a bɛ baara kɛ ni .custom-switchclass ye walasa ka toggle switch dɔ jira. Switches fana bɛ disabledattribut (fɛn) in dɛmɛ.

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

Menu sugandi

Meniw ladamulenw <select>mago bɛ ladamu kalan dɔrɔn de la, .custom-selectwalasa ka ladamu cogoyaw daminɛ. Laadalata cogoyaw dan ye <select>'s yecogo fɔlɔ ye wa u tɛ se ka s ladilan <option>k'a sababu kɛ navigatɛri dantigɛliw ye.

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

I bɛ se fana ka sugandili kɛ ladamu sugandili misɛnninw ni belebelebaw la walasa u ka bɛn an ka sɛbɛnniw dontaw ma minnu bonya ye kelen ye.

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

O multiplefɛn in fana bɛ Dɛmɛ:

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

I n’a fɔ a bɛ cogo min na ni a ka sizejogo ye:

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

Labɛnko ɲuman

Aw bɛ ladamukow dabɔ <input type="range">ni .custom-range. Track (kɔfɛ) ani thumb (nafa) fila bɛɛ cogoya bɛ cogo kelen na navigatɛriw kɔnɔ. Komin IE ni Firefox dɔrɔn de bɛ dɛmɛ Dòn u ka fɔlisen “falen” na ka Bɔ bolokɔnincinin kinin fɛ walima kinin fɛ k’a Kɛ fɛɛrɛ ye walasa ka ɲɛtaa jira ɲɛ na, an t’a Dɛmɛ sisan.

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

Range inputs bɛ ni implicit values ​​ye minani max— 0ani 100, o cogo la. Aw bɛ se ka nafa kuraw jira minnu bɛ baara kɛ ni minani maxfɛnw ye.

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

Ka da a kan, range inputs “snap” ka kɛ integer values ​​ye. Walasa ka nin fɛn caman Changer, aw bɛ se ka stepnafa dɔ jira. Misali min bɛ duguma, an bɛ taabolo hakɛ caya siɲɛ fila ni baara kɛli ye ni step="0.5".

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

Fiyew lajɛcogo

Plugin min bɛ Lakodɔn walasa ka custom file input ɲɛnamaya: bs-custom-file-input , o de ye an bɛ baara Kɛ ni min ye sisan yan an ka docs kɔnɔ.

Filen doncogo ye gnarly ye bunch la wa a bɛ JavaScript wɛrɛw de wajibiya n'i b'a fɛ k'u jɛgɛn ni functional Choose file... ani file name text sugandilen ye.

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

An bɛ filen default dogo <input>via opacityani o nɔ na style the <label>. Butɔn bɛ sɔrɔ ka jɔ ni ::after. A laban na, an b’a Jira ko a widthni heighton the <input>for proper spacing for surrounding content.

Sɛrɛw bamanankan na walima k’u labɛn ni SCSS ye

Pseudo - :lang()class bɛ Kɛ walasa ka sira Di “Browse” sɛbɛnni bamanankan na kan wɛrɛw la. Sass bεε bε bεnkanw bεε bεε bεε bε Se ka bεnkanw bεε Kε walima ka u Fàra u kan ni kan taamaʃyɛn$custom-file-text min bɛ tali Kɛ o la ani sigida ka sɛrɛw. Angilɛkan sɛrɛw bɛ se ka ladilan o cogo kelen na. Misali la, mɔgɔ bɛ se ka Ɛsipaɲɔlikan bamanankan baarakɛcogo dɔ fara a kan cogo min na, o filɛ nin ye (Esipaɲɔlikan kanko ye ):es

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

Nin ye lang(es)wale ye ladamu filen doncogo kan Ɛsipaɲɔlikan bamanankan na:

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

I bɛna a ɲini ka i ka sɛbɛn (walima a jirisun fitinin) kan sigi ka ɲɛ walasa sɛbɛnni ɲuman ka jira. O bɛ Se ka Kɛ ni fɛnɲɛnɛma langye min bɛ <html>element kan walima Content-LanguageHTTP header , fɛɛrɛ wɛrɛw cɛma.

Sɛbɛnw bamanankan na walima k’u ladilan ni HTML ye

Bootstrap fana bɛ fɛɛrɛ Di “Browse” sɛbɛnni bamanankan na HTML la ni fɛn data-browseye min bɛ Se ka Fàra sɛbɛnni-sɛbɛnni ladamulen kan (misali la Ɔsitaralikan na):

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