Source

Формалар

Формаларды башкаруу стилдери, жайгашуу параметрлери жана ар кандай формаларды түзүү үчүн ыңгайлаштырылган компоненттер үчүн мисалдар жана колдонуу көрсөтмөлөрү.

Обзор

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 жана <textarea>s сыяктуу — класс менен стилделет .form-control. Жалпы көрүнүш, фокустун абалы, өлчөмдөрү жана башкалар үчүн стилдер камтылган.

Мындан ары стилди с үчүн биздин ыңгайлаштырылган формаларды изилдөөнү унутпаңыз .<select>

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Файл киргизүү үчүн, .form-controlүчүн алмаштырыңыз .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Өлчөмү

.form-control-lgжана сыяктуу класстарды колдонуу менен бийиктиктерди коюңуз .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

окуу үчүн гана

readonlyКиргизүүнүн маанисин өзгөртүүгө жол бербөө үчүн киргизүүгө логикалык атрибутун кошуңуз . Окуу үчүн гана киргизүүлөр жеңилирээк көрүнөт (өчүрүлгөн киргизүүлөр сыяктуу), бирок стандарттык курсорду сактап калат.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Жөнөкөй текстти окуу

Эгерде сиз <input readonly>формаңызда элементтердин жөнөкөй текст катары стилде болушун кааласаңыз, .form-control-plaintextклассты форма талаасынын демейки стилин алып салуу жана туура четти жана толтурууну сактоо үчүн колдонуңуз.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Диапазон киргизүүлөр

аркылуу горизонталдуу жылдырылуучу диапазон киргизүүлөрдү коюңуз .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Белгилөө кутучалары жана радиолор

Демейки белгилөө кутучалары жана радиолор HTML элементтеринин жайгашуусун жана жүрүм-турумун жакшыртуучу эки киргизүү түрлөрү үчүн бир класстын.form-check жардамы менен жакшыртылды . Белгилөө кутучалары тизмедеги бир же бир нече варианттарды тандоо үчүн, ал эми радиолор көптөрдүн арасынан бир параметрди тандоо үчүн.

Өчүрүлгөн белги кутучалары жана радиолор колдоого алынат. Атрибут disabledкиргизүүнүн абалын көрсөтүүгө жардам берүү үчүн ачык түстү колдонот.

Белгилөө кутучалары жана радио баскычтары HTML негизиндеги форманы текшерүүнү колдойт жана кыска, жеткиликтүү энбелгилерди камсыз кылат. Ошентип, биздин <input>s жана s - ичиндеги <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>

Inline

Белгилөө кутучаларын же радиолорду бир горизонталдуу сапта .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Өзүңүздүн s'иңизге да кошууну унутпаңыз, <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>

Колонна өлчөмү

Мурунку мисалдарда көрсөтүлгөндөй, биздин тор системасы a же .colичинде каалаган сандагы s санын жайгаштырууга мүмкүндүк берет . Алар жеткиликтүү туурасын алардын ортосунда бирдей бөлүштүрүшөт. Ошондой эле, сиз аздыр-көптүр мейкиндикти ээлөө үчүн тилкелериңиздин бир бөлүгүн тандап алсаңыз болот, ал эми калгандары калганын бирдей бөлөт, мисалы, белгилүү тилке класстары менен ..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>

Inline формалар

.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 катары белгилүү) аркылуу түзүлүшү мүмкүн . Inline жардам текстин ийкемдүү түрдө каалаган 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до толук колдоого алынбайт жана клавиатура колдонуучуларынын бул шилтемелерди фокустоого же активдештирүүгө жөндөмдүү. Коопсуз болуу үчүн, мындай шилтемелерди өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.

Браузердик шайкештик

Bootstrap бул стилдерди бардык браузерлерде колдонсо да, Internet Explorer 11 жана андан төмөн disabledверсиялар <fieldset>. Бул браузерлерде талаалар топтомун өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.

Валидация

Колдоого алынган бардык браузерлерибизде жеткиликтүү болгон HTML5 форманын текшерүүсү менен колдонуучуларыңызга баалуу, иш-аракет кылууга жарамдуу пикирлерди бериңиз . Серепчинин демейки текшерүү пикиринен тандаңыз же биздин орнотулган класстарыбыз жана башталгыч JavaScript менен ыңгайлаштырылган билдирүүлөрдү ишке ашырыңыз.

Учурда биз ыңгайлаштырылган текшерүү стилдерин колдонууну сунуштайбыз, анткени түпнуска серепчинин демейки текшерүү билдирүүлөрү бардык браузерлерде (эң негизгиси, иш тактадагы жана мобилдик түзмөктөгү Chrome) жардамчы технологияларга такай туш боло бербейт.

Бул кантип иштейт

Форманы текшерүү Bootstrap менен кантип иштейт:

  • HTML формасынын валидациясы CSSтин эки псевдоклассы :invalidжана :valid. Ал <input>, <select>, жана <textarea>элементтерине тиешелүү.
  • Bootstrap :invalidжана :validстилдерин ата-эне .was-validatedклассына карайт, адатта <form>. Болбосо, мааниси жок бардык талап кылынган талаа баракты жүктөөдө жараксыз катары көрсөтүлөт. Ошентип, сиз аларды качан жандырууну тандай аласыз (адатта форма тапшыруу аракетинен кийин).
  • Форманын көрүнүшүн баштапкы абалга келтирүү үчүн (мисалы, AJAX аркылуу динамикалык форма тапшыруу учурунда), тапшыргандан кийин .was-validatedклассты <form>кайра алып салыңыз.
  • Кайталоо катары .is-invalidжана .is-validкласстар сервер тарабын текшерүү үчүн псевдокласстардын ордуна колдонулушу мүмкүн . .was-validatedАлар ата- энелер классын талап кылбайт .
  • CSSтин иштөөсүндөгү чектөөлөрдөн улам, биз (учурда) <label>ыңгайлаштырылган 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-4 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-4 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 class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" 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Бул класстар менен да колдоого алынаарын эске алыңыз .

Жакшы көрүнөт!
Жакшы көрүнөт!
@
Сураныч, колдонуучу атын тандаңыз.
Жарактуу шаар көрсөтүңүз.
Жарактуу абалды тандаңыз.
Жарактуу zip бериңиз.
Тапшыруудан мурун макул болушуңуз керек. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div 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" 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="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Колдоого алынган элементтер

Текшерүү стилдери төмөнкү форманы башкаруу элементтери жана компоненттери үчүн жеткиликтүү:

  • <input>s жана <textarea>s менен .form-control(анын ичинде .form-controlкиргизүү топторунда бирге чейин)
  • <select>с менен .form-controlже.custom-select
  • .form-checkс
  • .custom-checkboxс жана .custom-radioс
  • .custom-file
Сураныч, текст аймагына билдирүү киргизиңиз.
Мисал жараксыз пикир тексти
Дагы мисал жараксыз пикир тексти
Мисал жараксыз жеке тандоо пикири
Мисал жараксыз жеке файл пикири 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

Кеңештер

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

Жакшы көрүнөт!
Жакшы көрүнөт!
@
Сураныч, уникалдуу жана жарактуу колдонуучу атын тандаңыз.
Жарактуу шаар көрсөтүңүз.
Жарактуу абалды тандаңыз.
Жарактуу zip бериңиз. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ыңгайлаштыруу

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

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

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

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

Ыңгайлаштырылган формалар

Дагы көбүрөөк ыңгайлаштыруу жана кайчылаш серепчи ырааттуулугу үчүн, браузердин демейки жөндөөлөрүн алмаштыруу үчүн биздин толугу менен ыңгайлаштырылган форма элементтерин колдонуңуз. Алар семантикалык жана жеткиликтүү белгилөөнүн үстүнө курулган, ошондуктан алар каалаган демейки форманы башкаруу үчүн бекем алмаштыруучу болуп саналат.

Белгилөө кутучалары жана радиолор

Ар бир белги кутучасы жана радио <input>жана <label>жупташтыруу <div>биздин ыңгайлаштырылган башкарууну түзүү үчүн оролгон. Структуралык жактан алганда, бул биздин демейки ыкма менен бирдей .form-check.

Ыңгайлаштырылган форма көрсөткүчүбүздү туура стилдөө үчүн биз бардык штаттарыбыз ~үчүн бир тууган селекторду ( ) колдонобуз . Класс менен айкалышканда , биз ар бир пункттун абалына жараша тексттин стилин түзө алабыз .<input>:checked.custom-control-label<input>

<input>Биз менен демейкиди жашырабыз жана анын ордуна жана менен жаңы ыңгайлаштырылган форма көрсөткүчүн куруу үчүн opacityколдонобуз . Тилекке каршы, биз жөн гана ыңгайлаштырылганын кура албайбыз, анткени CSS бул элементте иштебейт..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>

Inline

<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Ыңгайлаштырылган стилдер анын баштапкы көрүнүшү менен чектелген жана браузердин чектөөлөрүнөн улам 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. Акыр-аягы, биз курчап турган мазмун үчүн туура аралыкты жарыялоо үчүн widthжана heighton .<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 менен саптарды которуу же өзгөчөлөштүрүү

data-browseBootstrap ошондой эле ыңгайлаштырылган киргизүү энбелгисине кошула турган атрибут менен HTMLдеги "Каралоо" текстин которуунун жолун камсыз кылат (голландчадагы мисал):

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