Орналасу

Пішіндердің орналасу опцияларымен пішіндеріңізге кейбір құрылымды беріңіз (кіріктірілгеннен көлденеңінен реттелетін торды іске асыруға дейін).

Бұл бетте

Пішіндер

Пішін өрістерінің әрбір тобы <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-*-*белгілер мен басқару элементтерінің енін көрсету үшін сыныптарды пайдалану арқылы тормен көлденең пішіндерді жасаңыз . Өздерімен байланысты пішінді басқару элементтерімен тігінен орталықтандырылуы үшін s- .col-form-labelге де қосуды ұмытпаңыз .<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>

Көлденең пішінді жапсырма өлшемі

және өлшемін дұрыс орындау үшін немесе s немесе .col-form-label-sms пайдалануды ұмытпаңыз ..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 санын a ішінде орналастыруға мүмкіндік береді .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>

Кірістірілген пішіндер

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