ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

አቀማመጥ

ከቅጽ አቀማመጥ አማራጮች ጋር - ከመስመር እስከ አግድም እስከ ብጁ ፍርግርግ አተገባበር ድረስ ለቅጾችዎ የተወሰነ መዋቅር ይስጡ።

በዚህ ገጽ ላይ

ቅጾች

እያንዳንዱ የቅጽ መስኮች በአንድ <form>አካል ውስጥ መኖር አለባቸው። Bootstrap ለኤለመንት ምንም ነባሪ የቅጥ አሰራር አይሰጥም <form>፣ ነገር ግን በነባሪነት የቀረቡ አንዳንድ ኃይለኛ የአሳሽ ባህሪያት አሉ።

  • ለአሳሽ ቅጾች አዲስ ነው? የMDN ቅጽ ሰነዶችን ለአጠቃላይ እይታ እና ያሉትን ባህሪዎች ዝርዝር ለመገምገም ያስቡበት ።
  • <button><form>በነባሪነት ውስጥ ነው type="submit"፣ ስለዚህ የተለየ ለመሆን ይሞክሩ እና ሁልጊዜም ሀን ያካትቱ type።
  • disabledበ ላይ ያለውን ባህሪ ባለው ቅጽ ውስጥ ሁሉንም የቅጽ ኤለመንቶችን ማሰናከል ይችላሉ <form>።

Bootstrap ስለሚተገበር display: blockእና width: 100%በሁሉም የቅጽ መቆጣጠሪያዎቻችን ላይ ቅፆች በነባሪነት በአቀባዊ ይደረደራሉ። ተጨማሪ ክፍሎች ይህንን አቀማመጥ በቋሚ ቅፅ ላይ ለመለወጥ ጥቅም ላይ ሊውሉ ይችላሉ.

መገልገያዎች

የኅዳግ መገልገያዎች አንዳንድ መዋቅር ወደ ቅጾች ለመጨመር ቀላሉ መንገድ ናቸው። የመለያዎች፣ የመቆጣጠሪያዎች፣ የአማራጭ ቅጽ ጽሑፍ እና የቅጽ ማረጋገጫ መልእክት መሰረታዊ መቧደን ይሰጣሉ። ከመገልገያዎች ጋር ተጣብቀው እንዲቆዩ እንመክራለን 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>

የቅጽ ፍርግርግ

የፍርግርግ ክፍሎቻችንን በመጠቀም የበለጠ ውስብስብ ቅጾችን መገንባት ይቻላል. እነዚህን ብዙ ዓምዶች፣ የተለያዩ ስፋቶች እና ተጨማሪ የአሰላለፍ አማራጮች ለሚፈልጉ የቅጽ አቀማመጦች ይጠቀሙ። እንዲነቃ የ Sass ተለዋዋጭ ያስፈልገዋል$enable-grid-classes (በነባሪ)።

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

አንዳንድ ጊዜ፣ የሚፈልጉትን ፍጹም አሰላለፍ ለመፍጠር ህዳግ ወይም ንጣፍ መገልገያዎችን መጠቀም ሊኖርብዎ ይችላል። 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 ወይም s መጠቀምዎን ያረጋግጡ ።<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>

የአምድ መጠን

በቀደሙት ምሳሌዎች ላይ እንደሚታየው የእኛ የፍርግርግ ስርዓት ማንኛውንም ቁጥር በ .colውስጥ እንዲያስቀምጡ ያስችልዎታል .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>

ራስ-ሰር መጠን

ከታች ያለው ምሳሌ ይዘቱን በአቀባዊ መሃል ለማድረግ እና አምዶችዎ የሚፈለገውን ያህል ቦታ ብቻ እንዲይዙ ለማድረግ .colየ Flexbox መገልገያ ይጠቀማል። .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>