ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ንድፊ

ቅጥዕታትካ ገለ ኣቃውማ ሃቦም-ካብ ውሽጢ መስመር ክሳብ ኣግማድ ክሳብ ብሕታዊ ሽቦ ኣተገባብርኡ-ብናይ ቅጥዒ ኣቀማምጣ ኣማራጺታትና።

ኣብዚ ገጽ

ቅጥዕታት

<form>ኩሉ ጉጅለ ናይ ቅጥዒ ዓውድታት ኣብ ሓደ ባእታ ክነብር ኣለዎ ። ቡትስትራፕ ነቲ ባእታ ዝኾነ ነባሪ ቅዲ ኣይህብን እዩ <form>፣ ግን ገለ ሓያላት ናይ መርበብ ሓበሬታ ባህርያት ኣለዉ ብነባሪ ዝቐርቡ።

  • ሓድሽ ኣብ ቅጥዕታት መርበብ ሓበሬታ? ንሓፈሻዊ ትዕዝብቲን ምሉእ ዝርዝር ናይቶም ዝርከቡ ባህርያትን ንምርካብ ናይ MDN ቅጥዒ ሰነዳት ምግምጋም ኣብ ግምት ኣእቱ ።
  • <button>s ኣብ ውሽጢ ሓደ <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>

ጐዳጉዲ

By adding gutter modifier classes , ኣብ ልዕሊ ስፍሓት ጓተር ኣብ ከምኡ ውን ኣብ ውሽጢ መስመር ከም ብሎክ ኣንፈት ምቁጽጻር ክህልወካ ይኽእል እዩ። ከምኡ ውን ናይ Sass ተለዋዋጢ ምኽፋት (ብነባሪ ምውላዕ) ይጠልብ ።$enable-grid-classes

<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-*-*ክፍልታት ብምጥቃም ስፍሓት ናይ ስያመታትካን ቁጽጽራትካን ብምግላጽን ምስቲ ሽቦ ኣግማድ ቅጥዕታት ፍጠር። ርግጸኛ ኩን ኣብ s .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ከምቲ ኣብ ዝሓለፉ ኣብነታት ዝተገልጸ፡ ስርዓት ሽቦና ዝኾነ ቁጽሪ s ኣብ ውሽጢ ሓደ ከተቐምጥ የኽእለካ .row። ነቲ ዘሎ ስፍሓት ብማዕረ ኣብ መንጎኦም ክመቕልዎ እዮም። ብተወሳኺ ንኡስ ስብስብ ዓምድታትካ ክትመርጽ ትኽእል ኢኻ ውሑድ ወይ ውሑድ ቦታ ክትወስድ፣ እቶም ዝተረፉ .cols ድማ ነቶም ዝተረፉ ብማዕረ ይመቕሉ፣ ምስ ፍሉያት ዓምድታት ክፍልታት ከም .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-*ክፍልታት ተጠቒምካ ምላሽ ዝህቡ ኣግማድ ኣቀማምጣታት ምፍጣር። By adding gutter modifier classes , ጓተር ብኣግማድን ቀጥታውን ኣንፈት ክህልወና እዩ። ኣብ ጸበብቲ ሞባይል ቪውፖርትስ፡ እቲ .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>