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

Адключаныя сцяжкі і радыё падтрымліваюцца, але каб забяспечыць not-allowedкурсор пры навядзенні на бацькоўскі элемент <label>, вам трэба будзе дадаць disabledатрыбут у .form-check-input. Атрыбут 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">
  </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>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" 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 у межах .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>
    <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, і не будзе перашкаджаць карыстальнікам клавіятуры можа засяродзіцца або актываваць гэтыя спасылкі. Такім чынам, каб быць у бяспецы, выкарыстоўвайце ўласны JavaScript, каб адключыць такія спасылкі.

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

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

Праверка

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

У цяперашні час мы рэкамендуем выкарыстоўваць карыстальніцкія стылі праверкі, паколькі ўласныя паведамленні аб праверцы па змаўчанні не заўсёды падвяргаюцца дапаможным тэхналогіям ва ўсіх браўзерах (у першую чаргу, Chrome на працоўным стале і мабільным).

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

Вось як працуе праверка формы з 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.

Выглядае добра!
Выглядае добра!
@
Выберыце імя карыстальніка.
Укажыце сапраўдны горад.
Укажыце сапраўдны стан.
Увядзіце сапраўдны паштовы індэкс.
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што таксама падтрымліваецца гэтымі класамі.

Выглядае добра!
Выглядае добра!
@
Выберыце імя карыстальніка.
Укажыце сапраўдны горад.
Укажыце сапраўдны стан.
Увядзіце сапраўдны паштовы індэкс.
Вы павінны пагадзіцца перад адпраўкай. 
<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>вышэй, але стылі праверкі формы таксама даступныя для <textarea>s і карыстальніцкіх элементаў кіравання формамі.

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

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

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

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

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

Падказкі

Калі ваш макет формы гэта дазваляе, вы можаце памяняць .{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>

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

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

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

Кожны сцяжок, радыё <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="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="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>