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 type
barcha kiritishlarda (masalan, email
elektron 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.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 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 matni
Blok darajasidagi yoki satrdagi shakl matni yordamida yaratilishi mumkin .form-text
.
Shakl matnini forma boshqaruv elementlari bilan bog‘lash
Shakl matni aria-describedby
atributdan 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 shakl matnini e'lon qilishini ta'minlaydi.
Shakl matni ostidagi kirishlar bilan uslublash mumkin .form-text
. Agar blok darajasidagi element ishlatilsa, yuqoridagi kirishlar orasidagi masofani osonlashtirish uchun yuqori chegara qo'shiladi.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
Inline matn har qanday tipik inline HTML elementidan (u <span>
, <small>
, yoki boshqa narsa bo'lsin) .form-text
sinfdan boshqa hech narsa bilan foydalanishi mumkin.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
O'chirilgan shakllar
disabled
Foydalanuvchi 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 disabled
a ga qo'shing . <fieldset>
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-*">...</a>
bo'lsa, ularga faqat uslubi beriladi pointer-events: none
, ya'ni ular hali ham diqqat markazida bo'ladi va klaviatura yordamida ishlaydi. Bunday holda, tabindex="-1"
diqqatni jalb qilishning oldini olish va aria-disabled="disabled"
yordamchi texnologiyalarga ularning holatini bildirish uchun qo'shish orqali ushbu boshqaruv elementlarini qo'lda o'zgartirishingiz kerak.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<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>
Foydalanish imkoniyati
Barcha shakl boshqaruvlari mos keladigan nomga ega ekanligiga ishonch hosil qiling, shunda ularning maqsadi yordamchi texnologiyalar foydalanuvchilariga etkazilishi mumkin. Bunga erishishning eng oddiy usuli - elementdan foydalanish yoki tugmalar bo'lsa - kontentning <label>
bir qismi sifatida etarlicha tavsiflovchi matnni kiritish .<button>...</button>
Ko'rinadigan yoki mos matn tarkibini kiritish imkoni bo'lmagan holatlarda <label>
hali ham mavjud nom berishning muqobil usullari mavjud, masalan:
<label>
.visually-hidden
sinf yordamida yashirin elementlar- Yorliq sifatida ishlay oladigan mavjud elementga ishora qilish
aria-labelledby
title
Atributni taqdim etish- Foydalanadigan elementga kirish mumkin bo'lgan nomni aniq belgilash
aria-label
Agar ulardan hech biri mavjud bo'lmasa, yordamchi texnologiyalar placeholder
atributdan foydalanish mumkin bo'lgan nom <input>
va <textarea>
elementlar uchun zaxira sifatida foydalanishi mumkin. Ushbu bo'limdagi misollar bir nechta tavsiya etilgan, vaziyatga xos yondashuvlarni taqdim etadi.
Vizual ravishda yashirin kontentdan ( .visually-hidden
, aria-label
, va hatto placeholder
shakl maydonida kontent mavjud boʻlgandan keyin yoʻqolib ketadigan kontentdan) foydalanish yordamchi texnologiya foydalanuvchilariga foyda keltirsa-da, koʻrinadigan yorliq matnining yoʻqligi maʼlum foydalanuvchilar uchun hali ham muammoli boʻlishi mumkin. Ko'rinadigan yorliqning ba'zi shakllari, odatda, qulaylik va foydalanish uchun eng yaxshi yondashuvdir.
Sass
Ko'pgina shakl o'zgaruvchilari individual shakl komponentlari tomonidan qayta ishlatilishi va kengaytirilishi uchun umumiy darajada o'rnatiladi. Siz ularni ko'pincha $btn-input-*
va $input-*
o'zgaruvchilar sifatida ko'rasiz.
O'zgaruvchilar
$btn-input-*
o'zgaruvchilar bizning tugmalarimiz va shakl komponentlarimiz o'rtasida umumiy global o'zgaruvchilardir. Siz ularni tez-tez boshqa komponentga xos o'zgaruvchilarga qiymat sifatida qayta tayinlangan holda topasiz.
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-font-family: null;
$input-btn-font-size: $font-size-base;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur: 0;
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-font-size-lg: $font-size-lg;
$input-btn-border-width: $border-width;