Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

Düzen

Form düzeni seçeneklerimizle formlarınıza satır içi ve yataydan özel ızgara uygulamalarına kadar bir yapı kazandırın.

Bu sayfada

Formlar

<form>Her form alanı grubu bir öğede bulunmalıdır . Bootstrap, öğe için varsayılan bir stil sağlamaz <form>, ancak varsayılan olarak sağlanan bazı güçlü tarayıcı özellikleri vardır.

  • Tarayıcı formlarında yeni misiniz? Genel bir bakış ve mevcut özelliklerin tam listesi için MDN form belgelerini incelemeyi düşünün .
  • <button><form>varsayılan olarak içindedir type="submit", bu nedenle spesifik olmaya çalışın ve her zaman bir type.
  • disabledüzerindeki özniteliğe sahip bir formdaki her form öğesini devre dışı bırakabilirsiniz <form>.

Bootstrap display: blockve width: 100%hemen hemen tüm form kontrollerimiz için geçerli olduğundan, formlar varsayılan olarak dikey olarak istiflenir. Bu düzeni form bazında değiştirmek için ek sınıflar kullanılabilir.

Araçlar

Marj araçları , formlara yapı eklemenin en kolay yoludur. Etiketlerin, denetimlerin, isteğe bağlı form metninin ve form doğrulama iletilerinin temel gruplandırmasını sağlarlar. margin-bottomYardımcı programlara bağlı kalmanızı ve tutarlılık için form boyunca tek bir yön kullanmanızı öneririz .

<fieldset>Formlarınızı s, <div>s veya neredeyse başka herhangi bir öğeyle istediğiniz gibi oluşturmaktan çekinmeyin .

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

Form ızgarası

Grid sınıflarımız kullanılarak daha karmaşık formlar oluşturulabilir. Bunları birden çok sütun, çeşitli genişlikler ve ek hizalama seçenekleri gerektiren form düzenleri için kullanın. Sass değişkeninin etkinleştirilmesini gerektirir$enable-grid-classes (varsayılan olarak açıktır).

<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 değiştirici sınıfları ekleyerek , satır içi olarak blok yönü olarak oluk genişliği üzerinde kontrol sahibi olabilirsiniz. Ayrıca $enable-grid-classesSass değişkeninin etkinleştirilmesini gerektirir (varsayılan olarak açık).

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

Izgara sistemi ile daha karmaşık düzenler de oluşturulabilir.

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

yatay form

.rowGrupları oluşturmak için sınıfı ekleyerek ve .col-*-*etiketlerinizin ve denetimlerinizin genişliğini belirtmek için sınıfları kullanarak ızgarayla yatay formlar oluşturun. İlgili form kontrolleriyle dikey olarak ortalanmaları için s'lerinizi de .col-form-labeleklediğinizden emin olun .<label>

Bazen, ihtiyacınız olan mükemmel hizalamayı oluşturmak için kenar boşluğu veya dolgu yardımcı programlarını kullanmanız gerekebilir. Örneğin, padding-topmetin taban çizgisini daha iyi hizalamak için yığılmış radyo girişleri etiketimizi kaldırdık.

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

Yatay form etiket boyutlandırma

ve boyutunu doğru bir şekilde takip etmek için veya .col-form-label-sms veya s'nizi kullandığınızdan emin olun ..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>

Sütun boyutlandırma

Önceki örneklerde gösterildiği gibi, ızgara sistemimiz herhangi bir sayıda .cols'yi bir .row. Mevcut genişliği aralarında eşit olarak bölerler. Ayrıca, daha fazla veya daha az yer kaplamak için sütunlarınızın bir alt kümesini seçebilir, geri kalanlar ise aşağıdaki .colgibi belirli sütun sınıflarıyla geri kalanını eşit olarak böler .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>

Otomatik boyutlandırma

Aşağıdaki örnek, içeriği dikey olarak ortalamak için bir flexbox yardımcı programı kullanır ve sütunlarınız yalnızca gerektiği kadar yer kaplayacak şekilde .coldeğişir . .col-autoBaşka bir deyişle, sütun, içeriğe göre boyutlandırılır.

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

Daha sonra bunu boyuta özel sütun sınıflarıyla yeniden karıştırabilirsiniz.

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

satır içi formlar

.row-cols-*Duyarlı yatay düzenler oluşturmak için sınıfları kullanın . Oluk değiştirici sınıfları ekleyerek yatay ve dikey yönde oluklar elde edeceğiz. Dar mobil görünüm alanlarında, .col-12form kontrollerini ve daha fazlasını yığınlamaya yardımcı olur. Form .align-items-centeröğelerini ortaya .form-checkboxhizalayarak hizalamayı düzgün hale getirir.

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