in English

Формы

Прыклады і рэкамендацыі па выкарыстанні стыляў кіравання формамі, параметраў макета і карыстацкіх кампанентаў для стварэння шырокага спектру формаў.

Агляд

Элементы кіравання формамі 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">
    <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>

Элементы кіравання формай

Элементы кіравання тэкставай формы, такія як <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">
    </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-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>

Сцяжкі і радыё

Сцяжкі па змаўчанні і радыё палепшаны з дапамогай аднаго класа для абодвух тыпаў уводу .form-check, які паляпшае размяшчэнне і паводзіны іх элементаў HTML . Сцяжкі прызначаны для выбару аднаго або некалькіх варыянтаў у спісе, у той час як радыё - для выбару аднаго варыянту з многіх.

Падтрымліваюцца адключаныя сцяжкі і радыё. Атрыбут disabledбудзе прымяняць больш светлы колер, каб паказаць стан уводу.

Сцяжкі і радыёкнопкі падтрымліваюць праверку формы на аснове HTML і забяспечваюць сціслыя, даступныя меткі. Такім чынам, нашы <input>s і <label>s з'яўляюцца роднаснымі элементамі ў адрозненне ад элементаў <input>унутры a <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">
  <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>

У радку

Згрупуйце сцяжкі або радыё ў адным гарызантальным радку, дадаўшы .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 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>

Сетка формы

Больш складаныя формы можна ствараць з дапамогай нашых класаў сеткі. Выкарыстоўвайце іх для макетаў форм, якія патрабуюць некалькіх слупкоў, рознай шырыні і дадатковых параметраў выраўноўвання.

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

Гарызантальная форма

Стварайце гарызантальныя формы з сеткай, дадаючы .rowкласы ў групы і выкарыстоўваючы .col-*-*класы для ўказання шырыні вашых метак і элементаў кіравання. Не забудзьцеся таксама дадаць .col-form-labelу свае <label>s, каб яны былі вертыкальна адцэнтраваны з адпаведнымі элементамі кіравання формай.

Часам вам, магчыма, спатрэбіцца выкарыстоўваць утыліты поля або запаўнення, каб стварыць неабходнае ідэальнае выраўноўванне. Напрыклад, мы выдалілі 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">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Памер этыкеткі гарызантальнай формы

Абавязкова выкарыстоўвайце .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 у межах .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 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>

Убудаваныя формы

Выкарыстоўвайце .form-inlineклас для адлюстравання серыі этыкетак, элементаў кіравання формай і кнопак у адным гарызантальным радку. Элементы кіравання формамі ва ўбудаваных формах нязначна адрозніваюцца ад стану па змаўчанні.

  • Элементы кіравання згортваюць display: flexлюбы прабел у HTML і дазваляюць забяспечваць кантроль выраўноўвання з дапамогай утыліт інтэрвалу і flexbox .
  • Элементы кіравання і групы ўводу атрымліваюць width: auto, каб перавызначыць Bootstrap па змаўчанні width: 100%.
  • Элементы кіравання з'яўляюцца ўбудаванымі толькі ў вокнах прагляду шырынёй не менш за 576 пікселяў для ўліку вузкіх вокнаў прагляду на мабільных прыладах.

Магчыма, вам спатрэбіцца ўручную вырашыць шырыню і выраўноўванне асобных элементаў кіравання формай з дапамогай утыліт інтэрвалу (як паказана ніжэй). Нарэшце, не забудзьцеся заўсёды ўключаць у <label>кожны кантроль формы, нават калі вам трэба схаваць яго ад наведвальнікаў, якія не карыстаюцца праграмамі чытання з экрана, з дапамогай .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-blockу v3). Убудаваны тэкст даведкі можа быць гнутка рэалізаваны з дапамогай любога ўбудаванага элемента 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>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Засцярога з якарамі

Браўзеры разглядаюць усе ўласныя элементы кіравання формай ( <input>, <select>, і <button>элементы) унутры <fieldset disabled>як адключаныя, прадухіляючы ўзаемадзеянне з імі як клавіятурай, так і мышшу.

Аднак, калі ваша форма таксама ўключае ўласныя элементы, падобныя на кнопку, такія як <a ... class="btn btn-*">, ім будзе нададзены толькі стыль pointer-events: none. Як адзначалася ў раздзеле аб адключаным стане для кнопак (і ў прыватнасці ў падраздзеле для прывязных элементаў), гэта ўласцівасць CSS яшчэ не стандартызавана і не цалкам падтрымліваецца ў Internet Explorer 10. Элементы кіравання на аснове прывязкі таксама застануцца можна сфакусаваць і працаваць з дапамогай клавіятуры. Вы павінны ўручную змяніць гэтыя элементы кіравання, дадаўшы іх, tabindex="-1"каб прадухіліць іх фокус і aria-disabled="disabled"паведаміць аб іх стане дапаможным тэхналогіям.

Кросбраузерная сумяшчальнасць

У той час як Bootstrap будзе прымяняць гэтыя стылі ва ўсіх браўзерах, Internet Explorer 11 і ніжэй не цалкам падтрымліваюць disabledатрыбут на <fieldset>. Выкарыстоўвайце карыстальніцкі JavaScript, каб адключыць набор палёў у гэтых браўзерах.

Праверка

Дайце сваім карыстальнікам каштоўную, дзейсную зваротную сувязь з дапамогай праверкі формы HTML5, даступнай ва ўсіх браўзерах, якія падтрымліваюцца намі . Выбірайце са зваротнай сувязі праверкі браўзера па змаўчанні або выкарыстоўвайце ўласныя паведамленні з дапамогай нашых убудаваных класаў і пачатковага JavaScript.

Мы ведаем, што ў цяперашні час карыстальніцкія стылі праверкі і падказкі на баку кліента недаступныя, паколькі яны не падвяргаюцца ўздзеянню дапаможных тэхналогій. Пакуль мы працуем над рашэннем, мы рэкамендуем альбо выкарыстоўваць параметр на баку сервера, альбо метад праверкі браўзера па змаўчанні.

Як гэта працуе

Вось як працуе праверка формы з Bootstrap:

  • Праверка формы HTML прымяняецца з дапамогай двух псеўдакласаў CSS :invalidі :valid. Гэта прымяняецца да элементаў <input>, <select>і .<textarea>
  • Bootstrap размяркоўвае :invalidі :validстылі для бацькоўскага .was-validatedкласа, звычайна прымяняюцца да <form>. У адваротным выпадку любое абавязковае поле без значэння будзе адлюстроўвацца як несапраўднае пры загрузцы старонкі. Такім чынам, вы можаце выбраць, калі іх актываваць (звычайна пасля спробы адпраўкі формы).
  • Каб скінуць знешні выгляд формы (напрыклад, у выпадку дынамічнай адпраўкі формы з дапамогай AJAX), выдаліце .was-validated​​клас з <form>зноў пасля адпраўкі.
  • У якасці запаснога варыянту можна выкарыстоўваць класы замест псеўдакласаў для .is-invalidправеркі на баку сервера . Яны не патрабуюць бацькоўскага класа..is-valid.was-validated
  • З-за абмежаванняў у тым, як працуе CSS, мы не можам (у цяперашні час) прымяніць стылі да, <label>які знаходзіцца перад элементам кіравання формай у DOM, без дапамогі карыстальніцкага JavaScript.
  • Усе сучасныя браўзеры падтрымліваюць API праверкі абмежаванняў , серыю метадаў JavaScript для праверкі элементаў кіравання формамі.
  • У паведамленнях зваротнай сувязі могуць выкарыстоўвацца налады браўзера па змаўчанні (розныя для кожнага браўзера і недаступныя для стылізацыі з дапамогай CSS) або нашы ўласныя стылі зваротнай сувязі з дадатковымі HTML і CSS.
  • Вы можаце прадастаўляць спецыяльныя паведамленні аб сапраўднасці setCustomValidityў JavaScript.

Маючы гэта на ўвазе, разгледзьце наступныя дэманстрацыі нашых карыстальніцкіх стыляў праверкі формы, дадатковых класаў на баку сервера і налад браўзера па змаўчанні.

Індывідуальныя стылі

Для карыстальніцкіх паведамленняў праверкі формы Bootstrap вам трэба будзе дадаць novalidateлагічны атрыбут у файл <form>. Гэта адключае падказкі браўзера па змаўчанні для зваротнай сувязі, але па-ранейшаму забяспечвае доступ да API праверкі формы ў JavaScript. Паспрабуйце адправіць форму ніжэй; наш JavaScript перахопіць кнопку адпраўкі і перадасць вам зваротную сувязь. Пры спробе адпраўкі вы ўбачыце стылі :invalidі :valid, прымененыя да элементаў кіравання формай.

Карыстальніцкія стылі зваротнай сувязі прымяняюць карыстальніцкія колеры, рамкі, стылі фокусу і фонавыя значкі для лепшай перадачы зваротнай сувязі. Фонавыя значкі для <select>s даступныя толькі з .custom-select, а не .form-control.

Выглядае добра!
Выглядае добра!
Укажыце сапраўдны горад.
Выберыце сапраўдны штат.
Увядзіце сапраўдны паштовы індэкс.
Вы павінны пагадзіцца перад адпраўкай. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Стандартныя налады браўзера

Не зацікаўлены ў карыстальніцкіх зваротных паведамленнях праверкі або напісанні JavaScript для змены паводзін формы? Усё добра, вы можаце выкарыстоўваць налады браўзера па змаўчанні. Паспрабуйце адправіць форму ніжэй. У залежнасці ад вашага браўзера і АС вы ўбачыце крыху іншы стыль зваротнай сувязі.

Хоць гэтыя стылі зваротнай сувязі нельга стылізаваць з дапамогай CSS, вы ўсё роўна можаце наладзіць тэкст зваротнай сувязі праз JavaScript.

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

Бок сервера

Мы рэкамендуем выкарыстоўваць праверку на баку кліента, але калі вам патрэбна праверка на баку сервера, вы можаце пазначыць несапраўдныя і сапраўдныя палі формы з дапамогай .is-invalidі .is-valid. Звярніце ўвагу, .invalid-feedbackшто таксама падтрымліваецца гэтымі класамі.

Для несапраўдных палёў пераканайцеся, што несапраўдны водгук/паведамленне пра памылку звязаны з адпаведным полем формы з дапамогай aria-describedby. Гэты атрыбут дазваляе спасылацца больш чым на адзін id, калі поле ўжо паказвае на дадатковы тэкст формы.

Выглядае добра!
Выглядае добра!
Укажыце сапраўдны горад.
Выберыце сапраўдны штат.
Увядзіце сапраўдны паштовы індэкс.
Вы павінны пагадзіцца перад адпраўкай. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Падтрымліваюцца элементы

Стылі праверкі даступныя для наступных элементаў кіравання і кампанентаў формы:

  • <input>ы і <textarea>ы с.form-control
  • <select>з .form-controlабо.custom-select
  • .form-checkс
  • .custom-checkboxs і .custom-radios
  • .custom-file
Калі ласка, увядзіце паведамленне ў тэкставае поле.
Прыклад несапраўднага тэксту водгуку
Яшчэ прыклад несапраўднага тэксту водгуку
Прыклад несапраўднай зваротнай сувязі выбару
Прыклад несапраўднай зваротнай сувязі з карыстальніцкім файлам
@
Прыклад несапраўднай зваротнай сувязі групы ўводу
Прыклад несапраўднай зваротнай сувязі групы ўводу
Прыклад несапраўднай зваротнай сувязі групы ўводу 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

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

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

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

Падказкі

Калі ваш макет формы гэта дазваляе, вы можаце памяняць .{valid|invalid}-feedbackкласы на .{valid|invalid}-tooltipкласы, каб адлюстраваць зваротную сувязь праверкі ў стылізаванай падказцы. Упэўніцеся, што бацька position: relativeзнаходзіцца на ім для размяшчэння падказкі. У прыведзеным ніжэй прыкладзе нашы класы слупкоў ужо маюць гэта, але для вашага праекта можа спатрэбіцца альтэрнатыўная ўстаноўка.

Выглядае добра!
Выглядае добра!
Укажыце сапраўдны горад.
Выберыце сапраўдны штат.
Увядзіце сапраўдны паштовы індэкс. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Наладжванне

Станы праверкі можна наладзіць праз Sass з $form-validation-statesкартай. _variables.scssГэтая карта Sass, размешчаная ў нашым файле, зацыкліваецца для стварэння станаў па змаўчанні valid/ invalidправеркі. Уключана ўкладзеная карта для налады колеру і значка кожнага штата. Хаця ніякія іншыя станы не падтрымліваюцца браўзерамі, тыя, хто выкарыстоўвае карыстальніцкія стылі, могуць лёгка дадаць больш складаную форму зваротнай сувязі.

Звярніце ўвагу, што мы не рэкамендуем наладжваць гэтыя значэнні, не мадыфікуючы таксама form-validation-stateміксін.

// 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));
}

Праверка групы ўводу

Каб вызначыць, якім элементам патрэбныя закругленыя вуглы ўнутры групы ўводу з праверкай, для групы ўводу патрабуецца дадатковы .has-validationклас.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Выберыце імя карыстальніка.

Карыстальніцкія формы

Для яшчэ большай налады і ўзгодненасці ў розных браўзерах выкарыстоўвайце нашы цалкам індывідуальныя элементы формы, каб замяніць налады браўзера па змаўчанні. Яны створаны на аснове семантычнай і даступнай разметкі, таму з'яўляюцца надзейнай заменай любога стандартнага элемента кіравання формай.

Сцяжкі і радыё

Кожны сцяжок, радыё <input>і <label>спарванне загорнуты ў , <div>каб стварыць наш уласны элемент кіравання. Структурна гэта той жа падыход, што і наш стандартны .form-check.

Мы выкарыстоўваем селектар брата і сястры ( ~) для ўсіх нашых <input>станаў, напрыклад, :checkedкаб правільна стылізаваць наш індыкатар карыстацкай формы. У спалучэнні з .custom-control-labelкласам мы таксама можам стылізаваць тэкст для кожнага элемента ў залежнасці ад <input>стану '.

Мы хаваем значэнне па змаўчанні <input>з дапамогай opacityі выкарыстоўваем .custom-control-labelдля стварэння новага індывідуальнага індыкатара формы на яго месцы з дапамогай ::beforeі ::after. На жаль, мы не можам стварыць карыстацкі элемент толькі з гэтага элемента, <input>таму што CSS contentне працуе з гэтым элементам.

У адзначаных станах мы выкарыстоўваем абразкі SVG, убудаваныя ў базу 64, з 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>

У радку

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

Інваліды

Карыстальніцкія сцяжкі і радыё таксама можна адключыць. Дадайце disabledлагічны атрыбут да <input>і карыстальніцкі індыкатар і апісанне меткі будуць аўтаматычна стылізаваны.

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

Выключальнікі

Пераключальнік мае разметку карыстацкага сцяжка, але выкарыстоўвае .custom-switchклас для візуалізацыі тумблера. Пераключальнікі таксама падтрымліваюць disabledатрыбут.

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

Выберыце меню

Карыстальніцкім <select>меню патрэбны толькі карыстальніцкі клас, .custom-selectкаб выклікаць карыстальніцкія стылі. Карыстальніцкія стылі абмежаваныя <select>першапачатковым выглядам і не могуць змяняць <option>s з-за абмежаванняў браўзера.

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

Дыяпазон

Стварыце ўласныя <input type="range">элементы кіравання з дапамогай .custom-range. Трэк (фон) і вялікі палец (значэнне) стылізаваны так, каб выглядаць аднолькава ў браўзерах. Паколькі толькі IE і Firefox падтрымліваюць «запаўненне» сваёй дарожкі злева ці справа ад вялікага пальца ў якасці сродку для візуальнага паказу прагрэсу, мы зараз не падтрымліваем гэта.

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

Уваходы дыяпазону маюць няяўныя значэнні для minі max— 0і 100адпаведна. Вы можаце ўказаць новыя значэнні для тых, хто выкарыстоўвае атрыбуты minі .max

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

Па змаўчанні ўваходы дыяпазону "прывязваюцца" да цэлых значэнняў. Каб змяніць гэта, вы можаце ўказаць stepзначэнне. У прыкладзе ніжэй мы падвойваем колькасць крокаў з дапамогай step="0.5".

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

Файлавы браўзэр

Рэкамендаваны плагін для анімацыі карыстальніцкага ўводу файла: bs-custom-file-input , гэта тое, што мы зараз выкарыстоўваем у нашых дакументах.

Увод файла з'яўляецца самым складаным з усіх і патрабуе дадатковага 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. Нарэшце, мы абвяшчаем widthі heightна <input>для належнага інтэрвалу для навакольнага змесціва.

Пераклад або налада радкоў з дапамогай SCSS

Псеўдаклас выкарыстоўваецца :lang()для перакладу тэксту «Агляд» на іншыя мовы. Перавызначце або дадайце запісы ў $custom-file-textзменную Sass адпаведным моўным тэгам і лакалізаванымі радкамі. Ангельскія радкі можна наладзіць такім жа чынам. Напрыклад, вось як можна дадаць іспанскі пераклад (код іспанскай мовы: 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 , сярод іншых метадаў.

Пераклад або налада радкоў з дапамогай HTML

Bootstrap таксама забяспечвае спосаб перакладу тэксту «Browse» у HTML з data-browseатрыбутам, які можа быць дададзены ў карыстальніцкую метку ўводу (прыклад на галандскай мове):

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