in English

Формс

Примери и упутства за употребу стилова контроле образаца, опција изгледа и прилагођених компоненти за креирање широког спектра образаца.

Преглед

Боотстрап-ове контроле обрасца проширују наше поново покренуте стилове обрасца са класама. Користите ове класе да бисте омогућили њихове прилагођене приказе за конзистентније приказивање у прегледачима и уређајима.

Обавезно користите одговарајући typeатрибут на свим улазима (нпр. emailза адресу е-поште или numberза нумеричке информације) да бисте искористили предности новијих контрола уноса као што су верификација е-поште, избор броја и још много тога.

Ево кратког примера за демонстрацију стилова обрасца Боотстрапа. Наставите да читате документацију о потребним часовима, изгледу обрасца и још много тога.

Никада нећемо делити вашу е-пошту ни са ким. 
<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>с, <select>с и <textarea>с — стилизоване су са .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 елемената . Поља за потврду служе за бирање једне или више опција на листи, док су радио уређаји за избор једне опције из више.

Подржани су онемогућени оквири за потврду и радио. Атрибут disabledће применити светлију боју како би помогао да се означи стање уноса.

Поља за потврду и радио дугмад подржавају валидацију обрасца засновану на ХТМЛ-у и пружају сажете, приступачне ознаке. Као такви, наши <input>с и <label>с су сродни елементи за разлику од <input>унутар а <label>. Ово је мало опширније јер морате навести idи forатрибуте да бисте повезали <input>и <label>.

Подразумевано (наслагано)

Подразумевано, било који број поља за потврду и радија који су непосредни брат или сестра биће вертикално наслагани и на одговарајући начин распоређени са .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <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>

Лаиоут

Пошто се Боотстрап примењује display: blockи width: 100%на скоро све наше контроле обрасца, обрасци ће се подразумевано слагати вертикално. Додатне класе се могу користити за варирање овог распореда на основу облика.

Формирајте групе

Класа .form-groupје најлакши начин за додавање структуре обрасцима. Пружа флексибилну класу која подстиче правилно груписање ознака, контрола, опционог текста помоћи и порука о валидацији образаца. Подразумевано се примењује само margin-bottom, али .form-inlineпо потреби преузима додатне стилове. Користите га са <fieldset>с, <div>с или скоро било којим другим елементом.

<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>с тако да буду вертикално центрирани са припадајућим контролама обрасца.

Понекад ћете можда морати да користите помоћне програме за маргине или паддинг да бисте направили савршено поравнање које вам је потребно. На пример, уклонили смо 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>с или <legend>с да бисте правилно пратили величину .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>

Димензионисање колоне

Као што је приказано у претходним примерима, наш систем мреже вам омогућава да поставите било који број .colс унутар .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>

Ауто-димензионирање

Пример у наставку користи услужни програм флекбок да вертикално центрира садржај и мења .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, сажимају било који ХТМЛ бели простор и омогућавају вам да обезбедите контролу поравнања помоћу услужних програма за размак и флексбокс .
  • Контроле и улазне групе добијају width: autoда замене Боотстрап подразумевану вредност 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у в3). Уграђени текст помоћи може се флексибилно имплементирати коришћењем било ког уграђеног ХТМЛ елемента и услужних класа као што је .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>

Уметнути текст може да користи било који типичан инлине ХТМЛ елемент (било да се ради о <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атрибут у а <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. Као што је наведено у одељку о онемогућеном стању за дугмад (и посебно у пододељку за елементе сидра), ово ЦСС својство још увек није стандардизовано и није у потпуности подржано у Интернет Екплорер-у 10. Контроле засноване на сидру ће такође и даље бити може се фокусирати и користити помоћу тастатуре. Морате ручно да измените ове контроле додавањем tabindex="-1"да бисте спречили да примају фокус и aria-disabled="disabled"да бисте сигнализирали њихово стање помоћним технологијама.

Компатибилност са више претраживача

Док ће Боотстрап применити ове стилове у свим прегледачима, Интернет Екплорер 11 и старији не подржавају у потпуности disabledатрибут на <fieldset>. Користите прилагођени ЈаваСцрипт да бисте онемогућили скуп поља у овим прегледачима.

Валидација

Обезбедите вредне, корисне повратне информације својим корисницима помоћу валидације ХТМЛ5 обрасца – доступног у свим нашим подржаним прегледачима . Изаберите неку од подразумеваних повратних информација о валидацији прегледача или примените прилагођене поруке помоћу наших уграђених класа и почетничког ЈаваСцрипт-а.

Свесни смо да тренутно прилагођени стилови валидације на страни клијента и описи алата нису доступни, јер нису изложени помоћним технологијама. Док радимо на решењу, препоручујемо да користите опцију на страни сервера или подразумевани метод провере прегледача.

Како то ради

Ево како валидација обрасца функционише са Боотстрапом:

  • Валидација ХТМЛ форме се примењује преко ЦСС две псеудокласе :invalidи :valid. Односи се на <input>, <select>и <textarea>елементе.
  • Боотстрап обухвата :invalidи :validстилове на родитељску .was-validatedкласу, обично се примењује на <form>. У супротном, свако обавезно поље без вредности приказује се као неважеће при учитавању странице. На овај начин можете изабрати када да их активирате (обично након покушаја подношења обрасца).
  • Да бисте ресетовали изглед обрасца (на пример, у случају динамичког слања обрасца помоћу АЈАКС-а), уклоните .was-validatedкласу из <form>поново након слања.
  • Као резервни, .is-invalidкласе .is-validсе могу користити уместо псеудо-класа за валидацију на страни сервера . Не захтевају .was-validatedродитељску класу.
  • Због ограничења у начину на који ЦСС функционише, не можемо (тренутно) да применимо стилове на а <label>који се налази испред контроле обрасца у ДОМ-у без помоћи прилагођеног ЈаваСцрипт-а.
  • Сви савремени претраживачи подржавају АПИ за валидацију ограничења , серију ЈаваСцрипт метода за проверу контроле обрасца.
  • Поруке са повратним информацијама могу да користе подразумеване поставке претраживача (различите за сваки прегледач и нестилизиране преко ЦСС-а) или наше прилагођене стилове повратних информација са додатним ХТМЛ-ом и ЦСС-ом.
  • Можете да обезбедите прилагођене поруке о валидности са setCustomValidityу ЈаваСцрипт-у.

Имајући то на уму, размотрите следеће демонстрације за наше прилагођене стилове валидације обрасца, опционе класе на страни сервера и подразумеване вредности претраживача.

Прилагођени стилови

За поруке о валидацији прилагођеног Боотстрап обрасца, мораћете да додате novalidateлогички атрибут у свој <form>. Ово онемогућава подразумеване савете прегледача за повратне информације, али и даље пружа приступ АПИ-јима за валидацију обрасца у ЈаваСцрипт-у. Покушајте да пошаљете образац испод; наш ЈаваСцрипт ће пресрести дугме за слање и пренети вам повратне информације. Када покушате да пошаљете, видећете стилове :invalidи :validпримењене на ваше контроле обрасца.

Прилагођени стилови повратних информација примењују прилагођене боје, ивице, стилове фокуса и позадинске иконе да боље комуницирају повратне информације. Позадинске иконе за <select>с су доступне само са .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>

Подразумеване поставке претраживача

Нисте заинтересовани за прилагођене повратне информације о валидацији или писање ЈаваСцрипт-а да бисте променили понашање обрасца? Све у реду, можете користити подразумеване поставке претраживача. Покушајте да пошаљете образац испод. У зависности од вашег претраживача и ОС-а, видећете мало другачији стил повратних информација.

Иако се ови стилови повратних информација не могу стилизовати помоћу ЦСС-а, и даље можете да прилагодите текст повратних информација путем ЈаваСцрипт-а.

<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-checkboxс и .custom-radioс
  • .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>

Прилагођавање

Стања валидације могу се прилагодити преко Сасс-а са $form-validation-statesмапом. Смештена у нашој _variables.scssдатотеци, ова Сасс мапа је запетљана да би се генерисала подразумевана 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>јер ЦСС contentне ради на том елементу.

У провереним стањима користимо басе64 уграђене СВГ иконе из Опен Ицониц . Ово нам пружа најбољу контролу за стилизовање и позиционирање у прегледачима и уређајима.

Поља за потврду

<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псеудо класу када се ручно подесе преко ЈаваСцрипт-а (нема доступног ХТМЛ атрибута за његово навођење).

Ако користите јКуери, нешто попут овога би требало да буде довољно:

$('.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>с због ограничења претраживача.

<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. Трака (позадина) и палац (вредност) су стилизовани тако да изгледају исто у свим прегледачима. Пошто само ИЕ и Фирефок подржавају „испуњавање“ своје траке са леве или десне стране палца као средство за визуелно указивање на напредак, ми то тренутно не подржавамо.

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

Прегледач датотека

Препоручени додатак за анимирање прилагођеног уноса датотеке: бс-цустом-филе-инпут , то је оно што тренутно користимо овде у нашим документима.

Унос датотеке је најгрубљи од гомиле и захтева додатни ЈаваСцрипт ако желите да их повежете са функционалним Изаберите датотеку... и текстом имена изабраног фајла.

<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>за правилан размак за околни садржај.

Превођење или прилагођавање стрингова помоћу СЦСС-а

:lang()Псеудо-класа се користи да омогући превод текста „Прегледај“ на друге језике. Замените или додајте уносе у $custom-file-textСасс променљиву са релевантном језичком ознаком и локализованим стринговима. Енглеске жице се могу прилагодити на исти начин. На пример, ево како се може додати шпански превод (шифра шпанског језика је 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-LanguageХТТП заглавља , између осталих метода.

Превођење или прилагођавање стрингова помоћу ХТМЛ-а

Боотстрап такође пружа начин за превођење текста „Прегледај“ у ХТМЛ са 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>