Source

Forms

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

איבערבליק

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

זייט זיכער צו נוצן אַ צונעמען typeאַטריביוט אויף אַלע ינפּוץ (למשל, emailפֿאַר בליצפּאָסט אַדרעס אָדער numberנומעריקאַל אינפֿאָרמאַציע) צו נוצן נייַער אַרייַנשרייַב קאָנטראָלס ווי E- בריוו וועראַפאַקיישאַן, נומער סעלעקציע, און מער.

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

מיר וועלן קיינמאָל טיילן דיין בליצפּאָסט מיט ווער עס יז אַנדערש.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

פאָרעם קאָנטראָלס

טעקסטואַל פאָרעם קאָנטראָלס - ווי <input>s, <select>s און <textarea>s - זענען סטיילד מיט די .form-controlקלאַס. אַרייַנגערעכנט סטיילז פֿאַר אַלגעמיין אויסזען, פאָקוס שטאַט, סייזינג, און מער.

זייט זיכער צו ויספאָרשן אונדזער מנהג פארמען צו ווייַטער סטיל <select>ס.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

פֿאַר טעקע ינפּוץ, ויסבייַטן די .form-controlפֿאַר .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

סייזינג

שטעלן כייץ ניצן קלאסן ווי .form-control-lgאון .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

נאר צום ליינען

לייג די readonlyבוליאַן אַטריביוט אויף אַ אַרייַנשרייַב צו פאַרמייַדן מאָדיפיקאַטיאָן פון די אַרייַנשרייַב ווערט. לייענען-בלויז ינפּוץ דערשייַנען לייטער (פּונקט ווי פאַרקריפּלט ינפּוץ), אָבער האַלטן די נאָרמאַל לויפֿער.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ליינען קלאָר טעקסט

אויב איר ווילן צו האָבן <input readonly>עלעמענטן אין דיין פאָרעם סטיילד ווי קלאָר טעקסט, נוצן די .form-control-plaintextקלאַס צו באַזייַטיקן די פעליקייַט פאָרעם פעלד סטילינג און ופהיטן די ריכטיק גרענעץ און וואַטן.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

קייט ינפּוץ

שטעלן כאָריזאַנטאַלי סקראָלאַבלע קייט ינפּוץ ניצן .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

טשעקקבאָקסעס און ראַדיאָס

פעליקייַט טשעקקבאָקסעס און ראַדיאָס זענען ימפּרוווד מיט די הילף פון .form-checkאַ איין קלאַס פֿאַר ביידע אַרייַנשרייַב טייפּס וואָס ימפּרוווז די אויסלייג און נאַטור פון זייער HTML עלעמענטן . טשעקקבאָקסעס זענען פֿאַר סאַלעקטינג איינער אָדער עטלעכע אָפּציעס אין אַ רשימה, בשעת ראַדיאָס זענען פֿאַר סאַלעקטינג איין אָפּציע פון ​​פילע.

פאַרקריפּלט טשעקקבאָקסעס און ראַדיאָס זענען געשטיצט, אָבער צו צושטעלן אַ not-allowedלויפֿער אויף האָווער פון די פאָטער <label>, איר דאַרפֿן צו לייגן דעם disabledאַטריביוט צו די .form-check-input. די פאַרקריפּלט אַטריביוט וועט צולייגן אַ לייטער קאָליר צו אָנווייַזן די אַרייַנשרייַב שטאַט.

טשעקקבאָקסעס און ראַדיאָס נוצן זענען געבויט צו שטיצן HTML-באזירט פאָרעם וואַלאַדיישאַן און צושטעלן קאַנסייס, צוטריטלעך לאַבעלס. ווי אַזאַ, אונדזער <input>s און <label>s זענען סיבלינג עלעמענטן קעגן אַ <input>ין אַ <label>. דאָס איז אַ ביסל מער ווערבאָוס ווייַל איר מוזן ספּעציפיצירן idאון forאַטריביוץ צו פאַרבינדן די <input>און <label>.

פעליקייַט (סטאַקט)

דורך פעליקייַט, קיין נומער פון טשעקקבאָקסעס און ראַדיאָס וואָס זענען באַלדיק סיבלינג וועט זיין ווערטיקלי סטאַקט און אַפּראָופּרייטלי ספּייסט מיט .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

אין ליניע

גרופע טשעקקבאָקסעס אָדער ראַדיאָס אויף דער זעלביקער האָריזאָנטאַל רודערן דורך אַדינג .form-check-inlineצו קיין .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

אָן לאַבעלס

לייג .position-staticצו ינפּוץ אין .form-checkוואָס טאָן ניט האָבן קיין פירמע טעקסט. געדענקט צו נאָך צושטעלן עטלעכע פאָרעם פון פירמע פֿאַר אַסיסטיוו טעקנאַלאַדזשיז (פֿאַר בייַשפּיל, ניצן aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

אויסלייג

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

פאָרעם גרופּעס

דער .form-groupקלאַס איז די יזיאַסט וועג צו לייגן עטלעכע סטרוקטור צו פארמען. עס גיט אַ פלעקסאַבאַל קלאַס וואָס ינקעראַדזשאַז געהעריק גרופּינג פון לאַבעלס, קאָנטראָלס, אַפּשאַנאַל הילף טעקסט און פאָרעם וואַלאַדיישאַן מעסידזשינג. דורך פעליקייַט עס איז בלויז אַפּלייז margin-bottom, אָבער עס פּיקס אַרויף נאָך סטיילז אין .form-inlineווי דארף. ניצן עס מיט <fieldset>s, <div>s, אָדער כּמעט קיין אנדערע עלעמענט.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

פאָרעם גריד

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

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

פאָרעם רודערן

איר קענט אויך ויסבייַטן .rowפֿאַר .form-row, אַ ווערייישאַן פון אונדזער נאָרמאַל גריד רודערן וואָס אָווועררייד די פעליקייַט זייַל גאָוטערז פֿאַר טייטער און מער סאָליד לייאַוץ.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

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

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

האָריזאָנטאַל פאָרעם

שאַפֿן האָריזאָנטאַל פארמען מיט די גריד דורך אַדינג די .rowקלאַס צו פאָרעם גרופּעס און ניצן די .col-*-*קלאסן צו ספּעציפיצירן די ברייט פון דיין לאַבעלס און קאָנטראָלס. זייט זיכער צו לייגן .col-form-labelצו דיין <label>ס אויך אַזוי זיי זענען ווערטיקלי סענטערד מיט זייער פֿאַרבונדן פאָרעם קאָנטראָלס.

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

ראַדיאָס
טשעקקבאָקס
<form>
  <div class="form-group row">
    <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" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
האָריזאָנטאַל פאָרעם פירמע סייזינג

זייט זיכער צו נוצן .col-form-label-smאָדער .col-form-label-lgצו דיין <label>s אָדער <legend>s צו ריכטיק נאָכגיין די גרייס פון .form-control-lgאון .form-control-sm.

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group 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>
</form>

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

ווי געוויזן אין די פריערדיקע ביישפילן, אונדזער גריד סיסטעם אַלאַוז איר צו שטעלן קיין נומער פון .cols אין אַ .rowאָדער .form-row. זיי וועלן שפּאַלטן די בנימצא ברייט גלייַך צווישן זיי. איר קענט אויך קלייַבן אַ סובסעט פון דיין שפאלטן צו נעמען מער אָדער ווייניקער פּלאַץ, בשעת די רוען זענען .colגלייַך שפּאַלטן די מנוחה, מיט ספּעציפיש זייַל קלאסן ווי .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

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

דער ביישפּיל אונטן ניצט אַ פלעקסבאָקס נוצן צו ווערטיקלי צענטער די אינהאַלט און ענדערונגען .colאַזוי .col-autoאַז דיין שפאלטן נאָר נעמען אַזוי פיל פּלאַץ ווי דארף. שטעלן אן אנדער וועג, די זייַל סיזעס זיך באזירט אויף די אינהאַלט.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <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 mb-2">Submit</button>
    </div>
  </div>
</form>

איר קענען דעריבער רעמיקס אַז אַמאָל ווידער מיט גרייס-ספּעציפיש זייַל קלאסן.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <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 my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

און דאָך מנהג פאָרעם קאָנטראָלס זענען געשטיצט.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <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 my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

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

ניצן די .form-inlineקלאַס צו ווייַזן אַ סעריע פון ​​לאַבעלס, פאָרעם קאָנטראָלס און קנעפּלעך אויף אַ איין האָריזאָנטאַל רודערן. פאָרעם קאָנטראָלס אין ינלינע פארמען בייַטן אַ ביסל פון זייער פעליקייַט שטאַטן.

  • קאָנטראָלס זענען display: flex, קאַלאַפּסינג קיין HTML ווייַס פּלאַץ און אַלאַוינג איר צו צושטעלן אַליינמאַנט קאָנטראָל מיט ספּייסינג און פלעקסבאָקס יוטילאַטיז.
  • קאָנטראָלס און אַרייַנשרייַב גרופּעס באַקומען width: autoצו אָווועררייד די באָאָטסטראַפּ פעליקייַט width: 100%.
  • קאָנטראָלס זענען בלויז ינלינע אין וויופּאָרטס וואָס זענען בייַ מינדסטער 576 פּקס ברייט צו רעכענען שמאָל וויופּאָרץ אויף רירעוודיק דעוויסעס.

איר קען דאַרפֿן צו מאַניואַלי אַדרעס די ברייט און אַליינמאַנט פון יחיד פאָרעם קאָנטראָלס מיט ספּייסינג יוטילאַטיז (ווי געוויזן אונטן). לעסאָף, זיין זיכער צו שטענדיק אַרייַננעמען אַ <label>מיט יעדער פאָרעם קאָנטראָל, אפילו אויב איר דאַרפֿן צו באַהאַלטן עס פון וויזאַטערז מיט ניט-סקרעענרעדער .sr-only.

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

מנהג פאָרעם קאָנטראָלס און סאַלעקץ זענען אויך געשטיצט.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
אַלטערנאַטיוועס צו פאַרבאָרגן לאַבעלס

הילף טעקנאַלאַדזשיז אַזאַ ווי פאַרשטעלן לייענער וועט האָבן קאָנפליקט מיט דיין פארמען אויב איר טאָן ניט אַרייַננעמען אַ פירמע פֿאַר יעדער אַרייַנשרייַב. פֿאַר די ינלינע פארמען, איר קענען באַהאַלטן די לאַבעלס ניצן די .sr-onlyקלאַס. עס זענען נאָך אָלטערנאַטיוו מעטהאָדס צו צושטעלן אַ פירמע פֿאַר אַסיסטיוו טעקנאַלאַדזשיז, אַזאַ ווי די aria-label, aria-labelledbyאָדער titleאַטריביוט. אויב קיינער פון די איז נישט פאָרשטעלן, אַסיסטאַטיוו טעקנאַלאַדזשיז קענען נוצן דעם placeholderאַטריביוט, אויב עס איז פאָרשטעלן, אָבער טאָן אַז עס placeholderאיז נישט אַדווייזד צו נוצן עס ווי אַ פאַרבייַט פֿאַר אנדערע לייבלינג מעטהאָדס.

הילף טעקסט

בלאָק-מדרגה הילף טעקסט אין פארמען קענען זיין באשאפן מיט .form-text(פריער באקאנט ווי .help-blockאין וו3). ינלינע הילף טעקסט קענען זיין פלעקסאַבאַל ימפּלאַמענאַד מיט קיין ינלינע HTML עלעמענט און נוצן קלאסן ווי .text-muted.

אַססאָסיאַטינג הילף טעקסט מיט פאָרעם קאָנטראָלס

הילף טעקסט זאָל זיין בפירוש פֿאַרבונדן מיט די פאָרעם קאָנטראָל עס איז שייך צו ניצן די aria-describedbyאַטריביוט. דאָס וועט ענשור אַז אַסיסטאַטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער - וועט מעלדן דעם הילף טעקסט ווען דער באַניצער פאָוקיסיז אָדער גייט אריין די קאָנטראָל.

הילף טעקסט אונטן ינפּוץ קענען זיין סטיילד מיט .form-text. דער קלאַס כולל display: blockאון מוסיף עטלעכע שפּיץ גרענעץ פֿאַר גרינג ספּייסינג פון די ינפּוץ אויבן.

דיין פּאַראָל מוזן זיין 8-20 אותיות לאַנג, אַנטהאַלטן אותיות און נומערן, און מוזן נישט אַנטהאַלטן ספּייסאַז, ספּעציעל אותיות אָדער עמאָדזשי.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

ינלינע טעקסט קענען נוצן קיין טיפּיש ינלינע HTML עלעמענט (זיין עס אַ <small>, <span>, אָדער עפּעס אַנדערש) מיט גאָרנישט מער ווי אַ נוצן קלאַס.

מוזן זיין 8-20 אותיות לאַנג.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

פאַרקריפּלט פארמען

לייג די disabledבוליאַן אַטריביוט אויף אַן אַרייַנשרייַב צו פאַרמייַדן באַניצער ינטעראַקשאַנז און מאַכן עס לייטער.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

לייג די disabledאַטריביוט צו אַ <fieldset>צו דיסייבאַל אַלע די קאָנטראָלס ין.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
היט מיט אַנגקערז

דורך פעליקייַט, בראַוזערז וועט מייַכל אַלע געבוירן פאָרעם קאָנטראָלס ( <input>, <select>און <button>עלעמענטן) אין אַ <fieldset disabled>ווי פאַרקריפּלט, פּרעווענטינג ביידע קלאַוויאַטור און מויז ינטעראַקשאַנז אויף זיי. אָבער, אויב דיין פאָרעם אויך ינקלודז <a ... class="btn btn-*">עלעמענטן, זיי וועלן בלויז באַקומען אַ נוסח פון pointer-events: none. ווי אנגעוויזן אין די אָפּטיילונג וועגן פאַרקריפּלט שטאַט פֿאַר קנעפּלעך (און ספּאַסיפיקלי אין די סאַב-אָפּטיילונג פֿאַר אַנקער עלעמענטן), די CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד און איז נישט גאָר געשטיצט אין Internet Explorer 10, און וועט נישט פאַרמיידן קלאַוויאַטור יוזערז. קענען פאָקוס אָדער אַקטאַווייט די לינקס. אַזוי צו זיין זיכער, נוצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל אַזאַ פֿאַרבינדונגען.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

בשעת Bootstrap וועט צולייגן די סטיילז אין אַלע בראַוזערז, Internet Explorer 11 און ווייטער טאָן ניט גאָר שטיצן די disabledאַטריביוט אויף אַ <fieldset>. ניצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל די פעלדסעט אין די בראַוזערז.

באשטעטיגען

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

דערווייַל מיר רעקאָמענדירן צו נוצן מנהג וואַלאַדיישאַן סטיילז, ווייַל געבוירן בלעטערער פעליקייַט וואַלאַדיישאַן אַרטיקלען זענען נישט קאַנסיסטאַנטלי יקספּאָוזד צו אַסיסטיוו טעקנאַלאַדזשיז אין אַלע בראַוזערז (רובֿ נאָוטאַבלי, קראָום אויף דעסקטאַפּ און רירעוודיק).

וויאזוי עס ארבעט

דאָ ס ווי פאָרעם וואַלאַדיישאַן אַרבעט מיט Bootstrap:

  • HTML פאָרם וואַלאַדיישאַן איז געווענדט דורך CSS ס צוויי פּסעוודאָ-קלאסן, :invalidאון :valid. עס אַפּלייז צו <input>, <select>, און <textarea>עלעמענטן.
  • באָאָטסטראַפּ סקאָפּעס :invalidאון :validסטיילז צו פאָטער .was-validatedקלאַס, יוזשאַוואַלי געווענדט צו די <form>. אַנדערש, קיין פארלאנגט פעלד אָן אַ ווערט ווייזן זיך ווי פאַרקריפּלט אויף בלאַט מאַסע. דעם וועג, איר קען קלייַבן ווען צו אַקטאַווייט זיי (טיפּיקלי נאָך די פאָרמולע סאַבמישאַן איז געפרוווט).
  • צו באַשטעטיק די אויסזען פון די פאָרעם (פֿאַר בייַשפּיל, אין די פאַל פון דינאַמיש פאָרם סאַבמישאַנז ניצן AJAX), אַראָפּנעמען די .was-validatedקלאַס פון די <form>ווידער נאָך סאַבמישאַן.
  • ווי אַ פאַלבאַק, .is-invalidאון .is-validקלאסן קענען זיין געוויינט אַנשטאָט פון די פּסעוודאָ-קלאסן פֿאַר וואַלאַדיישאַן פון סערווער זייַט . זיי טאָן ניט דאַרפן אַ .was-validatedפאָטער קלאַס.
  • רעכט צו קאַנסטריינץ אין ווי CSS אַרבעט, מיר קענען (איצט) נישט צולייגן סטיילז צו אַ <label>וואָס קומט איידער אַ פאָרעם קאָנטראָל אין די DOM אָן די הילף פון מנהג דזשאַוואַסקריפּט.
  • כל מאָדערן בראַוזערז שטיצן די קאַנסטריינט וואַלאַדיישאַן אַפּי , אַ סעריע פון ​​דזשאַוואַסקריפּט מעטהאָדס פֿאַר וואַלאַדייטינג פאָרעם קאָנטראָלס.
  • באַמערקונגען אַרטיקלען קענען נוצן די בלעטערער דיפאָלץ (פאַרשידענע פֿאַר יעדער בלעטערער, ​​און אַנסטייבאַל דורך CSS) אָדער אונדזער מנהג באַמערקונגען סטיילז מיט נאָך HTML און CSS.
  • איר קען צושטעלן מנהג גילטיקייַט אַרטיקלען מיט setCustomValidityדזשאַוואַסקריפּט.

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

מנהג סטיילז

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

ווען איר פּרוּווט צו פאָרלייגן, איר וועט זען די :invalidאון :validסטיילז געווענדט צו דיין פאָרעם קאָנטראָלס.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

בלעטערער דיפאָלץ

ניט אינטערעסירט אין מנהג וואַלאַדיישאַן באַמערקונגען אַרטיקלען אָדער שרייבן דזשאַוואַסקריפּט צו טוישן פאָרעם ביכייוויערז? אַלע גוט, איר קענען נוצן די בלעטערער דיפאָלץ. פּרוּווט פאָרלייגן די פאָרעם אונטן. דעפּענדינג אויף דיין בלעטערער און אַס, איר וועט זען אַ ביסל אַנדערש נוסח פון באַמערקונגען.

כאָטש די באַמערקונגען סטיילז קענען ניט זיין סטיילד מיט CSS, איר קענען נאָך קאַסטאַמייז די באַמערקונגען טעקסט דורך דזשאַוואַסקריפּט.

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

סערווירער זייַט

מיר רעקאָמענדירן ניצן קליענט זייַט וואַלאַדיישאַן, אָבער אין פאַל איר דאַרפן סערווער זייַט, איר קענען אָנווייַזן פאַרקריפּלט און גילטיק פאָרעם פעלדער מיט .is-invalidאון .is-valid. באַמערקונג אַז .invalid-feedbackאיז אויך געשטיצט מיט די קלאסן.

זעט אויס גוט!
זעט אויס גוט!
@
ביטע קלייַבן אַ באַניצער נאָמען.
ביטע צושטעלן אַ גילטיק שטאָט.
ביטע צושטעלן אַ גילטיק שטאַט.
ביטע צושטעלן אַ גילטיק פאַרשלעסלען.
איר מוזן שטימען איידער סאַבמיטינג.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

געשטיצט עלעמענטן

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

ביישפּיל פאַרקריפּלט באַמערקונגען טעקסט
מער בייַשפּיל פאַרקריפּלט באַמערקונגען טעקסט
ביישפּיל פאַרקריפּלט מנהג סעלעקט באַמערקונגען
ביישפּיל פאַרקריפּלט מנהג טעקע באַמערקונגען
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

מכשירים

אויב דיין פאָרעם אויסלייג אַלאַוז עס, איר קענען ויסבייַטן די .{valid|invalid}-feedbackקלאסן פֿאַר .{valid|invalid}-tooltipקלאסן צו ווייַזן וואַלאַדיישאַן באַמערקונגען אין אַ סטיילד געצייַג. זייט זיכער צו האָבן אַ פאָטער מיט position: relativeאויף עס פֿאַר טאָאָלטיפּ פּאַזישאַנינג. אין דעם בייַשפּיל אונטן, אונדזער זייַל קלאסן האָבן דאָס שוין, אָבער דיין פּרויעקט קען דאַרפן אַן אָלטערנאַטיוו סעטאַפּ.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

מנהג פארמען

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

טשעקקבאָקסעס און ראַדיאָס

יעדער טשעקקבאָקס און ראַדיאָ איז אלנגעוויקלט אין אַ <div>מיט אַ סיבלינג <span>צו שאַפֿן אונדזער מנהג קאָנטראָל און אַ <label>פֿאַר די אַקאַמפּאַניינג טעקסט. סטראַקטשעראַלי, דאָס איז דער זעלביקער צוגאַנג ווי אונדזער פעליקייַט .form-check.

מיר נוצן די סיבלינג סעלעקטאָר ( ~) פֿאַר אַלע אונדזער <input>שטאַטן - ווי :checked- צו סטיל אונדזער מנהג פאָרעם גראדן. ווען קאַמביינד מיט די .custom-control-labelקלאַס, מיר קענען אויך סטיל די טעקסט פֿאַר יעדער נומער באזירט אויף די <input>שטאַט.

מיר באַהאַלטן די פעליקייַט <input>מיט opacityאון נוצן די .custom-control-labelצו בויען אַ נייַע מנהג פאָרעם גראדן אין זיין אָרט מיט ::beforeאון ::after. צום באַדויערן, מיר קענען נישט בויען אַ מנהג איינער פון בלויז די <input>ווייַל CSS ס contentטוט נישט אַרבעטן אויף דעם עלעמענט.

אין די אָפּגעשטעלט שטאַטן, מיר נוצן Base64 עמבעדיד SVG ייקאַנז פֿון Open Iconic . דאָס גיט אונדז די בעסטער קאָנטראָל פֿאַר סטילינג און פּאַזישאַנינג צווישן בראַוזערז און דעוויסעס.

טשעקקבאָקסעס

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

מנהג טשעקקבאָקסעס קענען אויך נוצן די :indeterminateפּסעוודאָ קלאַס ווען מאַניואַלי שטעלן דורך דזשאַוואַסקריפּט (עס איז קיין בנימצא HTML אַטריביוט צו ספּעציפיצירן עס).

אויב איר נוצן jQuery, עפּעס ווי דאָס זאָל זיין גענוג:

$('.your-checkbox').prop('indeterminate', true)

ראַדיאָס

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

אין ליניע

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

פאַרקריפּלט

מנהג טשעקקבאָקסעס און ראַדיאָס קענען אויך זיין פאַרקריפּלט. לייג די disabledבוליאַן אַטריביוט צו די <input>און די מנהג גראדן און פירמע באַשרייַבונג וועט זיין אויטאָמאַטיש סטיילד.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

אויסקלייַבן מעניו

מנהג <select>מעניוז דאַרפֿן בלויז אַ מנהג קלאַס, .custom-selectצו צינגל די מנהג סטיילז. מנהג סטיילז זענען לימיטעד צו די <select>ערשט אויסזען און קענען נישט מאָדיפיצירן די <option>ס רעכט צו בלעטערער לימיטיישאַנז.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

דער multipleאַטריביוט איז אויך געשטיצט:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ווי איז די sizeאַטריביוט:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

קייט

שאַפֿן מנהג <input type="range">קאָנטראָלס מיט .custom-range. דער שפּור (דער הינטערגרונט) און גראָבער פינגער (די ווערט) זענען ביידע סטיילד צו דערשייַנען די זעלבע אַריבער בראַוזערז. ווי בלויז IE און Firefox שטיצן "פילונג" זייער שפּור פון די לינקס אָדער רעכט פון דעם גראָבער פינגער ווי אַ מיטל צו וויזשוואַלי אָנווייַזן פּראָגרעס, מיר טאָן ניט שטיצן עס דערווייַל.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

קייט ינפּוץ האָבן ימפּליסאַט וואַלועס פֿאַר minאון max- 0און 100ריספּעקטיוולי. איר קענט ספּעציפיצירן נייַע וואַלועס פֿאַר יענע וואָס נוצן די minאון maxאַטריביוץ.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

דורך פעליקייַט, קייט ינפּוץ "קנאַקן" צו ינטאַדזשער וואַלועס. צו טוישן דעם, איר קענען ספּעציפיצירן אַ stepווערט. אין דעם בייַשפּיל אונטן, מיר טאָפּל די נומער פון סטעפּס דורך ניצן step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

טעקע בלעטערער

דער טעקע אַרייַנשרייַב איז די מערסט גנאַרלי פון די בינטל און ריקווייערז נאָך דזשאַוואַסקריפּט אויב איר ווילט צו פאַרבינדן זיי מיט פאַנגקשאַנאַל טשאָאָסע טעקע ... און אויסגעקליבן טעקע נאָמען טעקסט.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

מיר באַהאַלטן די פעליקייַט טעקע <input>דורך opacityאון אַנשטאָט סטיל די <label>. דער קנעפּל איז דזשענערייטאַד און פּאַזישאַנד מיט ::after. צום סוף, מיר דערקלערן אַ widthאון heightאויף די <input>פֿאַר געהעריק ספּייסינג פֿאַר אַרומיק אינהאַלט.

איבערזעצן אָדער קאַסטאַמייז די סטרינגס

דער :lang()פּסעוודאָ-קלאַס איז געניצט צו לאָזן איבערזעצונג פון די "בלעטער" טעקסט אין אנדערע שפּראַכן. אָווועררייד אָדער לייגן איינסן צו די $custom-file-textSass בייַטעוודיק מיט די באַטייַטיק שפּראַך קוויטל און לאָוקאַלייזד סטרינגס. די ענגליש סטרינגס קענען זיין קאַסטאַמייזד די זעלבע וועג. פֿאַר בייַשפּיל, דאָ ס ווי איר קענען לייגן אַ שפּאַניש איבערזעצונג (שפּאַניש ס שפּראַך קאָד איז es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

דאָ ס lang(es)אין קאַמף אויף די מנהג טעקע אַרייַנשרייַב פֿאַר אַ שפּאַניש איבערזעצונג:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

איר וועט דאַרפֿן צו שטעלן די שפּראַך פון דיין דאָקומענט (אָדער סובטריע דערפון) ריכטיק אין סדר צו ווייַזן די ריכטיק טעקסט. דאָס קען זיין געטאן מיט די langאַטריביוט אויף דעם <html>עלעמענט אָדער די Content-LanguageHTTP כעדער , צווישן אנדערע מעטהאָדס.