Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Tarreeffama

Unkaalee kee caasaa tokko tokko kenni—sarara keessaa irraa gara qajeelaa hanga hojiirra oolmaa tarjaa amalaatti—filannoowwan qindaa'ina unkaa keenyaan.

Fuula kana irratti

Unkaalee

Gareen man'ee unkaa hunduu <form>elementii tokko keessa jiraachuu qaba. Bootstrap elementiif akkaataa durtii hin kennu <form>, garuu amaloonni biraawzari humna guddaa qaban tokko tokko kanneen durtii kennaman jiru.

  • Unkaalee biraawzari irratti haaraa? Haala waliigalaa fi tarree guutuu amaloota jiraniif galmeewwan unka MDN gamaaggamuu yaadaa .
  • <button>s within a <form>default to type="submit", kanaaf adda ta'uuf carraaqi yeroo hunda a type.

Bootstrap waan hojiirra ooluu display: blockfi width: 100%too'annoo unkaa keenya hunda jechuun ni danda'ama, unkaaleen akka durtiitti vertikaaliin ni tuulamu. Kutaalee dabalataa haalata kana unka tokkoon tokkoon jijjiiruuf fayyadamuun ni danda'ama.

Faayidaa (Utilities) jedhaman

Faayidaaleen margina karaa salphaa caasaa tokko tokko unkaalee irratti dabaluudha. Isaan garee bu'uuraa asxaalee, too'annoowwan, barruu unkaa filannoo, fi ergaa mirkaneessuu unkaa ni kennu. margin-bottomFaayidaa irratti maxxanuu, fi walsimannaadhaaf guutummaa unkaa keessatti kallattii tokko fayyadamuu ni gorsina .

Unkaalee kee akka barbaaddetti ijaaruuf bilisa ta'i , s <fieldset>, <div>s, ykn elementii biraa kamiyyuu jechuun ni danda'ama.

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>

Giriidii unkaa

Unkaalee walxaxaa ta'an gita giiridii keenya fayyadamuun ijaaruun ni danda'ama. Kanneen qindaa'inoota unkaa tarjaawwan hedduu, bal'ina garaa garaa, fi filannoowwan qindaa'ina dabalataa barbaadaniif fayyadami. Jijjiiramaan Sass akka dandeessifamu barbaada$enable-grid-classes (durtiidhaan on).

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>

Guutaa

By adding gutter modifier classes , bal'ina gutter irratti akkasumas sarara keessaa akkasumas kallattii ugguraa irratti to'annoo qabaachuu dandeessa. Akkasumas $enable-grid-classesjijjiiramaan Sass dandeessisuun barbaada (durtiidhaan on).

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>

Haala walxaxaa ta'e sirna giiridii wajjinis uumuun ni danda'ama.

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>

Bifa qajeelaa

Unkaalee qajeeloo tarjaa waliin uumi .rowgita gareewwan unkaa irratti dabaluu fi gita fayyadamuun .col-*-*bal'ina asxaalee fi too'annoowwan kee ifteessuu. .col-form-labelAkkasumas s kee irratti dabaluu kee mirkaneessi akka <label>isaan too'annoo unkaa isaanii wajjin walqabatan waliin giddugaleessa dhaabbataa ta'aniif.

Yeroo tokko tokko, tarii margin ykn padding utilities fayyadamuun walsimsiisa mudaa hin qabne sana si barbaachisu uumuu si barbaachisa ta'a. Fakkeenyaaf, padding-topsarara bu'uuraa barruu haala gaariin qindeessuuf asxaa galtee raadiyoo tuulame keenya irratti haqneerra.

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

Safara asxaa unkaa qajeelaa

Guddina fi sirriitti hordofuuf ykn gara .col-form-label-sms ykn s .col-form-label-lgkeetti fayyadamuu kee mirkaneessi .<label><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>

Safara tarjaa

.colAkkuma fakkeenyota darban irratti mul'ate, sirni giiridii keenyaa lakkoofsa s kamiyyuu a keessa akka kaa'attu si dandeessisa .row. Bal'ina jiru walqixa isaan gidduutti qoodu. Akkasumas tuuta xiqqaa tarjaawwan kee bakka xiqqaa fi guddaa fudhachuuf filachuu dandeessa, yeroo .cols hafe walqixa kan hafe qoodu, gita tarjaa murtaa'aa akka .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>

Ofiin safaruu

Fakkeenyi armaan gadii faayidaa flexbox fayyadama qabiyyee dhaabbataadhaan giddugaleessa gochuu fi .colgara jijjiiramoota akka .col-autotarjaawwan kee bakka hamma barbaachisu qofa fudhatan. Karaa biraatiin yoo ilaalle, tarjaan qabiyyee irratti hundaa'uun of safara.

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

Sana booda sana ammas gita tarjaa hammangaa murtaa'e waliin irra deebi'ii makamuu dandeessa.

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

Unkaalee sarara keessaa

.row-cols-*Haalata qajeelaa deebii kennuu danda'u uumuuf gitaalee fayyadami . By adding gutter modifier classes , gutter kallattii qajeelaa fi dhaabbataa ta'een ni qabaanna. Buufataalee mul'annoo sochootuu dhiphoo irratti, .col-12gargaarsi too'annoo unkaa fi kanneen biroo tuuluuf. The .align-items-centerelementoota unkaa gara giddu galeessaatti qindeessa, .form-checkqindeessuu sirriitti taasisa.

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