Source

Ձևաթղթեր

Օրինակներ և օգտագործման ուղեցույցներ ձևերի կառավարման ոճերի, դասավորության ընտրանքների և հատուկ բաղադրիչների համար՝ ձևերի լայն տեսականի ստեղծելու համար:

Ընդհանուր ակնարկ

Bootstrap-ի ձևի վերահսկիչները ընդլայնվում են դասերով մեր Rebooted ձևերի ոճերի վրա: Օգտագործեք այս դասերը՝ ընտրելու դրանց հարմարեցված էկրանները՝ բրաուզերների և սարքերի միջև ավելի հետևողական ցուցադրման համար:

Համոզվեք, որ օգտագործեք համապատասխան typeհատկանիշ բոլոր մուտքերում (օրինակ՝ emailէլփոստի հասցեի կամ numberթվային տեղեկատվության համար), որպեսզի օգտվեք մուտքագրման նոր վերահսկիչներից, ինչպիսիք են էլփոստի հաստատումը, համարների ընտրությունը և այլն:

Ահա արագ օրինակ՝ Bootstrap-ի ձևի ոճերը ցուցադրելու համար: Շարունակեք կարդալ փաստաթղթերը պահանջվող դասերի, ձևի դասավորության և այլնի վերաբերյալ:

Մենք երբեք ուրիշի հետ չենք կիսվի ձեր էլ.
<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>

Ձևերի վերահսկում

Տեքստային ձևի վերահսկիչները, ինչպիսիք են <input>s, <select>s և <textarea>s-ը, ոճավորվում են .form-controlդասի հետ: Ներառված են ընդհանուր տեսքի, ֆոկուսի վիճակի, չափերի և այլնի ոճեր:

Համոզվեք, որ ուսումնասիրեք մեր մաքսային ձևերը հետագա ոճերի <select>համար:

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

Ֆայլի մուտքագրման համար .form-controlփոխեք .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>

Չափսերը

Սահմանեք բարձրություններ՝ օգտագործելով դասեր, ինչպիսիք են .form-control-lgև .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>

Միայն կարդալու համար

Մուտքի վրա ավելացրեք readonlyբուլյան հատկանիշ՝ մուտքի արժեքի փոփոխությունը կանխելու համար: Միայն կարդալու մուտքերը ավելի թեթև են թվում (ինչպես անջատված մուտքերը), բայց պահպանում են ստանդարտ կուրսորը:

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

Միայն կարդալու պարզ տեքստ

Եթե ​​ցանկանում եք <input readonly>ձեր ձևի տարրերը ձևավորել որպես պարզ տեքստ, օգտագործեք .form-control-plaintextդասը, որպեսզի հեռացնեք ձևի դաշտի լռելյայն ոճավորումը և պահպանեք ճիշտ լուսանցքն ու լիցքը:

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

Նշման տուփեր և ռադիոներ

Կանխադրված վանդակները և ռադիոները բարելավվում են մեկ դասի օգնությամբ .form-checkերկու մուտքային տեսակների համար, որոնք բարելավում են իրենց HTML տարրերի դասավորությունը և վարքագիծը : Վանդակները նախատեսված են ցուցակում մեկ կամ մի քանի տարբերակներ ընտրելու համար, մինչդեռ ռադիոկայանները նախատեսված են շատերից մեկ տարբերակ ընտրելու համար:

Անջատված վանդակներն ու ռադիոները աջակցվում են, բայց not-allowedծնողի սավառնողին կուրսորը ապահովելու համար <label>դուք պետք է disabledհատկանիշն ավելացնեք .form-check-input. Անջատված հատկանիշը կկիրառի ավելի բաց գույն, որը կօգնի ցույց տալ մուտքագրման վիճակը:

Նշման վանդակները և ռադիոների օգտագործումը ստեղծվել են HTML-ի վրա հիմնված ձևերի վավերացումն աջակցելու և հակիրճ, մատչելի պիտակներ տրամադրելու համար: Որպես այդպիսին, մեր <input>s-ն և <label>s-ն եղբայրական տարրեր են՝ ի տարբերություն a-ի <input>ներսում <label>: Սա մի փոքր ավելի խոսուն է, քանի որ դուք պետք է նշեք idև forատրիբուտները կապելու <input>և <label>.

Կանխադրված (դասավոր)

Լռելյայնորեն, ցանկացած թվով վանդակներ և ռադիոներ, որոնք անմիջական եղբայր կամ եղբայր են, կտեղավորվեն ուղղահայաց և համապատասխան հեռավորության վրա .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

Խմբավորեք վանդակները կամ ռադիոները նույն հորիզոնական տողի վրա՝ ավելացնելով .form-check-inlineորևէ մեկին .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>

Առանց պիտակների

Ավելացրեք .position-staticայն մուտքագրումներին, .form-checkորոնք չունեն պիտակի տեքստ: Հիշեք, որ դեռևս տրամադրեք պիտակի որևէ ձև օժանդակ տեխնոլոգիաների համար (օրինակ՝ օգտագործելով 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>

Դասավորություն

Քանի որ Bootstrap-ը կիրառվում է display: blockև width: 100%մեր գրեթե բոլոր ձևերի վերահսկիչները, ձևերը լռելյայնորեն կդասավորվեն ուղղահայաց: Լրացուցիչ դասերը կարող են օգտագործվել այս դասավորությունը փոփոխելու համար՝ ըստ յուրաքանչյուր ձևի:

Կազմել խմբեր

Դասը .form-groupձևաթղթերին որոշ կառուցվածք ավելացնելու ամենահեշտ ձևն է: Այն ապահովում է ճկուն դաս, որը խրախուսում է պիտակների, հսկիչների, կամընտիր օգնության տեքստի և ձևերի վավերացման հաղորդագրությունների պատշաճ խմբավորումը: Լռելյայնորեն այն կիրառվում է միայն margin-bottom, բայց անհրաժեշտության դեպքում ընտրում է լրացուցիչ ոճեր .form-inline: Օգտագործեք այն <fieldset>s, <div>s կամ գրեթե ցանկացած այլ տարրի հետ:

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

Ձևավորող ցանց

Ավելի բարդ ձևեր կարելի է կառուցել՝ օգտագործելով մեր ցանցային դասերը: Օգտագործեք դրանք ձևերի դասավորության համար, որոնք պահանջում են բազմաթիվ սյունակներ, տարբեր լայնություններ և լրացուցիչ հավասարեցման ընտրանքներ:

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

Ձևավորել տող

Դուք կարող եք նաև փոխանակել մեր ստանդարտ ցանցի տողի .rowհետ .form-row, որը վերացնում է լռելյայն սյունակի ջրահեռացումները՝ ավելի ամուր և կոմպակտ դասավորությունների համար:

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

Ցանցային համակարգով կարող են ստեղծվել նաև ավելի բարդ դասավորություններ:

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

Հորիզոնական ձև

Ցանցով ստեղծեք հորիզոնական ձևեր՝ ավելացնելով .rowդասը՝ խմբեր ձևավորելու համար և օգտագործելով .col-*-*դասերը՝ ձեր պիտակների և հսկիչների լայնությունը նշելու համար: Համոզվեք, որ ավելացրեք .col-form-labelնաև ձեր <label>ֆայլերին, որպեսզի դրանք ուղղահայաց կենտրոնացվեն իրենց հետ կապված ձևի կառավարումներով:

Երբեմն, գուցե անհրաժեշտ լինի օգտագործել լուսանցք կամ լիցքավորման կոմունալ ծառայություններ՝ ձեզ անհրաժեշտ կատարյալ հավասարեցում ստեղծելու համար: Օրինակ, մենք հեռացրել ենք padding-topմեր կուտակված ռադիոյի մուտքերի պիտակը, որպեսզի ավելի լավ հավասարեցնենք տեքստի բազային գիծը:

Ռադիոներ
Նշավանդակ
<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>
Հորիզոնական ձևի պիտակի չափում

Համոզվեք, որ օգտագործեք .col-form-label-smկամ .col-form-label-lgձեր <label>s կամ <legend>s-ի չափերը ճիշտ հետևելու համար .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>

Սյունակի չափսերը

Ինչպես ցույց է տրված նախորդ օրինակներում, մեր ցանցային համակարգը թույլ է տալիս տեղադրել ցանկացած թվով .cols a .rowկամ .form-row. Նրանք հասանելի լայնությունը հավասարապես կբաժանեն իրենց միջև: Դուք կարող եք նաև ընտրել ձեր սյունակների ենթաբազմությունը՝ քիչ թե շատ տեղ գրավելու համար, մինչդեռ մնացած սյունակները .colհավասարապես բաժանում են մնացածը՝ հատուկ սյունակների դասերով, ինչպիսիք են .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>

Ավտոմատ չափում

Ստորև բերված օրինակը օգտագործում է flexbox օգտակար ծրագիր՝ բովանդակությունը ուղղահայաց կենտրոնացնելու համար և փոխվում .colէ .col-autoայնպես, որ ձեր սյունակները գրավեն այնքան տարածք, որքան անհրաժեշտ է: Մեկ այլ կերպ ասած, սյունակը չափվում է բովանդակության հիման վրա:

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

Այնուհետև կարող եք նորից խառնել այն չափի հատուկ սյունակների դասերի հետ:

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

Եվ, իհարկե , աջակցվում են հատուկ ձևի վերահսկում :

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

Ներդիր ձևեր

Օգտագործեք .form-inlineդասը՝ մեկ հորիզոնական տողի վրա մի շարք պիտակներ, ձևերի կառավարիչներ և կոճակներ ցուցադրելու համար: Ներկառուցված ձևաթղթերում ձևերի վերահսկիչները մի փոքր տարբերվում են իրենց լռելյայն վիճակներից:

  • Կառավարումներն են display: flex՝ փլուզում է HTML-ի ցանկացած սպիտակ տարածություն և թույլ է տալիս ապահովել հավասարեցման կառավարում միջակայքի և flexbox կոմունալ ծառայությունների հետ:
  • Վերահսկիչները և մուտքային խմբերը ստանում width: autoեն Bootstrap-ի լռելյայն վերացնելու համար width: 100%:
  • Վերահսկիչները հայտնվում են միայն տեսադաշտերում, որոնք ունեն առնվազն 576 պիքսել լայնություն ՝ շարժական սարքերի նեղ դիտակետերը հաշվի առնելու համար:

Հնարավոր է, որ ձեզ անհրաժեշտ լինի ձեռքով կարգավորել առանձին ձևերի վերահսկման լայնությունը և հավասարեցումը միջակայքի կոմունալ ծառայություններով (ինչպես ցույց է տրված ստորև): Վերջապես, համոզվեք, որ <label>յուրաքանչյուր ձևի կառավարում միշտ ներառեք a, նույնիսկ եթե ձեզ անհրաժեշտ է թաքցնել այն ոչ էկրանը կարդացող այցելուներից .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>

Աջակցվում են նաև ձևերի անհատական ​​վերահսկում և ընտրություն:

<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>
Թաքնված պիտակների այլընտրանքներ

Օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցիչները, խնդիրներ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս ներդիր ձևերի համար կարող եք թաքցնել պիտակները՝ օգտագործելով .sr-onlyդասը: Աջակցող տեխնոլոգիաների համար պիտակ տրամադրելու այլ այլընտրանքային մեթոդներ կան, ինչպիսիք են aria-label, aria-labelledbyկամ titleհատկանիշը: Եթե ​​դրանցից ոչ մեկը չկա, օժանդակ տեխնոլոգիաները կարող են դիմել placeholderհատկանիշի օգտագործմանը, եթե առկա է, բայց նշեք, որ placeholderորպես պիտակավորման այլ մեթոդների փոխարինում օգտագործելը խորհուրդ չի տրվում:

Օգնության տեքստ

Բլոկի մակարդակի օգնության տեքստը ձևերով կարող է ստեղծվել օգտագործելով .form-text(նախկինում հայտնի էր որպես .help-blockv3-ում): Ներկառուցված օգնության տեքստը կարող է ճկուն կերպով իրականացվել՝ օգտագործելով ցանկացած ներկառուցված HTML տարր և օգտակար դասեր, ինչպիսիք են .text-muted.

Օգնության տեքստի կապակցում ձևի վերահսկման հետ

Օգնության տեքստը պետք է բացահայտորեն կապված լինի ձևի կառավարման հետ, որին այն առնչվում է aria-describedbyհատկանիշի օգտագործմամբ: Սա կապահովի, որ օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, կհայտարարեն այս օգնության տեքստը, երբ օգտատերը կենտրոնանա կամ մտնի կառավարում:

Ներքևում գտնվող օգնության տեքստը կարելի է ոճավորել .form-text. Այս դասը ներառում display: blockև ավելացնում է որոշ վերին լուսանցք՝ վերը նշված մուտքերից հեշտ հեռավորության համար:

Ձեր գաղտնաբառը պետք է պարունակի 8-20 նիշ, պարունակի տառեր և թվեր և չպետք է պարունակի բացատներ, հատուկ նիշեր կամ էմոջիներ:
<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>

Ներկառուցված տեքստը կարող է օգտագործել ցանկացած տիպիկ ներկառուցված HTML տարր (լինի դա <small>, <span>, կամ որևէ այլ բան) ոչ ավելի, քան օգտակար դաս:

Պետք է լինի 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>

Հաշմանդամ ձևեր

Ավելացրեք disabledբուլյան հատկանիշը մուտքագրման վրա՝ կանխելու օգտատերերի փոխազդեցությունները և այն ավելի թեթև երևալու համար:

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

Ավելացրեք disabledհատկանիշը a-ին, <fieldset>որպեսզի անջատեք ներսում գտնվող բոլոր կառավարումները:

<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>
Զգուշացում խարիսխների հետ

Լռելյայնորեն, զննարկիչները կվերաբերվեն բոլոր բնիկ ձևի կառավարումներին ( <input>, <select>և <button>տարրեր) a-ի ներսում <fieldset disabled>որպես անջատված՝ կանխելով և՛ ստեղնաշարի, և՛ մկնիկի փոխազդեցությունը դրանց վրա: Այնուամենայնիվ, եթե ձեր ձևը ներառում է նաև <a ... class="btn btn-*">տարրեր, դրանց միայն ոճը կտրվի pointer-events: none: Ինչպես նշվեց կոճակների անջատված վիճակի մասին բաժնում (և մասնավորապես խարիսխի տարրերի ենթաբաժնում), այս CSS հատկությունը դեռ ստանդարտացված չէ և ամբողջությամբ չի աջակցվում Opera 18-ում և ներքևում, կամ Internet Explorer 10-ում և շահել է: Չխոչընդոտեք ստեղնաշարի օգտագործողներին, որպեսզի կարողանան կենտրոնանալ կամ ակտիվացնել այս հղումները: Այսպիսով, ապահով լինելու համար օգտագործեք մաքսային JavaScript՝ նման հղումներն անջատելու համար:

Բրաուզերների համատեղելիություն

Թեև Bootstrap-ը կկիրառի այս ոճերը բոլոր բրաուզերներում, Internet Explorer 11-ը և ստորև բերվածը լիովին չեն աջակցում disabledհատկանիշին <fieldset>: Օգտագործեք հատուկ JavaScript՝ այս բրաուզերներում դաշտերի հավաքածուն անջատելու համար:

Վավերացում

Տրամադրեք արժեքավոր, գործնական արձագանքներ ձեր օգտատերերին HTML5 ձևի վավերացման միջոցով, որը հասանելի է մեր բոլոր աջակցվող բրաուզերներում : Ընտրեք դիտարկիչի լռելյայն վավերացման հետադարձ կապից կամ գործարկեք հատուկ հաղորդագրություններ մեր ներկառուցված դասերի և մեկնարկային JavaScript-ի միջոցով:

Մենք խորհուրդ ենք տալիս հատուկ վավերացման ոճեր, քանի որ բրաուզերի բնօրինակները չեն հայտարարվում էկրանի ընթերցողներին:

Ինչպես է դա աշխատում

Ահա, թե ինչպես է ձևի վավերացումը աշխատում Bootstrap-ի հետ.

  • HTML ձևի վավերացումը կիրառվում է CSS-ի երկու կեղծ դասերի միջոցով :invalidև :valid. Այն վերաբերում է <input>, <select>և <textarea>տարրերին:
  • Bootstrap-ը ներառում է :invalidև :validոճերը ծնող .was-validatedդասի համար, որը սովորաբար կիրառվում է <form>. Հակառակ դեպքում, ցանկացած պահանջվող դաշտ առանց արժեքի ցուցադրվում է որպես անվավեր էջի բեռնման ժամանակ: Այսպիսով, դուք կարող եք ընտրել, թե երբ դրանք ակտիվացնեք (սովորաբար ձևը ներկայացնելուց հետո):
  • Որպես փոխարինող, .is-invalidև .is-validդասերը կարող են օգտագործվել կեղծ դասերի փոխարեն սերվերի կողմից վավերացման համար : Նրանք չեն պահանջում .was-validatedծնողական դասարան:
  • CSS-ի աշխատանքի սահմանափակումների պատճառով մենք (ներկայումս) չենք կարող ոճեր կիրառել <label>DOM-ում ձևի կառավարումից առաջ, առանց հատուկ JavaScript-ի օգնության:
  • Բոլոր ժամանակակից բրաուզերներն աջակցում են սահմանափակումների վավերացման API- ին, որը JavaScript-ի մի շարք մեթոդներ է՝ ձևերի վերահսկման վավերացման համար:
  • Հետադարձ կապի հաղորդագրությունները կարող են օգտագործել զննարկիչի լռելյայն (տարբեր յուրաքանչյուր դիտարկիչի համար և անփոփոխ՝ CSS-ի միջոցով) կամ մեր հատուկ հետադարձ կապի ոճերը՝ լրացուցիչ HTML-ով և CSS-ով:
  • Դուք կարող եք տրամադրել հատուկ վավերականության հաղորդագրություններ setCustomValidityJavaScript-ում:

Հաշվի առնելով դա՝ հաշվի առեք հետևյալ ցուցադրությունները՝ մեր հատուկ ձևերի վավերացման ոճերի, կամընտիր սերվերի կողմի դասերի և դիտարկիչի լռելյայնների համար:

Պատվերով ոճեր

Հատուկ Bootstrap ձևի վավերացման հաղորդագրությունների համար դուք պետք է ավելացնեք novalidateբուլյան հատկանիշը ձեր <form>. Սա անջատում է դիտարկիչի կանխադրված հետադարձ կապի գործիքների հուշումները, բայց դեռևս ապահովում է JavaScript-ում ձևերի վավերացման API-ների մուտքը: Փորձեք ներկայացնել ստորև ներկայացված ձևը. մեր JavaScript-ը կխոչընդոտի ուղարկել կոճակը և կփոխանցի ձեզ հետադարձ կապ:

Երբ փորձում եք ուղարկել, կտեսնեք ձեր ձևի կառավարում կիրառվող ոճերը :invalidև ոճերը::valid

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>

Զննարկչի լռելյայն

Չե՞ք հետաքրքրված հատուկ վավերացման հետադարձ հաղորդագրություններով կամ գրել JavaScript՝ ձևի վարքագիծը փոխելու համար: Ամեն ինչ լավ է, դուք կարող եք օգտագործել բրաուզերի կանխադրված կարգավորումները: Փորձեք ներկայացնել ստորև ներկայացված ձևը: Կախված ձեր դիտարկիչից և ՕՀ-ից, դուք կտեսնեք արձագանքի մի փոքր այլ ոճ:

Թեև հետադարձ կապի այս ոճերը չեն կարող ձևավորվել CSS-ով, այնուամենայնիվ, դուք կարող եք հարմարեցնել հետադարձ կապի տեքստը JavaScript-ի միջոցով:

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Սերվերի կողմը

Մենք խորհուրդ ենք տալիս օգտագործել հաճախորդի կողմից վավերացում, սակայն այն դեպքում, երբ դուք պահանջում եք սերվերի կողմը, կարող եք նշել անվավեր և վավեր ձևի դաշտերը .is-invalidև .is-valid. Նկատի ունեցեք, որ .invalid-feedbackաջակցվում է նաև այս դասերի հետ:

Լավ է նայվում!
Լավ է նայվում!
@
Խնդրում ենք ընտրել օգտվողի անուն:
Խնդրում ենք տրամադրել վավեր քաղաք:
Խնդրում ենք տրամադրել վավեր վիճակ:
Խնդրում ենք տրամադրել վավեր zip:
Դուք պետք է համաձայնեք նախքան ներկայացնելը:
<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>

Աջակցվող տարրեր

Մեր օրինակի ձևերը ցույց են տալիս վերևում գտնվող բնիկ տեքստային <input>s-երը, բայց ձևի վավերացման ոճերը հասանելի են նաև մեր հատուկ ձևերի վերահսկման համար:

Անվավեր հետադարձ կապի տեքստի օրինակ
Անվավեր հետադարձ տեքստի ավելի շատ օրինակ
Անվավեր հատուկ ընտրված կարծիքի օրինակ
Անվավեր հատուկ ֆայլի հետադարձ կապի օրինակ
<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>

Գործիքների հուշումներ

Եթե ​​ձեր ձևի դասավորությունը դա թույլ է տալիս, կարող եք դասերը փոխել .{valid|invalid}-feedbackդասերի .{valid|invalid}-tooltipհետ՝ ստուգման հետադարձ կապը ցուցադրելու ոճավորված գործիքի հուշումով: Համոզվեք, որ դրա position: relativeվրա ծնող կա՝ գործիքի հուշում տեղադրելու համար: Ստորև բերված օրինակում մեր սյունակների դասերն արդեն ունեն սա, բայց ձեր նախագիծը կարող է պահանջել այլընտրանքային կարգավորում:

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>

Պատվերով ձևեր

Ավելի հարմարեցվածության և բրաուզերի միջև հետևողականության համար օգտագործեք մեր ամբողջովին հարմարեցված ձևի տարրերը՝ բրաուզերի կանխադրվածները փոխարինելու համար: Դրանք կառուցված են իմաստային և մատչելի նշագրման վրա, ուստի դրանք ամուր փոխարինում են ցանկացած լռելյայն ձևի վերահսկման համար:

Նշման տուփեր և ռադիոներ

Յուրաքանչյուր վանդակ և ռադիո փաթաթված է <div>եղբոր կամ եղբոր <span>հետ՝ ստեղծելու մեր հատուկ հսկողությունը և <label>ուղեկցող տեքստի համար: Կառուցվածքային առումով սա նույն մոտեցումն է, ինչ մեր լռելյայն .form-check:

Մենք օգտագործում ենք քույր կամ եղբայր ընտրիչը ( ~) մեր բոլոր <input>վիճակների համար, օրինակ, :checkedմեր հատուկ ձևի ցուցիչը ճիշտ ձևավորելու համար: Երբ համակցվում է .custom-control-labelդասի հետ, մենք կարող ենք նաև ոճավորել տեքստը յուրաքանչյուր տարրի համար՝ հիմնվելով <input>' վիճակի վրա:

Մենք թաքցնում ենք լռելյայնը <input>և opacityօգտագործում .custom-control-labelենք՝ իր տեղում նոր հատուկ ձևի ցուցիչ կառուցելու համար ::beforeև ::after. Ցավոք սրտի, մենք չենք կարող ստեղծել մաքսային մեկը միայն այդ տարրի վրա, <input>քանի որ CSS- contentը չի աշխատում այդ տարրի վրա:

Նշված վիճակներում մենք օգտագործում ենք base64 ներկառուցված SVG պատկերակներ Open Iconic- ից : Սա ապահովում է մեզ լավագույն կառավարումը բրաուզերների և սարքերի միջև ոճավորման և դիրքավորման համար:

Նշավանդակներ

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

Պատվերով վանդակները կարող են նաև օգտագործել :indeterminateկեղծ դասը, երբ ձեռքով սահմանվում է JavaScript-ի միջոցով (այն նշելու համար հասանելի HTML հատկանիշ չկա):

Եթե ​​դուք օգտագործում եք jQuery, նման բան պետք է բավարար լինի.

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

Ռադիոներ

<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

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

Անաշխատունակ

Պատվերով վանդակները և ռադիոկայանները կարող են նաև անջատվել: Ավելացրե՛ք disabledբուլյան հատկանիշը, <input>և հատուկ ցուցիչն ու պիտակի նկարագրությունը ավտոմատ կերպով ոճավորվեն:

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

Ընտրեք ընտրացանկը

Պատվերով <select>մենյուներին անհրաժեշտ է միայն հատուկ դասակարգ՝ .custom-selectհատուկ ոճերը գործարկելու համար:

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

Դուք կարող եք նաև ընտրել փոքր և մեծ հատուկ ընտրանքներից՝ մեր նմանատիպ չափի տեքստային մուտքագրումներին համապատասխանելու համար:

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

Հատկանիշը multipleնաև աջակցվում է.

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

Ինչպես sizeհատկանիշն է.

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

Ֆայլի զննարկիչ

Ֆայլի մուտքագրումն ամենասարսափելին է և պահանջում է լրացուցիչ JavaScript, եթե ցանկանում եք դրանք միացնել ֆունկցիոնալ Ընտրել ֆայլը… և ընտրված ֆայլի անվան տեքստին:

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

Մենք թաքցնում ենք լռելյայն ֆայլը <input>և opacityփոխարենը ձևավորում ենք <label>. Կոճակը ստեղծվում և տեղադրվում է ::after. Վերջապես, մենք հայտարարում ենք a widthand heighton-ը <input>շրջակա բովանդակության համար պատշաճ տարածության համար:

Թարգմանել կամ հարմարեցնել տողերը

Կեղծ :lang()դասը օգտագործվում է «Փնտրել» տեքստը այլ լեզուներով թարգմանելու համար: Անտեսեք կամ ավելացրեք մուտքերը $custom-file-textSass փոփոխականին համապատասխան լեզվական պիտակով և տեղայնացված տողերով: Անգլերեն տողերը կարող են հարմարեցվել նույն կերպ: Օրինակ, ահա թե ինչպես կարելի է ավելացնել իսպաներեն թարգմանություն (իսպաներեն լեզվի կոդը հետևյալն է es).

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

Ահա lang(es)իսպաներեն թարգմանության համար հատուկ ֆայլի մուտքագրման գործողությունը.

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

Դուք պետք է ճիշտ սահմանեք ձեր փաստաթղթի (կամ դրա ենթածառի) լեզուն, որպեսզի ճիշտ տեքստը ցուցադրվի: Դա կարելի է անել ՝lang օգտագործելով <html>տարրի հատկանիշը կամ Content-LanguageHTTP վերնագիրը ՝ ի թիվս այլ մեթոդների: