Source

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

Agar siz <input readonly>formangizda oddiy matn sifatida yaratilgan elementlarga ega bo'lishni 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 belgilash katakchalari va radiolar HTML elementlarining tartibini va xatti-harakatlarini yaxshilaydigan 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 yorliqning qandaydir shaklini taqdim etishni unutmang (masalan, dan foydalanish 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
Belgilash katagi 
<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>
Gorizontal shakl yorlig'i o'lchami

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

<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>
Ankrajlar bilan ogohlantirish

Odatiy bo'lib, brauzerlar a ichidagi barcha mahalliy shakl boshqaruvlarini ( <input>, <select>va <button>elementlarni) <fieldset disabled>o'chirib qo'yib, ulardagi klaviatura va sichqonchaning o'zaro ta'sirini oldini oladi. Biroq, agar sizning shaklingiz <a ... class="btn btn-*">elementlarni o'z ichiga olsa, ularga faqat uslub beriladi pointer-events: none. Tugmalarning o'chirilgan holati (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 va klaviatura foydalanuvchilariga to'sqinlik qilmaydi. diqqatni jamlash yoki ushbu havolalarni faollashtirish mumkin. Xavfsiz bo'lish uchun bunday havolalarni o'chirish uchun maxsus JavaScript-dan foydalaning.

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.

Hozirda biz moslashtirilgan tekshirish uslublaridan foydalanishni tavsiya qilamiz, chunki mahalliy brauzerning standart tekshiruvi xabarlari barcha brauzerlarda (asosan, ish stoli va mobil qurilmalarda Chrome) doimiy ravishda yordamchi texnologiyalardan foydalanmaydi.

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 talab qilmaydi.was-validatedUlar ota-ona sinfini
  • CSS qanday ishlashidagi cheklovlar tufayli biz (hozirda) DOMda <label>forma boshqaruvidan oldin kelgan uslublarni maxsus JavaScript yordamisiz 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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-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>

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

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.

Yaxshi ko'rinadi!
Yaxshi ko'rinadi!
@
Iltimos, foydalanuvchi nomini tanlang.
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-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>

Qo'llab-quvvatlanadigan elementlar

Tasdiqlash uslublari quyidagi shakl boshqaruvlari va komponentlari uchun mavjud:

  • <input>s va <textarea>s bilan .form-control(shu jumladan .form-controlkirish guruhlarida bittagacha)
  • <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
Masalan, noto'g'ri maxsus fayl fikr-mulohazasi 
<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>

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.

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

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

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

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>

Atribut multipleham qo'llab-quvvatlanadi:

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

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

Diapazon

<input type="range">bilan maxsus boshqaruv elementlarini yarating .custom-range. Trek (fon) va bosh barmog'i (qiymat) ikkalasi ham brauzerlarda bir xil ko'rinishi uchun yaratilgan. Faqat IE va Firefox o'z treklarini bosh barmog'ining chap yoki o'ng qismidan "to'ldirishni" qo'llab-quvvatlaydi, chunki taraqqiyotni vizual ravishda ko'rsatish vositasi sifatida biz buni hozircha qo'llab-quvvatlamaymiz.

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

minDiapazondagi kirishlar mos ravishda va max- 0va uchun yashirin qiymatlarga ega 100. minSiz va maxatributlaridan foydalanadiganlar uchun yangi qiymatlarni belgilashingiz mumkin .

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

Odatiy bo'lib, diapazon butun son qiymatlariga "snap" kiritadi. Buni o'zgartirish uchun siz stepqiymatni belgilashingiz mumkin. Quyidagi misolda biz yordamida qadamlar sonini ikki baravar oshiramiz step="0.5".

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

Fayl brauzeri

Maxsus fayl kiritishni jonlantirish uchun tavsiya etilgan plagin: bs-custom-file-input , biz hozirda hujjatlarimizda aynan shu plagindan foydalanmoqdamiz.

Fayl kiritish - bu guruhning eng jirkanch usuli va agar siz ularni " Faylni tanlash " funksiyasi va tanlangan fayl nomi matni bilan bog'lashni istasangiz, qo'shimcha JavaScript-ni talab qiladi .

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

Biz standart faylni <input>orqali yashiramiz opacityva o'rniga <label>. Tugma hosil bo'ladi va bilan joylashtiriladi ::after. Nihoyat, biz atrofdagi kontent uchun to'g'ri bo'sh joy uchun a widthva heightustiga e'lon qilamiz.<input>

SCSS yordamida satrlarni tarjima qilish yoki sozlash

Pseudo :lang()-sinf "Browse" matnini boshqa tillarga tarjima qilish uchun ishlatiladi. Tegishli til yorlig'i va mahalliylashtirilgan satrlar $custom-file-textbilan Sass o'zgaruvchisiga yozuvlarni bekor qiling yoki qo'shing . Ingliz tilidagi satrlar xuddi shu tarzda sozlanishi mumkin. Misol uchun, ispancha tarjimani qanday qo'shish mumkin (ispan tili kodi ):es

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

Ispan lang(es)tiliga tarjima qilish uchun maxsus fayl kiritish bo‘yicha amalda:

<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. Bu elementdagi atribut yoki HTTP sarlavhasi yordamida ,lang boshqa usullar qatorida amalga oshirilishi mumkin .<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 ham 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>