in English

Формалар

Форма белән идарә итү стиле, макет вариантлары, төрле формалар ясау өчен махсус компонентлар өчен үрнәкләр һәм куллану күрсәтмәләре.

Гомуми күзәтү

Bootstrap формасы белән идарә итү класслар белән Rebooted форма стильләрендә киңәя. Браузерлар һәм җайланмалар арасында эзлекле күрсәтү өчен, бу классларны кулланыгыз.

Электрон почта тикшерүе, номер сайлау һ.б. кебек яңа кертү контроллерыннан файдалану өчен type, барлык керемнәрдә тиешле атрибутны кулланыгыз (мәсәлән, emailэлектрон почта адресы яки санлы мәгълүмат өчен).number

Bootstrap формасының стильләрен күрсәтү өчен тиз мисал. Кирәкле класслар, форма макеты һәм башкалар турында документлар өчен укуны дәвам итегез.

Без сезнең электрон почтагызны бүтәннәр белән бүлешмәячәкбез. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Форма белән идарә итү

Текст формасы белән идарә итү, s, s, s кебек <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>

Такталар һәм радио

Килешү пунктлары һәм радио ярдәмендә HTML элементларының макетын һәм тәртибен яхшырта торган кертү төрләре .form-checkөчен бер класс ярдәмендә яхшыртыла . Такталар исемлектә бер яки берничә вариантны сайлау өчен, радиолар күпләрдән бер вариантны сайлау өчен.

Инвалид пунктлар һәм радио ярдәм итә. disabledАтрибут кертү халәтен күрсәтергә ярдәм итәр өчен җиңелрәк төс кулланачак .

Такталар һәм радио төймәләре HTML нигезендә форманы тикшерүне хуплый һәм кыска, үтемле этикеткалар бирә. Шулай итеп, безнең <input>s һәм <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>

Таблицасы

Bootstrap кулланылганга display: blockһәм width: 100%безнең барлык формалар белән идарә итүгә диярлек, формалар килешү буенча вертикаль рәвештә урнаштырылачак. Өстәмә класслар бу макетны форма нигезендә үзгәртү өчен кулланылырга мөмкин.

Төркемнәрне формалаштыру

Класс .form-group- формаларга ниндидер структура өстәү өчен иң җиңел ысул. Бу этикеткаларны, контрольләрне, өстәмә ярдәм текстын һәм валидация хәбәрләрен формалаштыруны дәртләндерүче сыгылучан класс тәкъдим итә. Килешү буенча ул гына кулланыла margin-bottom, ләкин .form-inlineкирәк булганда өстәмә стильләр ала. Аны <fieldset>s, <div>s яки бүтән элементлар белән кулланыгыз.

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

Челтәр формасы

Безнең челтәр класслары ярдәмендә катлаулырак формалар төзелергә мөмкин. Аларны берничә багана, төрле киңлек һәм өстәмә тигезләү вариантлары таләп иткән форма макетлары өчен кулланыгыз.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Форма рәте

Сез шулай ук ​​безнең стандарт челтәр рәтенең төрләнешен алыштыра аласыз .row, .form-rowул катырак һәм тыгызрак урнашу өчен демократик багана чүпрәкләрен юкка чыгара.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Челтәр системасы белән тагын да катлаулырак макетлар булдырырга мөмкин.

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

Горизонталь форма

.rowТөркемнәр формалаштыру өчен класслар өстәп һәм .col-*-*сезнең этикеткалар һәм контроль киңлекне күрсәтү өчен класслар кулланып , челтәр белән горизонталь формалар төзегез . .col-form-labelСезнең с -ларга да өстәргә онытмагыз, <label>шуңа күрә алар бәйләнешле форма белән идарә итәләр.

Кайвакыт, сезгә кирәк булган камил тигезләү өчен, бәлки, маржа яки паддер ярдәмендә кулланырга кирәк. 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">
    <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>кулланыгыз .<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>

Customәм , әлбәттә, махсус форма контроле ярдәм итә.

<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 ак мәйданны җимереп, аралар һәм флексбокс ярдәмендә тигезләү контролен тәэмин итәргә мөмкинлек бирә .
  • Контроль һәм кертү төркемнәре width: autoBootstrap килешүен кире кагу өчен ала width: 100%.
  • Контрольләр мобиль җайланмалардагы тар күренешләрне исәпкә алу өчен ким дигәндә 576px киңлектәге күренешләрдә күрсәтелә.

Сезгә индивидуаль форма контроллерының киңлеген һәм тигезләнешен кул белән чишәргә кирәк булырга мөмкин ( аста күрсәтелгәнчә). Ниһаять, <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-blockv3 дип аталган). Эчтәлек ярдәме тексты теләсә нинди HTML элементын һәм файдалы классларны кулланып сыгылмалы тормышка ашырылырга мөмкин .text-muted.

Ярдәм текстын форма контроле белән бәйләү

Ярдәм тексты aria-describedbyатрибутны куллану белән бәйле форма контроле белән ачыктан-ачык бәйләнештә булырга тиеш. Бу ярдәмче технологияләр, мәсәлән, экран укучылары - кулланучы контрольгә кергәндә яки кергәндә бу ярдәм текстын игълан итәчәк.

Керү астындагы ярдәм тексты белән ясалырга мөмкин .form-text. Бу класс display: blockөстә кертелгәннәрдән җиңел аралар өчен өстен маржаны кертә һәм өсти.

Сезнең серсүз озынлыгы 8-20 символ булырга тиеш, хәрефләр һәм саннар булырга тиеш, һәм буш урыннар, махсус символлар, эможлар булырга тиеш түгел. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Эчтәлекле текст теләсә нинди типик HTML элементын куллана ала (ул <small>, <span>яисә бүтән нәрсә), файдалы класстан башка бернәрсә дә юк.

Озынлыгы 8-20 символ булырга тиеш. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Инвалид формалар

disabledКулланучының үзара бәйләнешен булдырмас өчен һәм җиңелрәк күренсен өчен кертүгә буле атрибутын өстәгез .

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

Эчтәге барлык контрольне сүндерү өчен disabledатрибутны өстәгез .<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'да тулысынча булышмый. Анкорга нигезләнгән контрольләр әле дә булачак. клавиатура ярдәмендә фокуслы һәм эшләп була. Сез бу контрольләрне кул белән үзгәртергә тиеш tabindex="-1", аларга игътибарны алмас өчен һәм aria-disabled="disabled"ярдәмче технологияләргә үз халәтен сигналлаштырырга.

Браузерның яраклашуы

disabledBootstrap бу стильләрне барлык браузерларда кулланса да, Internet Explorer 11 һәм аннан түбәндә атрибутны тулысынча хупламыйлар <fieldset>. Бу браузерларда кырны сүндерү өчен махсус JavaScript кулланыгыз.

Тикшерү

Кулланучыларга HTML5 формасын тикшерү белән кыйммәтле, эшлекле җавап бирегез - безнең барлык браузерларда бар . Браузерның килешү тикшерүен сайлагыз, яисә безнең класслар һәм JavaScript стартеры белән махсус хәбәрләрне тормышка ашырыгыз.

Без беләбез, хәзерге вакытта клиент ягыннан махсус тикшерү стиле һәм корал киңәшләре мөмкин түгел, чөнки алар ярдәмче технологияләргә тәэсир итмиләр. Чишелеш өстендә эшләгәндә, без сервер ягыннан яисә браузерның килешү ысулын кулланырга киңәш итәрбез.

Керү төркемен тикшерү

Керү төркемнәре, кызганычка каршы, тикшерү стиле белән кыен. Безнең рекомендация - кире элемтә хәбәрләрен булган кардәш элементлар итеп .input-groupурнаштыру .is-{valid|invalid}. Фикер алышу хәбәрләрен кертү төркемнәренә урнаштыру border-radius. Бу эшне карагыз .

Ничек бу эшли

Ботстрап белән форманы тикшерү ничек эшли:

  • HTML формасын тикшерү CSSның ике псевдо-классы аша кулланыла, :invalidһәм :valid. Бу элементларга <input>кагыла .<select><textarea>
  • Ботстрап ата-аналар классына :invalidһәм :validстильләрен киңәйтә, гадәттә . Otherwiseгыйсә, кыйммәтсез теләсә нинди кыр бит йөкләүдә яраксыз булып күрсәтелә. Шул рәвешле, сез аларны кайчан активлаштырырга икәнен сайлый аласыз (гадәттә форма тапшырылганнан соң)..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>. Бу браузерның кире элемтә коралларын сүндерә, ләкин JavaScript'та форманы тикшерү API'ларына рөхсәт бирә. Түбәндәге форманы җибәрергә тырышыгыз; безнең JavaScript тапшыру төймәсен тотып торачак һәм сезгә кире элемтә. Тапшырырга тырышканда, сез форма контроллерында кулланылган стильләрне :invalidһәм стильләрне күрерсез.:valid

Фикер алышуны яхшырак аралашу өчен, махсус стильләр махсус төсләр, чикләр, фокус стильләре һәм фон иконаларын кулланалар. S өчен фон иконалары <select>бары тик мөмкин .custom-select, һәм юк .form-control.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Браузер килешү

Форма тәртибен үзгәртү өчен махсус тикшерү җаваплары яки JavaScript язу белән кызыксынмыйсызмы? Барысы да яхшы, сез браузерның дефолтларын куллана аласыз. Түбәндәге форманы җибәреп карагыз. Сезнең браузерга һәм ОСка карап, сез бераз башка төрле стильне күрерсез.

Бу кире элемтә стильләрен CSS белән ясап булмый, сез барыбер JavaScript аша кире текстны көйли аласыз.

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

Сервер ягы

Без клиент ягыннан тикшерүне кулланырга киңәш итәбез, ләкин сервер ягыннан тикшерүне таләп итсәгез, сез яраксыз һәм дөрес форма кырларын күрсәтә .is-invalidаласыз .is-valid. Игътибар итегез, .invalid-feedbackбу класслар белән дә ярдәм итә.

Яраксыз кырлар өчен, кире кайту / хата хәбәре тиешле форма кыры белән бәйләнгәнлеген тикшерегез aria-describedby. Бу атрибут бердән артык idсылтама ясарга мөмкинлек бирә, кыр инде өстәмә форма текстын күрсәткән очракта.

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

Ярдәмче элементлар

Тикшерү стильләре түбәндәге форма контроле һәм компонентлары өчен бар:

  • <input>s һәм <textarea>s белән.form-control
  • <select>s белән .form-controlяки.custom-select
  • .form-checkс
  • .custom-checkboxs һәм .custom-radios
  • .custom-file
Зинһар, текстка хәбәр кертегез.
Мисал дөрес булмаган кире текст
Күбрәк мисал дөрес булмаган кире текст
Мисал яраксыз сайлау фикерен сайлау
Мисал яраксыз файлга кире кайту
@
Мисал кертү төркеменең кире кайтуы
Мисал кертү төркеменең кире кайтуы
Мисал кертү төркеменең кире кайтуы 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

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

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

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

Кораллар

.{valid|invalid}-feedbackӘгәр дә сезнең форма макеты рөхсәт итсә, сез класслар өчен классларны алыштыра аласыз .{valid|invalid}-tooltip. Кораллар урнаштыру өчен аның белән ата-анагыз булуына инаныгыз position: relative. Түбәндәге мисалда безнең багана класслары инде бар, ләкин сезнең проект альтернатив көйләү таләп итә ала.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-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>

Custзенчәләштерү

Тикшерү халәтләрен Sass аша $form-validation-statesкарта белән көйләргә мөмкин. Безнең _variables.scssфайлда урнашкан, бу Sass картасы килешү valid/ invalidтикшерү халәтләрен булдыру өчен әйләндереп алынган. Eachәрбер дәүләтнең төсен һәм иконасын көйләү өчен ояланган карта кертелгән. Башка штатлар браузерлар белән булышмаса да, махсус стильләр кулланучылар җиңелрәк форма редакциясен өсти алалар.

Зинһар, онытмагыз, без бу кыйммәтләрне миксинны үзгәртмичә көйләргә киңәш итмибез 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));
}

Төркемне тикшерү эше

Без border-radiusселектор чикләүләре аркасында кертелгән төркемнәрнең ватылганын тикшерү белән чишә алмыйбыз, шуңа күрә кул белән өстәмә язулар кирәк. Стандарт кертү төркемен кулланганда һәм чикләнгән радиус кыйммәтләрен көйләмәгәндә .rounded-right, ватылган элементларга өстәгез border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Зинһар, кулланучы исемен сайлагыз.

Кечкенә яки зур кертү төркемен кулланганда яки килешү border-radiusкыйммәтләрен көйләгәндә, бюстка элементка махсус CSS өстәгез border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Зинһар, кулланучы исемен сайлагыз.

Махсус формалар

Тагын да үзләштерү һәм браузерның эзлеклелеге өчен, браузерның дефолтларын алыштыру өчен, безнең махсус форма элементларын кулланыгыз. Алар семантик һәм үтемле билгеләр өстендә төзелгән, шуңа күрә алар теләсә нинди форма контроле өчен нык алмаштыргычлар.

Такталар һәм радио

Customәрбер контроль тартма, радио <input>һәм парлаштыру безнең махсус контроль булдыру <label>өчен төрелгән . <div>Структур яктан, бу безнең килешү белән бер үк караш .form-check.

Без үзебезнең барлык форма күрсәткечләрен дөрес стильләштерү ~өчен, бөтен <input>штатларыбыз өчен кардәш селекторны кулланабыз . :checkedКласс белән берләшкәндә .custom-control-label, без шулай ук ​​һәрбер пункт өчен текстны <input>халәтенә карап ясый алабыз.

Килешүне яшерәбез <input>һәм аның урынына яңа махсус форма индикаторы төзү өчен opacityкулланабыз . Кызганычка каршы, без гадәтне төзи алмыйбыз, чөнки CSS бу элементта эшләми..custom-control-label::before::after<input>content

Тикшерелгән хәлләрдә без ачык иконикадан 64 урнаштырылган SVG иконаларын кулланабыз . Бу безгә браузерлар һәм җайланмалар арасында стилизацияләү һәм урнаштыру өчен иң яхшы контроль тәэмин итә.

Такталар

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

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

Дөрес текст күрсәтелсен өчен сезгә документның телен (яки аның асты) дөрес куярга кирәк. Бу элементтагы атрибутны яки HTTP башламын кулланып ,lang башка ысуллар белән эшләнергә мөмкин .<html>Content-Language

HTML белән сызыкларны тәрҗемә итү яки көйләү

Bootstrap шулай ук ​​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>