Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Макет

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

Бул бетте

Формалар

Форма талааларынын ар бир тобу <form>элементте болушу керек. Bootstrap элемент үчүн демейки стилди камсыз кылбайт <form>, бирок демейки боюнча берилген кээ бир күчтүү браузер функциялары бар.

  • Браузердин формаларына жаңыбы? Жеткиликтүү атрибуттардын жалпы тизмеси жана толук тизмеси үчүн MDN формасынын документтерин карап көрүңүз .
  • <button>s <form>демейки чегинде type="submit", андыктан конкреттүү болууга умтулуңуз жана ар дайым бир type.

Bootstrap дээрлик бардык форманы башкаруу элементтерине тиешелүү болгондуктан display: block, width: 100%формалар демейки боюнча вертикалдуу стек болот. Кошумча класстар бул макетти формага жараша өзгөртүү үчүн колдонулушу мүмкүн.

Утилиталар

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

Формаларыңызды каалагандай, <fieldset>s, <div>s же дээрлик башка элементтер менен түзө аласыз.

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

Форма торчосу

Биздин тор класстарыбызды колдонуу менен татаал формаларды түзсө болот. Аларды бир нече мамычаларды, ар кандай тууралыктарды жана кошумча тегиздөө параметрлерин талап кылган форма макеттери үчүн колдонуңуз. Sass өзгөрмөсүн иштетүүнү талап кылат$enable-grid-classes (демейки боюнча күйгүзүлгөн).

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

Арыктар

Аңгыча модификациялоочу класстарды кошуу менен , сиз каналдын кеңдигин, ошондой эле блоктун багыты катары сапта жайгашкан жерди көзөмөлдөй аласыз. Ошондой эле $enable-grid-classesSass өзгөрмөсүн иштетүүнү талап кылат (демейки боюнча күйгүзүлгөн).

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

Тор системасы менен дагы татаал схемаларды түзсө болот.

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

Горизонталдык форма

.rowТопторду түзүү үчүн класс кошуу жана .col-*-*энбелгилериңиздин жана башкаруу элементтериңиздин туурасын көрсөтүү үчүн класстарды колдонуу менен торчо менен горизонталдуу формаларды түзүңүз . .col-form-labelӨзүңүздүн s'иңизге да кошууну унутпаңыз, <label>алар вертикалдуу түрдө борборлоштурулган форманы башкаруу элементтери менен байланышкан.

Кээде сизге керектүү кемчиликсиз тегиздөө үчүн маржа же толтуруучу утилиталарды колдонуу керек болушу мүмкүн. Мисалы, padding-topтексттин базалык сызыгын жакшыраак тегиздөө үчүн биз топтолгон радио киргизүүлөрдөгү энбелгисин алып салдык.

Радиолор
html 
<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>

Горизонталдуу формадагы энбелгилердин өлчөмү

жана өлчөмүн туура аткаруу үчүн .col-form-label-smже колдонуңуз ..col-form-label-lg<label><legend>.form-control-lg.form-control-sm

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

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

Мурунку мисалдарда көрсөтүлгөндөй, биздин тор системабыз сизге каалаган сандагы .cols санын жайгаштырууга мүмкүндүк берет .row. Алар жеткиликтүү туурасын алардын ортосунда бирдей бөлүштүрүшөт. Ошондой эле, сиз аздыр-көптүр мейкиндикти ээлөө үчүн тилкелериңиздин бир бөлүгүн тандап алсаңыз болот, ал эми калгандары калганын .colбирдей бөлөт, мисалы, белгилүү тилке класстары менен .col-sm-7.

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

Автоматтык өлчөм

Төмөнкү мисалда мазмунду вертикалдуу борборлоштуруу үчүн flexbox утилитасы колдонулат жана тилкелериңиз .colкерек .col-autoболгончо мейкиндикти гана ээлей тургандай өзгөрөт. Башкача айтканда, мамычанын өлчөмү мазмунуна жараша болот.

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

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

@
html 
<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 формалар

.row-cols-*Жооптуу горизонталдуу макеттерди түзүү үчүн класстарды колдонуңуз . Аңгыча модификациялоочу класстарды кошуу менен, горизонталдык жана вертикалдык багыттардагы арыктарга ээ болобуз. Тар мобилдик көрүү портторунда .col-12форма башкаруу элементтерин жана башкаларды чогултууга жардам берет. Форма .align-items-centerэлементтерин ортосуна тегиздеп, .form-checkтегиздөөнү туура кылат.

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