in English

Пішіндер

Пішіндерді басқару мәнерлеріне, орналасу опцияларына және пішіндердің кең ауқымын жасауға арналған теңшелетін құрамдастарға арналған мысалдар мен пайдалану нұсқаулары.

Шолу

Bootstrap пішін басқару элементтері сыныптары бар Қайта жүктелген пішін мәнерлерінде кеңейтіледі. Браузерлер мен құрылғыларда неғұрлым дәйекті көрсету үшін олардың теңшелген дисплейлеріне қосылу үшін осы сыныптарды пайдаланыңыз.

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

Мұнда Bootstrap пішін мәнерлерін көрсетудің жылдам мысалы берілген. Қажетті сыныптар, пішін орналасуы және т.б. туралы құжаттаманы оқуды жалғастырыңыз.

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

Пішін басқару элементтері

<input>s, <select>s және s сияқты мәтіндік пішінді басқару элементтері сыныппен <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 және s - ішіндегі a <label>-ға қарама-қарсы бауырлас элементтер . Бұл сәл егжей-тегжейлі, өйткені және байланыстыру үшін және атрибуттарын көрсету керек .<input><label>idfor<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-*-*белгілер мен басқару элементтерінің енін көрсету үшін сыныптарды пайдалану арқылы тормен көлденең пішіндерді жасаңыз . Өздерімен байланысты пішінді басқару элементтерімен тігінен орталықтандырылуы үшін s- .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>
Көлденең пішінді жапсырма өлшемі

және өлшемін дұрыс орындау үшін немесе s немесе .col-form-label-sms пайдалануды ұмытпаңыз ..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>

Баған өлшемі

Алдыңғы мысалдарда көрсетілгендей, біздің тор жүйеміз кез келген .cols санын a .rowнемесе ішінде орналастыруға мүмкіндік береді .form-row. Олар қол жетімді енді олардың арасында бірдей бөледі. Сондай-ақ, көп немесе аз орын алу үшін бағандарыңыздың ішкі жиынын таңдай аласыз, ал .colқалғандары қалғанын, сияқты арнайы баған сыныптарымен бірдей бөледі .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Автоматты өлшемдер

Төмендегі мысал мазмұнды тігінен ортаға қою үшін flexbox утилитасын пайдаланады және бағандарыңыз қажетінше көп орын алатындай етіп .colөзгертеді . .col-autoБасқаша айтқанда, бағанның өзі мазмұнға қарай өлшемдейді.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Содан кейін оны өлшемге арнайы баған сыныптарымен қайта араластыруға болады.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Және, әрине, реттелетін пішін басқару элементтеріне қолдау көрсетіледі.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 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Бір көлденең жолда белгілер қатарын, пішінді басқару элементтерін және түймелерді көрсету үшін сыныпты пайдаланыңыз . Кірістірілген пішіндердегі пішін басқару элементтері әдепкі күйлерінен сәл өзгереді.

  • Басқару элементтері кез келген HTML бос кеңістігін қысқартады және интервал және flexbox утилиталары display: flexарқылы теңестіруді басқаруды қамтамасыз етуге мүмкіндік береді .
  • Басқару элементтері мен енгізу топтары width: autoBootstrap әдепкі параметрін қайта анықтау үшін қабылдайды 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-blockv3 нұсқасы ретінде белгілі) көмегімен жасауға болады. Кірістірілген анықтама мәтінін кез келген кірістірілген HTML элементі мен сияқты утилита сыныптары арқылы икемді түрде енгізуге болады .text-muted.

Анықтама мәтінін пішін басқару элементтерімен байланыстыру

aria-describedbyАнықтама мәтіні төлсипатты пайдалануға қатысты пішінді басқару элементімен анық байланысты болуы керек . Бұл көмекші технологиялар (мысалы, экраннан оқу құралдары) пайдаланушы назар аударғанда немесе басқару элементіне кіргенде осы анықтама мәтінін жариялауын қамтамасыз етеді.

Төмендегі анықтама мәтінін енгізулерді мәнерлеуге болады .form-text. Бұл сынып display: blockжоғарыдағы кірістер арасындағы оңай аралық үшін кейбір жоғарғы жиекті қамтиды және қосады.

Құпия сөзіңіздің ұзындығы 8-20 таңбадан тұруы, әріптер мен сандардан тұруы және бос орындар, арнайы таңбалар немесе эмодзилер болмауы керек. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Кірістірілген мәтін кез келген типтік кірістірілген HTML элементін (ол <small>, <span>, немесе басқа нәрсе болсын) қызметтік сыныптан басқа ештеңесі жоқ пайдалана алады.

Ұзындығы 8-20 таңба болуы керек. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Өшірілген пішіндер

disabledПайдаланушы әрекеттестігін болдырмау және оны жеңілірек ету үшін кіріске логикалық төлсипатты қосыңыз .

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

ішіндегі барлық басқару элементтерін өшіру үшін disabledтөлсипатты a мәніне қосыңыз .<fieldset>

Өшірілген өрістер жинағының мысалы 
<form>
  <fieldset disabled>
    <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>
Анкерлермен ескерту

Браузерлер a ішіндегі барлық жергілікті пішін басқару элементтерін ( <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 бастауышымызбен реттелетін хабарларды орындаңыз.

Қазіргі уақытта клиенттік теңшелетін тексеру мәнерлері мен құралдар кеңестері қолжетімді емес екенін білеміз, өйткені олар көмекші технологияларға ұшырамайды. Шешіммен жұмыс істеп жатқанда, сервер жағындағы опцияны немесе әдепкі шолғышты тексеру әдісін пайдалануды ұсынамыз.

Бұл қалай жұмыс істейді

Пішінді тексеру Bootstrap көмегімен қалай жұмыс істейді:

  • HTML пішінінің валидациясы CSS екі псевдосыныбы арқылы қолданылады :invalidжәне :valid. Ол <input>, <select>, және <textarea>элементтеріне қолданылады.
  • Bootstrap әдетте . :invalid_ :valid_ Әйтпесе, мәнсіз кез келген қажетті өріс бет жүктеу кезінде жарамсыз болып көрсетіледі. Осылайша, оларды қашан белсендіру керектігін таңдауға болады (әдетте пішінді жіберу әрекетінен кейін)..was-validated<form>
  • Пішіннің сыртқы түрін қалпына келтіру үшін (мысалы, AJAX көмегімен динамикалық пішінді жіберу жағдайында), жіберілгеннен кейін .was-validatedсыныпты <form>қайтадан алып тастаңыз.
  • Резерв ретінде .is-invalidжәне серверлік тексеру.is-valid үшін псевдосыныптардың орнына сыныптар пайдаланылуы мүмкін . Олар ата- аналық сыныпты қажет етпейді ..was-validated
  • CSS жұмысындағы шектеулерге байланысты біз (қазіргі уақытта) <label>таңдамалы JavaScript көмегінсіз DOM ішіндегі пішін басқару элементінен бұрын келетін мәнерлерді қолдана алмаймыз.
  • Барлық заманауи шолғыштар пішім басқару элементтерін тексеруге арналған JavaScript әдістерінің қатарын, шектеуді тексеру API -ін қолдайды.
  • Кері байланыс хабарлары браузердің әдепкі параметрлерін (әр браузер үшін әр түрлі және CSS арқылы реттелмейтін) немесе қосымша HTML және CSS көмегімен реттелетін кері байланыс мәнерлерін пайдалануы мүмкін.
  • setCustomValidityСіз JavaScript арқылы теңшелетін жарамдылық хабарларын бере аласыз .

Осыны ескере отырып, біздің теңшелетін пішінді тексеру мәнерлеріміз, қосымша серверлік сыныптар және браузердің әдепкі параметрлері үшін келесі демонстрацияларды қарастырыңыз.

Арнайы стильдер

Пайдаланушы Bootstrap пішінін тексеру хабарлары үшін novalidateлогикалық төлсипатты өзіңіздің <form>. Бұл шолғыштың әдепкі кері байланыс кеңестерін өшіреді, бірақ әлі де JavaScript ішіндегі пішінді тексеру API интерфейстеріне қатынасты қамтамасыз етеді. Төмендегі пішінді жіберіп көріңіз; біздің JavaScript жіберу түймесін басып, сізге кері байланыс жібереді. Жіберуге әрекет жасағанда , пішін басқару элементтеріне қолданылатын :invalidжәне мәнерлерді көресіз .:valid

Реттелетін кері байланыс мәнерлері кері байланысты жақсырақ жеткізу үшін реттелетін түстерді, жиектерді, фокус мәнерлерін және фондық белгішелерді қолданады. s үшін фондық белгішелер <select>тек арқылы қол жетімді .custom-select, бірақ жоқ .form-control.

Жақсы көрінеді!
Жақсы көрінеді!
Жарамды қаланы көрсетіңіз.
Жарамды күйді таңдаңыз.
Жарамды zip файлын беріңіз.
Жібермес бұрын келісу керек. 
<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Бұл атрибут өріс қосымша пішін мәтініне нұсқап қойған жағдайда біреуден көп сілтеме жасауға мүмкіндік береді .

Жақсы көрінеді!
Жақсы көрінеді!
Жарамды қаланы көрсетіңіз.
Жарамды күйді таңдаңыз.
Жарамды zip файлын беріңіз.
Жібермес бұрын келісу керек. 
<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. Төмендегі мысалда біздің баған сыныптарымызда бұл бар, бірақ сіздің жобаңыз балама орнатуды қажет етуі мүмкін.

Жақсы көрінеді!
Жақсы көрінеді!
Жарамды қаланы көрсетіңіз.
Жарамды күйді таңдаңыз.
Жарамды 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>

Баптау

$form-validation-statesТексеру күйлерін Sass арқылы картамен теңшеуге болады . Біздің _variables.scssфайлда орналасқан бұл Sass картасы әдепкі valid/ invalidтексеру күйлерін жасау үшін айналдырылған. Әрбір күйдің түсі мен белгішесін теңшеуге арналған кірістірілген карта қосылған. Басқа ешбір күйге браузерлер қолдау көрсетпесе де, реттелетін мәнерлерді пайдаланатындар күрделірек пішін кері байланысын оңай қоса алады.

form-validation-stateБұл мәндерді миксинді өзгертпей теңшеуді ұсынбайтынымызды ескеріңіз.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Енгізу тобын тексеру

Валидациясы бар кіріс тобының ішінде қандай элементтерге дөңгелек бұрыштар қажет екенін анықтау үшін енгізу тобы қосымша .has-validationсыныпты қажет етеді.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Пайдаланушы атын таңдаңыз.

Теңшелетін пішіндер

Одан да көбірек теңшеу және айқас шолғыш үйлесімділігі үшін браузердің әдепкі параметрлерін ауыстыру үшін толығымен реттелетін пішін элементтерін пайдаланыңыз. Олар семантикалық және қол жетімді белгілеудің үстіне құрастырылған, сондықтан олар кез келген әдепкі пішінді басқару үшін берік ауыстыру болып табылады.

Құсбелгілер мен радиолар

Әрбір құсбелгі мен радио <input>және жұптау реттелетін басқаруды жасау үшін <label>a ішіне оралған . <div>Құрылымдық тұрғыдан бұл біздің әдепкі бойынша бірдей тәсіл .form-check.

Біз теңшелетін пішін көрсеткішін дұрыс мәнерлеу ~үшін барлық күйлеріміз үшін ( ) <input>бауыр селекторын қолданамыз . :checkedСыныппен біріктірілгенде .custom-control-label, біз күйіне қарай әрбір элемент үшін мәтінді мәнерлей аламыз <input>.

Біз әдепкі мәнді жасырамыз және оның орнына жаңа теңшелетін пішін көрсеткішін құру үшін және көмегімен <input>пайдаланамыз . Өкінішке орай, біз тек осы элементтен теңшелетін құра алмаймыз, себебі CSS бұл элементте жұмыс істемейді.opacity.custom-control-label::before::after<input>content

Тексерілген күйлерде біз Open Iconic ішінен base64 енгізілген 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>

Пайдаланушы құсбелгілері JavaScript арқылы қолмен орнатылған кезде жалған сыныпты да пайдалана алады :indeterminate(оны көрсету үшін қолжетімді HTML төлсипаты жоқ).

Егер сіз jQuery қолдансаңыз, келесідей нәрсе жеткілікті:

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

Радиолар

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Кезекте

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

Өшірілген

Таңдамалы құсбелгілер мен радиоларды да өшіруге болады. disabledЛогикалық төлсипатты параметрге қосыңыз <input>және теңшелетін индикатор мен белгі сипаттамасы автоматты түрде мәнерленеді.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Коммутаторлар

Коммутаторда реттелетін құсбелгіні белгілеу бар, бірақ .custom-switchауыстырып қосқышты көрсету үшін сыныпты пайдаланады. Коммутаторлар да disabledатрибутты қолдайды.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Мәзірді таңдаңыз

Теңшелетін мәзірлерге теңшелетін стильдерді іске қосу үшін <select>тек теңшелетін сынып қажет . .custom-selectТеңшелетін стильдер бастапқы көрінісімен шектеледі және браузер шектеулеріне байланысты s <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. Соңында, біз қоршаған мазмұн үшін дұрыс аралық үшін a widthжәне heighton деп жариялаймыз.<input>

SCSS көмегімен жолдарды аудару немесе теңшеу

:lang()Псевдокласс « Шолу» мәтінін басқа тілдерге аударуға мүмкіндік беру үшін пайдаланылады. Сәйкес тіл тегі және локализацияланған жолдармен $custom-file-textSass айнымалысына жазбаларды қайта анықтаңыз немесе қосыңыз . Ағылшын жолдарын дәл осылай теңшеуге болады. Мысалы, испанша аударманы қалай қосуға болады (испан тілінің коды ):es

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

Испан тіліндегі аудармаға lang(es)арналған реттелетін файлды енгізу әрекеті:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Дұрыс мәтінді көрсету үшін құжаттың тілін (немесе оның ішкі ағашын) дұрыс орнату керек. Мұны басқа әдістермен қатарlang<html> элементтегі төлсипатты немесе Content-LanguageHTTP тақырыбын пайдалану арқылы жасауға болады.

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>