האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

אויסלייג

געבן דיין פארמען עטלעכע סטרוקטור - פֿון ינלינע צו האָריזאָנטאַל צו מנהג גריד ימפּלאַמאַנץ - מיט אונדזער פאָרעם אויסלייג אָפּציעס.

Forms

יעדער גרופּע פון ​​פאָרעם פעלדער זאָל וווינען אין אַ <form>עלעמענט. Bootstrap גיט קיין פעליקייַט סטילינג פֿאַר די <form>עלעמענט, אָבער עס זענען עטלעכע שטאַרק בלעטערער פֿעיִקייטן וואָס זענען צוגעשטעלט דורך פעליקייַט.

  • נייַ צו בלעטערער פארמען? באַטראַכטן ריוויוינג די MDN פאָרעם דאָקומענטן פֿאַר אַן איבערבליק און גאַנץ רשימה פון בנימצא אַטריביוץ.
  • <button>s ין אַ <form>פעליקייַט צו type="submit", אַזוי שטרעבן צו זיין ספּעציפיש און שטענדיק אַרייַננעמען אַ type.

זינט Bootstrap אַפּלייז display: blockאון width: 100%כּמעט אַלע אונדזער פאָרעם קאָנטראָלס, פארמען וועט דורך פעליקייַט אָנלייגן ווערטיקלי. נאָך קלאסן קענען זיין געוויינט צו בייַטן דעם אויסלייג אויף אַ פּער-פאָרעם יקער.

יוטילאַטיז

גרענעץ יוטילאַטיז זענען די יזיאַסט וועג צו לייגן עטלעכע סטרוקטור צו פארמען. זיי צושטעלן יקערדיק גרופּינג פון לאַבעלס, קאָנטראָלס, אַפּשאַנאַל פאָרעם טעקסט און פאָרעם וואַלאַדיישאַן מעסידזשינג. מיר רעקאָמענדירן סטיקינג צו 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>

פאָרעם גריד

מער קאָמפּליצירט פארמען קענען זיין געבויט מיט אונדזער גריד קלאסן. ניצן די פֿאַר פאָרעם לייאַוץ וואָס דאַרפן קייפל שפאלטן, וועריד ווידטס און נאָך אַליינמאַנט אָפּציעס. ריקוויירז די $enable-grid-classesSass בייַטעוודיק צו זיין ענייבאַלד (אויף דורך פעליקייַט).

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-classesסאַסס בייַטעוודיק צו זיין ענייבאַלד (אויף דורך פעליקייַט).

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קלאַס צו פאָרעם גרופּעס און ניצן די .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 אָדער <legend>s צו ריכטיק נאָכגיין די גרייס פון .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>

זייַל סייזינג

ווי געוויזן אין די פריערדיקע ביישפילן, אונדזער גריד סיסטעם אַלאַוז איר צו שטעלן קיין נומער פון .cols אין אַ .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>

אַוטאָ-סייזינג

דער ביישפּיל אונטן ניצט אַ פלעקסבאָקס נוצן צו ווערטיקלי צענטער די אינהאַלט און ענדערונגען .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>

אינלינע פארמען

ניצן די .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>