Зохион байгуулалт

Манай маягтын байршлын сонголтуудын тусламжтайгаар өөрийн маягтдаа доторлогооноос эхлээд хэвтээ, захиалгат сүлжээний хэрэгжилт хүртэл зарим бүтцийг өгөөрэй.

Энэ хуудсан дээр

Маягтууд

Маягтын талбарын бүлэг бүр <form>элемент дотор байх ёстой. Bootstrap нь уг элементийн үндсэн загварчлалыг <form>өгдөггүй боловч анхдагчаар хангагдсан хөтөчийн хүчирхэг функцууд байдаг.

Хөтөч маягтыг шинээр ашиглаж байна уу? Боломжтой шинж чанаруудын тойм болон бүрэн жагсаалтыг авахын тулд MDN маягтын баримт бичгүүдийг шалгаж үзээрэй .
<button>s нь <form>өгөгдмөл -ийн дотор байгаа type="submit"тул тодорхой байхыг хичээж, үргэлж type.

Bootstrap нь манай бараг бүх маягтын удирдлагад хэрэгждэг display: blockтул width: 100%маягтууд нь анхдагчаар босоо байдлаар стек болно. Энэ байрлалыг хэлбэр тус бүрээр нь өөрчлөхийн тулд нэмэлт ангиудыг ашиглаж болно.

Хэрэглээ

Margin хэрэгслүүд нь маягтанд зарим бүтэц нэмэх хамгийн хялбар арга юм. Эдгээр нь шошго, хяналт, нэмэлт хэлбэрийн текст, маягтын баталгаажуулалтын мессежийн үндсэн бүлэглэлийг хангадаг. Тохиромжтой байлгахын тулд бид хэрэгслүүдийг дагаж мөрдөхийг зөвлөж байна 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ашиглан сүлжээгээр хэвтээ маягтуудыг үүсгээрэй . Өөрийн s-г мөн холбогдох маягтын удирдлагатай нь босоо байдлаар төвлөрүүлэхээ .col-*-*мартуузай ..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>

Хэвтээ хэлбэрийн шошгоны хэмжээ

Хэмжээг зөв дагаж мөрдөхийн тулд .col-form-label-smэсвэл .col-form-label-lgөөрийн <label>s эсвэл s- г ашиглахаа мартуузай .<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>

Баганын хэмжээ

Өмнөх жишээнүүдээс харахад манай сүлжээний систем нь .colдотор ямар ч тооны s -г байрлуулах боломжийг олгодог .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>