in English

Shakllar

Shakllarni boshqarish uslublari, tartib variantlari va turli xil shakllarni yaratish uchun moslashtirilgan komponentlar uchun misollar va foydalanish ko'rsatmalari.

Umumiy koʻrinish

Bootstrap forma boshqaruvlari sinflar bilan qayta yuklangan shakl uslublarimizda kengaytiriladi. Brauzerlar va qurilmalarda yanada izchil renderlash uchun moslashtirilgan displeylarga kirish uchun ushbu sinflardan foydalaning.

E-pochtani tekshirish, raqam tanlash va boshqalar kabi yangi kiritish elementlaridan foydalanish uchun typebarcha kiritishlarda (masalan, emailelektron pochta manzili yoki raqamli maʼlumot uchun) tegishli atributdan foydalanganingizga ishonch hosil qiling .number

Bootstrap forma uslublarini namoyish qilish uchun qisqa misol. Kerakli sinflar, shakl tartibi va boshqalar bo'yicha hujjatlarni o'qishni davom eting.

E-pochtangizni hech kim bilan baham ko'rmaymiz. 
<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>

Shakl boshqaruvlari

<input>s, <select>s va s kabi matnli shakl boshqaruvlari sinf <textarea>bilan uslublanadi . .form-controlUmumiy koʻrinish, fokus holati, oʻlcham va boshqalar uchun uslublar kiritilgan.

Keyingi uslublar uchun maxsus shakllarimizni o'rganishni unutmang <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>

Fayl kiritish .form-controluchun ni almashtiring .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>

Hajmi

.form-control-lgva kabi sinflar yordamida balandliklarni o'rnating .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>

Faqat o'qish

readonlyKirish qiymatini o'zgartirishning oldini olish uchun kirishga mantiqiy atributni qo'shing . Faqat o'qish uchun kirishlar engilroq ko'rinadi (xuddi o'chirilgan kirishlar kabi), lekin standart kursorni saqlab qoladi.

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

Faqat o'qish uchun oddiy matn

<input readonly>Shaklingizda elementlarni oddiy matn sifatida yaratishni istasangiz .form-control-plaintext, standart shakl maydoni uslubini olib tashlash va to'g'ri chekka va to'ldirishni saqlash uchun sinfdan foydalaning.

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

Kirish diapazoni

dan foydalanib gorizontal aylantiriladigan diapazonli kirishlarni o'rnating .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>

Belgilash qutilari va radiolar

Standart tasdiqlash qutilari va radiolar HTML elementlarining tartibini va xatti-harakatlarini yaxshilaydigan har ikkala kirish turi .form-checkuchun bitta sinf yordamida yaxshilanadi . Belgilash katakchalari ro'yxatdagi bir yoki bir nechta variantni tanlash uchun, radiolar esa ko'p variantlardan bittasini tanlash uchun.

O'chirilgan tasdiqlash qutilari va radiolar qo'llab-quvvatlanadi. Kirish disabledholatini koʻrsatish uchun atribut ochroq rangni qoʻllaydi.

Tasdiqlash katakchalari va radio tugmalar HTML-ga asoslangan shaklni tekshirishni qo'llab-quvvatlaydi va qisqacha, foydalanish mumkin bo'lgan teglarni beradi. Shunday qilib, bizning <input>s va slar a ichidagidan <label>farqli ravishda birodar elementlardir . Bu biroz batafsilroq, chunki va bilan bog'lanish uchun atributlar va xususiyatlarni belgilashingiz kerak .<input><label>idfor<input><label>

Birlamchi (stacked)

Odatiy bo'lib, bevosita birodar bo'lgan har qanday miqdordagi belgilash katakchalari va radiostantsiyalar vertikal ravishda joylashtiriladi va bilan mos ravishda joylashtiriladi .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>

Mos ravishda

Belgilash katakchalari yoki radiolarni bir xil gorizontal qatorga qo'shish orqali .form-check-inlineguruhlang .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>

Yorliqlarsiz

Yorliq matni bo'lmagan .position-statickirishlarga qo'shing . .form-checkYordamchi texnologiyalar uchun foydalanish mumkin bo'lgan nomni taqdim etishni unutmang (masalan, yordamida 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>

Tartib

Bootstrap deyarli barcha shakl boshqaruvlari uchun qo'llanilganligi sababli display: block, width: 100%shakllar sukut bo'yicha vertikal ravishda to'planadi. Ushbu tartibni har bir shakl asosida o'zgartirish uchun qo'shimcha sinflardan foydalanish mumkin.

Guruhlarni shakllantirish

Sinf .form-group- bu shakllarga ba'zi tuzilmalarni qo'shishning eng oson usuli. Bu teglar, boshqaruv elementlari, ixtiyoriy yordam matni va shaklni tekshirish xabarlarini to'g'ri guruhlashni rag'batlantiradigan moslashuvchan sinfni taqdim etadi. Odatiy bo'lib, u faqat amal qiladi margin-bottom, lekin kerak bo'lganda qo'shimcha uslublarni tanlaydi .form-inline. Uni <fieldset>s, <div>s yoki deyarli har qanday boshqa element bilan ishlating.

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

Shakllar panjarasi

Bizning grid sinflarimiz yordamida yanada murakkab shakllarni qurish mumkin. Bulardan bir nechta ustunlar, turli xil kenglik va qo'shimcha tekislash opsiyalarini talab qiladigan shakl tartiblari uchun foydalaning.

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

Shakl qatori

.rowQattiqroq va ixchamroq sxemalar uchun .form-rowstandart ustunli oluklarni bekor qiluvchi standart panjara qatorimiz bilan ham almashtirishingiz mumkin .

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

Grid tizimi yordamida yanada murakkab sxemalar ham yaratilishi mumkin.

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

Gorizontal shakl

.rowGuruhlarni shakllantirish uchun sinf qo'shish va .col-*-*teglar va boshqaruv elementlarining kengligini belgilash uchun sinflardan foydalanish orqali panjara bilan gorizontal shakllar yarating . s-ga ham qo'shishni unutmang, .col-form-labelshunda <label>ular o'zlarining bog'langan shakl boshqaruvlari bilan vertikal markazlashtiriladi.

Ba'zida sizga kerakli moslikni yaratish uchun chekka yoki to'ldirish yordam dasturlaridan foydalanishingiz kerak bo'ladi. Misol uchun, padding-topmatnning asosiy chizig'ini yaxshiroq tekislash uchun biz o'rnatilgan radio kirishlar yorlig'ini olib tashladik.

Radiolar 
<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>
Gorizontal shakldagi yorliq o'lchamlari

va oʻlchamiga toʻgʻri amal qilish uchun s yoki .col-form-label-smto dan foydalaning ..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>

Ustun o'lchamlari

.colOldingi misollarda ko'rsatilganidek, bizning to'r tizimimiz a .rowyoki ichida istalgan sonni joylashtirish imkonini beradi .form-row. Ular mavjud kenglikni o'zaro teng taqsimlaydilar. Ko'proq yoki kamroq joy egallash uchun siz ustunlaringizning bir qismini tanlashingiz mumkin, .colqolganlari esa qolganlarini, masalan, maxsus ustun sinflari bilan teng taqsimlaydi .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>

Avtomatik o'lcham

Quyidagi misolda tarkibni vertikal markazlashtirish uchun flexbox yordam dasturidan foydalaniladi va ustunlaringiz faqat kerak bo'lganda ko'proq joy egallashi uchun .colo'zgartiriladi . .col-autoBoshqacha qilib aytadigan bo'lsak, ustunning o'lchamlari tarkibga qarab belgilanadi.

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

Keyin uni o'lchamga xos ustun sinflari bilan yana bir bor remiks qilishingiz mumkin.

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

Va, albatta, maxsus shakl boshqaruvlari qo'llab-quvvatlanadi.

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

.form-inlineBir qator yorliqlar, shakl boshqaruvlari va tugmalarni bitta gorizontal qatorda ko'rsatish uchun sinfdan foydalaning . Inline shakllardagi shakl boshqaruvlari standart holatidan biroz farq qiladi.

  • Boshqaruv elementlari har qanday HTML bo'sh joyini yopadi va sizga oraliq va flexboxdisplay: flex yordam dasturlari yordamida tekislashni boshqarishni ta'minlash imkonini beradi .
  • width: autoBootstrap standartini bekor qilish uchun boshqaruv elementlari va kiritish guruhlari qabul qilinadi width: 100%.
  • Boshqaruv elementlari faqat mobil qurilmalardagi tor ko‘rish oynalarini hisobga olish uchun kengligi kamida 576px bo‘lgan ko‘rish oynalarida inline ko‘rinadi .

Shaklning individual boshqaruv elementlarining kengligi va hizalanishini oraliq yordamchi dasturlar bilan qo'lda hal qilishingiz kerak bo'lishi mumkin (quyida ko'rsatilganidek). Nihoyat, <label>har bir shakl boshqaruviga, hatto ekranni o'qimaydigan tashrif buyuruvchilardan yashirishingiz kerak bo'lsa ham, har doim qo'shishni unutmang .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>

Maxsus shakl boshqaruvlari va tanlovlari ham qo'llab-quvvatlanadi.

<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>
Yashirin teglarga alternativalar

Har bir kiritish uchun yorliq qo'shmasangiz, ekranni o'qiydiganlar kabi yordamchi texnologiyalar shakllaringiz bilan bog'liq muammolarga duch keladi. Ushbu inline shakllar uchun siz .sr-onlysinfdan foydalanib teglarni yashirishingiz mumkin. Yordamchi texnologiyalar uchun yorliqni taqdim etishning boshqa muqobil usullari mavjud, masalan, aria-label, aria-labelledbyyoki titleatribut. Agar ulardan hech biri mavjud bo'lmasa, yordamchi texnologiyalar placeholder, agar mavjud bo'lsa, atributdan foydalanishga murojaat qilishi mumkin, ammo placeholderyorliqlashning boshqa usullarini almashtirish sifatida foydalanish tavsiya etilmaydi.

Yordam matni

Shakllardagi blok darajasidagi yordam matni yordamida yaratilishi mumkin .form-text(ilgari .help-blockv3 da bo'lgani kabi). Inline yordam matni har qanday inline HTML elementi va kabi yordamchi dastur sinflari yordamida moslashuvchan tarzda amalga oshirilishi mumkin .text-muted.

Yordam matnini forma boshqaruvlari bilan bog‘lash

Yordam matni aria-describedbyatributdan foydalanish bilan bog'liq bo'lgan shakl boshqaruvi bilan aniq bog'langan bo'lishi kerak. Bu foydalanuvchi diqqatini qaratganda yoki boshqaruvga kirganida yordamchi texnologiyalar (masalan, ekranni o'qiydiganlar) ushbu yordam matnini e'lon qilishini ta'minlaydi.

Yordam matni ostidagi kirishlar bilan uslublash mumkin .form-text. Ushbu sinf display: blockyuqoridagi kirishlar orasidagi masofani oson ajratish uchun yuqori chegarani o'z ichiga oladi va qo'shadi.

Parolingiz uzunligi 8-20 belgidan iborat boʻlishi, harflar va raqamlardan iborat boʻlishi hamda boʻshliqlar, maxsus belgilar yoki kulgichlardan iborat boʻlmasligi kerak. 
<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>

Inline matn har qanday oddiy inline HTML elementidan (u <small>, <span>, yoki boshqa narsa bo'lsin) faqat yordamchi dastur sinfidan foydalanishi mumkin.

8-20 belgidan iborat boʻlishi kerak. 
<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>

O'chirilgan shakllar

disabledFoydalanuvchi oʻzaro taʼsirini oldini olish va uni engilroq koʻrsatish uchun kirishga mantiqiy atributni qoʻshing .

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

Barcha boshqaruv elementlarini o'chirish uchun atributni disableda ga qo'shing .<fieldset>

O'chirilgan maydonlar to'plamiga misol 
<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>
Ankrajlar bilan ogohlantirish

Brauzerlar a ichidagi barcha mahalliy shakl boshqaruv elementlarini ( <input>, <select>, va <button>elementlarni) <fieldset disabled>o'chirib qo'yib, ulardagi klaviatura va sichqonchaning o'zaro ta'sirini oldini oladi.

Biroq, agar formangizda tugmachaga o'xshash maxsus elementlar mavjud <a ... class="btn btn-*">bo'lsa, ularga faqat uslubi beriladi pointer-events: none. Tugmalar uchun o'chirilgan holat (va ayniqsa, langar elementlari uchun kichik bo'limda) bo'limida ta'kidlanganidek , bu CSS xususiyati hali standartlashtirilmagan va Internet Explorer 10 da to'liq qo'llab-quvvatlanmaydi. Anchorga asoslangan boshqaruv elementlari ham shunday bo'lib qoladi. diqqat markazida bo'lishi va klaviatura yordamida ishlashi mumkin. Bu boshqaruv elementlarini tabindex="-1"diqqatni jalb qilishning oldini olish va aria-disabled="disabled"yordamchi texnologiyalarga signal berish uchun qo‘shish orqali ularni qo‘lda o‘zgartirishingiz kerak.

Brauzerlar o'rtasidagi muvofiqlik

disabledBootstrap bu uslublarni barcha brauzerlarda qo‘llasa-da, Internet Explorer 11 va undan past versiyalari <fieldset>. Ushbu brauzerlarda maydonlar to'plamini o'chirish uchun maxsus JavaScript-dan foydalaning.

Tasdiqlash

Barcha qo‘llab-quvvatlanadigan brauzerlarimizda mavjud bo‘lgan HTML5 shakl tekshiruvi yordamida foydalanuvchilarga qimmatli, amaliy fikr-mulohazalarni taqdim eting . Brauzerning standart tekshiruvi bo‘yicha fikr-mulohazalarni tanlang yoki o‘rnatilgan sinflarimiz va boshlang‘ich JavaScript-ni ishlatib, maxsus xabarlarni amalga oshiring.

Biz bilamizki, hozirda mijoz tomonidan tekshirishning maxsus uslublari va asboblar maslahatlari mavjud emas, chunki ular yordamchi texnologiyalarga ta'sir qilmaydi. Yechim ustida ishlayotganimizda, server tomoni opsiyasi yoki standart brauzerni tekshirish usulidan foydalanishni tavsiya qilamiz.

U qanday ishlaydi

Formani tekshirish Bootstrap bilan qanday ishlaydi:

  • HTML shaklini tekshirish CSS ning ikkita psevdo-sinfi orqali qo'llaniladi :invalidva :valid. U <input>, <select>, va <textarea>elementlari uchun amal qiladi.
  • Bootstrap :invalidva :validuslublarini ota- .was-validatedklassga qamrab oladi, odatda <form>. Aks holda, qiymatsiz istalgan kerakli maydon sahifa yuklanishida yaroqsiz deb ko'rsatiladi. Shunday qilib, siz ularni qachon faollashtirishni tanlashingiz mumkin (odatda ariza yuborishga urinishdan keyin).
  • Shaklning ko'rinishini tiklash uchun (masalan, AJAX yordamida dinamik shakllar yuborilganda), topshirilgandan so'ng .was-validatedsinfni <form>qaytadan olib tashlang.
  • Qayta tiklash sifatida .is-invalidva server tomonini tekshirish.is-valid uchun psevdo-sinflar o'rniga sinflar ishlatilishi mumkin . Ular ota-ona sinfini talab qilmaydi ..was-validated
  • CSS-ning ishlashidagi cheklovlar tufayli biz (hozirda) <label>DOM-dagi forma boshqaruvidan oldin kelgan uslublarni maxsus JavaScript-dan foydalanmasdan qo'llay olmaymiz.
  • Barcha zamonaviy brauzerlar cheklovni tekshirish API ni, shakl boshqaruvlarini tekshirish uchun JavaScript usullari qatorini qo'llab-quvvatlaydi.
  • Fikr-mulohaza xabarlari brauzerning standart sozlamalaridan (har bir brauzer uchun har xil va CSS orqali beqaror) yoki qo‘shimcha HTML va CSS bilan maxsus fikr-mulohaza uslublarimizdan foydalanishi mumkin.
  • setCustomValiditySiz JavaScript-da maxsus haqiqiylik xabarlarini taqdim etishingiz mumkin .

Shuni yodda tutgan holda, bizning shaxsiy shaklni tekshirish uslublarimiz, ixtiyoriy server tomoni sinflari va brauzerning standart sozlamalari uchun quyidagi demolarni ko'rib chiqing.

Maxsus uslublar

Maxsus Bootstrap formasini tekshirish xabarlari uchun novalidateboolean atributini <form>. Bu brauzerning birlamchi fikr-mulohazalarini bildirish bo‘yicha maslahatlarini o‘chirib qo‘yadi, lekin shunga qaramay JavaScript-da shaklni tekshirish API-lariga kirish imkonini beradi. Quyidagi shaklni topshirishga harakat qiling; bizning JavaScript jo'natish tugmachasini to'xtatadi va sizga fikr-mulohazalarni yuboradi. Yuborishga urinayotganda siz shakl boshqaruv elementlariga qo‘llanilgan :invalidva uslublarni ko‘rasiz .:valid

Maxsus fikr-mulohaza uslublari fikr-mulohazalarni yaxshiroq etkazish uchun maxsus ranglar, chegaralar, fokus uslublari va fon piktogrammalarini qo'llaydi. s uchun fon piktogrammalari <select>faqat mavjud .custom-selectva mavjud emas .form-control.

Yaxshi ko'rinadi!
Yaxshi ko'rinadi!
Yaroqli shaharni kiriting.
Yaroqli holatni tanlang.
Iltimos, yaroqli zip kiriting.
Yuborishdan oldin rozi bo'lishingiz kerak. 
<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>

Brauzerning standart sozlamalari

Shakl xatti-harakatlarini o'zgartirish uchun maxsus tekshirish bo'yicha fikr-mulohaza xabarlari yoki JavaScript yozish qiziq emasmi? Hammasi yaxshi, siz brauzerning standart sozlamalaridan foydalanishingiz mumkin. Quyidagi shaklni topshirishga harakat qiling. Brauzeringiz va operatsion tizimingizga qarab, siz bir oz boshqacha fikr-mulohazalarni ko'rasiz.

Ushbu fikr-mulohaza uslublarini CSS bilan shakllantirish mumkin bo'lmasa-da, siz hali ham JavaScript orqali fikr-mulohaza matnini sozlashingiz mumkin.

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

Server tomoni

Mijoz tomonidan tekshirishdan foydalanishni tavsiya qilamiz, lekin agar sizga server tomoni tekshiruvi kerak bo'lsa, yaroqsiz va yaroqsiz shakl maydonlarini va bilan ko'rsatishingiz .is-invalidmumkin .is-valid. E'tibor bering, .invalid-feedbackushbu sinflar ham qo'llab-quvvatlanadi.

Yaroqsiz maydonlar uchun noto'g'ri fikr-mulohaza/xato xabari tegishli shakl maydoni bilan bog'langanligiga ishonch hosil qiling aria-describedby. idBu atribut , agar maydon allaqachon qo'shimcha shakl matniga ishora qilsa, bir nechta havola qilish imkonini beradi .

Yaxshi ko'rinadi!
Yaxshi ko'rinadi!
Yaroqli shaharni kiriting.
Yaroqli holatni tanlang.
Iltimos, yaroqli zip kiriting.
Yuborishdan oldin rozi bo'lishingiz kerak. 
<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>

Qo'llab-quvvatlanadigan elementlar

Tasdiqlash uslublari quyidagi shakl boshqaruvlari va komponentlari uchun mavjud:

  • <input>s va <textarea>s bilan.form-control
  • <select>s .form-controlyoki bilan.custom-select
  • .form-checks
  • .custom-checkboxs va .custom-radios
  • .custom-file
Iltimos, matn maydoniga xabar kiriting.
Yaroqsiz fikr-mulohaza matniga misol
Boshqa misol noto‘g‘ri fikr-mulohaza matni
Misol uchun yaroqsiz maxsus tanlov fikr-mulohazasi
Misol uchun noto'g'ri maxsus fayl fikr-mulohazasi
@
Misol uchun noto‘g‘ri kiritish guruhi
Misol uchun noto‘g‘ri kiritish guruhi
Misol uchun noto‘g‘ri kiritish guruhi 
<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>

Maslahat

Agar formangizning joylashuvi bunga imkon bersa , uslublar bo'yicha maslahatchida tekshirish bo'yicha fikr-mulohazalarni ko'rsatish .{valid|invalid}-feedbackuchun sinflarni sinflarga almashtirishingiz mumkin . Uskunani joylashtirish uchun uning yonida .{valid|invalid}-tooltipota-onangiz borligiga ishonch hosil qiling . position: relativeQuyidagi misolda, bizning ustun sinflarimizda bu allaqachon mavjud, ammo loyihangiz muqobil sozlashni talab qilishi mumkin.

Yaxshi ko'rinadi!
Yaxshi ko'rinadi!
Yaroqli shaharni kiriting.
Yaroqli holatni tanlang.
Iltimos, yaroqli zip kiriting. 
<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>

Moslashtirish

$form-validation-statesTasdiqlash holatlari xarita bilan Sass orqali sozlanishi mumkin . Bizning faylimizda joylashgan _variables.scssushbu Sass xaritasi standart valid/ invalidtasdiqlash holatlarini yaratish uchun aylantirilgan. Har bir shtatning rangi va belgisini sozlash uchun ichki xarita kiritilgan. Boshqa hech qanday shtat brauzerlar tomonidan qo'llab-quvvatlanmasa-da, maxsus uslublardan foydalanadiganlar osonlikcha murakkabroq shakldagi fikr-mulohazalarni qo'shishlari mumkin.

Shuni yodda tutingki, biz ushbu qiymatlarni form-validation-statemiksinni o'zgartirmasdan sozlashni tavsiya etmaymiz.

// 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));
}

Kirish guruhini tekshirish

Tekshirish bilan kirish guruhi ichida qaysi elementlarga yumaloq burchaklar kerakligini aniqlash uchun kirish guruhi qo'shimcha .has-validationsinfni talab qiladi.

<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>
@
Iltimos, foydalanuvchi nomini tanlang.

Maxsus shakllar

Ko'proq moslashtirish va o'zaro brauzer izchilligi uchun brauzerning standart sozlamalarini almashtirish uchun bizning to'liq moslashtirilgan shakl elementlaridan foydalaning. Ular semantik va foydalanish mumkin bo'lgan belgilar ustiga qurilgan, shuning uchun ular har qanday standart shakl boshqaruvi uchun mustahkam o'rinbosar hisoblanadi.

Belgilash qutilari va radiolar

Har bir tasdiqlash qutisi va radio <input>va juftlashtirish bizning shaxsiy boshqaruvimizni yaratish uchun <label>a ichiga o'ralgan . <div>Strukturaviy jihatdan, bu bizning standartimiz bilan bir xil yondashuv .form-check.

Biz barcha shtatlarimiz uchun aka-uka selektoridan ( ~) foydalanamiz, masalan , shaxsiy shakl ko'rsatkichimizni to'g'ri uslublash uchun. Sinf bilan birlashganda , biz har bir element uchun matnni holatiga qarab uslublashimiz mumkin.<input>:checked.custom-control-label<input>

Biz standartni yashiramiz va uning oʻrniga va <input>bilan yangi maxsus shakl koʻrsatkichini yaratish uchun opacityfoydalanamiz . Afsuski, biz faqat undan moslashtirilganini yarata olmaymiz, chunki CSS bu elementda ishlamaydi..custom-control-label::before::after<input>content

Belgilangan holatlarda biz Open Iconic -dan base64 o'rnatilgan SVG piktogrammalaridan foydalanamiz . Bu bizga brauzerlar va qurilmalarda uslublar va joylashishni aniqlash uchun eng yaxshi boshqaruvni ta'minlaydi.

Belgilash katakchalari

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

Maxsus belgilash katakchalari :indeterminateJavaScript orqali qo'lda o'rnatilganda psevdo sinfdan ham foydalanishi mumkin (uni belgilash uchun mavjud HTML atributi mavjud emas).

Agar siz jQuery dan foydalanayotgan bo'lsangiz, shunga o'xshash narsa kifoya qiladi:

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

Radiolar

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

Mos ravishda

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

O'chirilgan

Maxsus belgilash katakchalari va radiolar ham o'chirib qo'yilishi mumkin. disabledga mantiqiy atributni qo'shing <input>va maxsus indikator va yorliq tavsifi avtomatik tarzda stilize qilinadi.

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

Kalitlar

Kommutatorda maxsus belgilash katagiga belgi qo'yilgan, biroq .custom-switcho'tish tugmachasini ko'rsatish uchun sinfdan foydalanadi. Kalitlar ham atributni qo'llab-quvvatlaydi 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>

Menyuni tanlang

Maxsus menyularga maxsus uslublarni ishga tushirish uchun <select>faqat maxsus sinf kerak bo'ladi . .custom-selectMaxsus uslublar ning dastlabki koʻrinishi bilan chegaralanadi va brauzer cheklovlari tufayli s ni <select>oʻzgartira olmaydi .<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>

Xuddi shunday o'lchamdagi matn kiritishlarimizga mos keladigan kichik va katta moslashtirilgan tanlovlardan ham tanlashingiz mumkin.

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

The multiple attribute is also supported:

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

As is the size attribute:

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

Range

Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

File browser

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings with SCSS

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

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

Here’s lang(es) in action on the custom file input for a Spanish translation:

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

To'g'ri matn ko'rsatilishi uchun hujjatingiz tilini (yoki uning pastki daraxtini) to'g'ri belgilashingiz kerak bo'ladi. Buni elementdagi atribut yoki boshqa usullar qatori HTTP sarlavhasi yordamida amalga oshirish mumkin .lang<html>Content-Language

HTML bilan satrlarni tarjima qilish yoki sozlash

Bootstrap, shuningdek, HTML-dagi "Browse" matnini data-browsemaxsus kiritish yorlig'iga qo'shilishi mumkin bo'lgan atribut bilan tarjima qilish usulini taqdim etadi (Golland tilidagi misol):

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