განლაგება

მიეცით თქვენს ფორმებს გარკვეული სტრუქტურა — ხაზოვანიდან ჰორიზონტალურამდე და მორგებული ბადის განხორციელებით — ჩვენი ფორმის განლაგების ვარიანტებით.

ამ გვერდზე

ფორმები

ფორმის ველების ყველა ჯგუფი უნდა იყოს <form>ელემენტში. Bootstrap არ უზრუნველყოფს <form>ელემენტის ნაგულისხმევ სტილს, მაგრამ არის ბრაუზერის რამდენიმე ძლიერი ფუნქცია, რომლებიც გათვალისწინებულია ნაგულისხმევად.

ახალი ხართ ბრაუზერის ფორმებში? განიხილეთ MDN ფორმის დოკუმენტების მიმოხილვა და ხელმისაწვდომი ატრიბუტების სრული სია.
<button>s ფარგლებში <form>ნაგულისხმევი to type="submit", ასე რომ შეეცადეთ იყოთ კონკრეტული და ყოველთვის მოიცავს type.
თქვენ შეგიძლიათ გამორთოთ ყველა ფორმის ელემენტი ფორმაში disabledატრიბუტით <form>.

მას შემდეგ, რაც Bootstrap გამოიყენება display: blockდა width: 100%თითქმის ყველა ჩვენი ფორმის კონტროლისთვის, ფორმები ნაგულისხმევად დაწყობილი იქნება ვერტიკალურად. დამატებითი კლასების გამოყენება შესაძლებელია ამ განლაგების ცვალებადობისთვის თითოეული ფორმის საფუძველზე.

კომუნალური მომსახურება

Margin Utilities არის უმარტივესი გზა ფორმებში გარკვეული სტრუქტურის დასამატებლად. ისინი უზრუნველყოფენ ეტიკეტების ძირითად დაჯგუფებას, კონტროლს, ფორმის არჩევით ტექსტს და ფორმის ვალიდაციის შეტყობინებებს. ჩვენ გირჩევთ დაიცვან margin-bottomკომუნალური საშუალებები და გამოიყენოთ ერთი მიმართულება ფორმაში თანმიმდევრულობისთვის.

თავისუფლად შექმენით თქვენი ფორმები ისე, როგორც გსურთ, <fieldset>s, <div>s ან თითქმის ნებისმიერი სხვა ელემენტით.

ლეიბლის მაგალითი

კიდევ ერთი ეტიკეტი

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

ფორმის ბადე

უფრო რთული ფორმების აგება შესაძლებელია ჩვენი ბადის კლასების გამოყენებით. გამოიყენეთ ისინი ფორმის განლაგებისთვის, რომლებიც საჭიროებენ მრავალ სვეტს, განსხვავებულ სიგანეს და გასწორების დამატებით ვარიანტებს. მოითხოვს $enable-grid-classesSass ცვლადის ჩართვას (ნაგულისხმევად ჩართული).

<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 ცვლადის ჩართვას (ნაგულისხმევად ჩართული).

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

უფრო რთული განლაგება ასევე შეიძლება შეიქმნას ბადის სისტემით.

<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თქვენს <label>s-ებსაც, რათა ისინი ვერტიკალურად იყოს ორიენტირებული მათთან ასოცირებულ ფორმებთან.

ხანდახან, შესაძლოა დაგჭირდეთ გამოიყენოთ ზღვრული ან ბალიშის უტილიტები, რათა შექმნათ თქვენთვის სასურველი სრულყოფილი გასწორება. მაგალითად, ჩვენ წავშალეთ padding-topჩვენს დაწყობილ რადიოს შეყვანის ეტიკეტი, რათა უკეთ გავასწოროთ ტექსტის საბაზისო ხაზი.

<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 ან <legend>s სწორად დაიცვას ზომა .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>

სვეტის ზომა

როგორც წინა მაგალითებშია ნაჩვენები, ჩვენი ბადის სისტემა საშუალებას გაძლევთ მოათავსოთ ნებისმიერი რიცხვი .cols-ში .row. ისინი თანაბრად გაყოფენ ხელმისაწვდომ სიგანეს მათ შორის. თქვენ ასევე შეგიძლიათ აირჩიოთ თქვენი სვეტების ქვეჯგუფი, რომ დაიკავოს მეტ-ნაკლებად სივრცე, ხოლო დანარჩენებმა .colთანაბრად გაყოთ დანარჩენი, სვეტების კონკრეტული კლასებით, როგორიცაა .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>

ავტომატური ზომა

ქვემოთ მოყვანილი მაგალითი იყენებს flexbox უტილიტას შიგთავსის ვერტიკალურად ცენტრისთვის და ცვლის .colისე .col-auto, რომ თქვენი სვეტები დაიკავონ მხოლოდ იმდენი სივრცე, რამდენიც საჭიროა. სხვაგვარად რომ ვთქვათ, სვეტი თავად ზომავს შიგთავსს.

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

ამის შემდეგ შეგიძლიათ ხელახლა აურიოთ ეს სვეტის ზომის სპეციფიკური კლასებით.

<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-checkboxსწორად ასწორებს.

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