Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Tartib

Shakllaringizga qandaydir tuzilma bering - inlinedan gorizontalgacha, maxsus grid ilovalarigacha - bizning shakl joylashtirish variantlarimiz bilan.

Ushbu sahifada

Shakllar

Shakl maydonlarining har bir guruhi <form>elementda joylashishi kerak. Bootstrap element uchun standart uslubni ta'minlamaydi <form>, ammo sukut bo'yicha taqdim etilgan ba'zi kuchli brauzer xususiyatlari mavjud.

  • Brauzer shakllari uchun yangimi? Umumiy koʻrinish va mavjud atributlarning toʻliq roʻyxati uchun MDN formasi hujjatlarini koʻrib chiqishni oʻylab koʻring .
  • <button>s <form>standart ichida type="submit", shuning uchun aniq bo'lishga intiling va har doim a ni o'z ichiga oladi type.
  • disabledSiz atributdagi formadagi har bir shakl elementini o'chirib qo'yishingiz mumkin <form>.

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.

Utilitalar

Margin yordam dasturlari shakllarga ba'zi tuzilmalarni qo'shishning eng oson usuli hisoblanadi. Ular teglarning asosiy guruhlanishini, boshqaruv elementlarini, ixtiyoriy shakl matnini va shaklni tekshirish xabarlarini taqdim etadi. Utilitlarga yopishib olishni margin-bottomva mustahkamlik uchun shakl bo'ylab bitta yo'nalishdan foydalanishni tavsiya qilamiz.

Shakllaringizni <fieldset>s, <div>s yoki deyarli har qanday boshqa element bilan xohlaganingizcha yaratishingiz mumkin.

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

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. Sass o'zgaruvchisini yoqishni talab qiladi$enable-grid-classes (sukut bo'yicha yoqilgan).

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Oluklar

Oluk modifikatorlari sinflarini qo'shish orqali siz truba kengligini, shuningdek, blok yo'nalishini ham boshqarishingiz mumkin. Shuningdek, $enable-grid-classesSass o'zgaruvchisi yoqilgan bo'lishini talab qiladi (sukut bo'yicha yoqilgan).

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Grid tizimi yordamida yanada murakkab sxemalar ham yaratilishi mumkin.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</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="row mb-3">
    <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="row mb-3">
    <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="row mb-3">
    <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>
  </fieldset>
  <div class="row mb-3">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</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

<div class="row mb-3">
  <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="row mb-3">
  <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="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>

Ustun o'lchamlari

.colOldingi misollarda ko'rsatilganidek, bizning grid tizimimiz a ichida istalgan sonni joylashtirish imkonini beradi .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-sm-7.

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

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 class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

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

@ 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Inline shakllar

.row-cols-*Ta'sirchan gorizontal tartiblarni yaratish uchun sinflardan foydalaning . Oluk modifikatorlari sinflarini qo'shish orqali biz gorizontal va vertikal yo'nalishdagi oluklarga ega bo'lamiz. Tor mobil ko'rish oynalarida .col-12bu shakl boshqaruv elementlarini va boshqalarni joylashtirishga yordam beradi. Shakl .align-items-centerelementlarini o'rtasiga tekislaydi va .form-checkboxtekislashni to'g'ri qiladi.

@ 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>