Source

טפסים

דוגמאות והנחיות שימוש לסגנונות בקרת טפסים, אפשרויות פריסה ורכיבים מותאמים אישית ליצירת מגוון רחב של טפסים.

סקירה כללית

פקדי הטופס של Bootstrap מתרחבים בסגנונות הטופס המחודשים שלנו עם מחלקות. השתמש בשיעורים אלה כדי להצטרף לצגים המותאמים אישית שלהם לעיבוד עקבי יותר בדפדפנים ובמכשירים.

הקפד להשתמש typeבתכונה מתאימה בכל הקלטים (למשל, emailעבור כתובת דוא"ל או numberעבור מידע מספרי) כדי לנצל את פקדי הקלט החדשים יותר כמו אימות דוא"ל, בחירת מספרים ועוד.

הנה דוגמה מהירה להדגמת סגנונות הצורה של Bootstrap. המשך לקרוא לתיעוד על שיעורים נדרשים, פריסת טפסים ועוד.

לעולם לא נשתף את האימייל שלך עם אף אחד אחר.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <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">
  </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>s.

<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-controlfor .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">
    </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>

תיבות סימון ומכשירי רדיו

תיבות סימון ומכשירי רדיו כברירת מחדל משופרים בעזרת מחלקה אחת לשני סוגי הקלט המשפרת את הפריסה וההתנהגות של רכיבי ה-HTML.form-check שלהם . תיבות סימון מיועדות לבחירת אפשרות אחת או מספר אפשרויות ברשימה, בעוד שמכשירי רדיו מיועדים לבחירת אפשרות אחת מתוך רבות.

תיבות סימון מושבתות ומכשירי רדיו נתמכים. התכונה disabledתחיל צבע בהיר יותר כדי לעזור לציין את מצב הקלט.

תיבות סימון ולחצני בחירה תומכים באימות טפסים מבוסס HTML ומספקים תוויות תמציתיות ונגישות. ככאלה, ה- <input>s וה-s שלנו <label>הם אלמנטים אחים בניגוד ל-in- <input>a <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 placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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גם ל-s שלך <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">
    </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">
    </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 או s שלך <legend>כדי לעקוב נכון אחר הגודל של .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 בתוך a .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>

התאמה אוטומטית

הדוגמה שלמטה משתמשת בכלי עזר flexbox כדי למרכז אנכית את התוכן ושינויים .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 ומאפשרים לך לספק בקרת יישור עם כלי עזר לרווחים ו- flexbox .
  • בקרות וקבוצות קלט מקבלים width: autoכדי לעקוף את ברירת המחדל של Bootstrap width: 100%.
  • הפקדים מופיעים בשורה רק ביציאות תצוגה ברוחב של לפחות 576 פיקסלים כדי לתת מענה ליציאות תצוגה צרות במכשירים ניידים.

ייתכן שיהיה עליך לטפל באופן ידני ברוחב וביישור של פקדי טפסים בודדים עם כלי עזר לרווח (כמתואר להלן). לבסוף, הקפד לכלול תמיד a <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ב-v3). ניתן ליישם טקסט עזרה מוטבע בצורה גמישה באמצעות כל רכיב 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התכונה ל-a <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-group">
      <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>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
אזהרה עם עוגנים

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

תאימות בין דפדפנים

בעוד Bootstrap יחיל סגנונות אלה בכל הדפדפנים, Internet Explorer 11 ומטה אינם תומכים באופן מלא disabledבתכונה ב- <fieldset>. השתמש ב-JavaScript מותאם אישית כדי להשבית את ערכת השדות בדפדפנים אלה.

מַתַן תוֹקֵף

ספק למשתמשים שלך משוב בעל ערך ופעולה באמצעות אימות טופס HTML5 - זמין בכל הדפדפנים הנתמכים שלנו . בחר מתוך משוב ברירת המחדל של אימות הדפדפן, או הטמע הודעות מותאמות אישית עם השיעורים המובנים שלנו ו-JavaScript המתחיל שלנו.

בשלב זה אנו ממליצים להשתמש בסגנונות אימות מותאמים אישית, מכיוון שהודעות אימות ברירת המחדל של דפדפן מקורי אינן נחשפות באופן עקבי לטכנולוגיות מסייעות בכל הדפדפנים (בעיקר, Chrome במחשב שולחני ובנייד).

איך זה עובד

כך עובד אימות טופס עם Bootstrap:

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

עם זאת בחשבון, שקול את ההדגמות הבאות עבור סגנונות אימות הטפסים המותאמים אישית שלנו, מחלקות צד שרת אופציונליות וברירות מחדל של דפדפן.

סגנונות מותאמים אישית

עבור הודעות אימות טופס Bootstrap מותאמות אישית, תצטרך להוסיף את novalidateהתכונה הבוליאנית שלך <form>. פעולה זו משביתה את ברירת המחדל של עצות המשוב של הדפדפן, אך עדיין מספקת גישה לממשקי API לאימות הטופס ב-JavaScript. נסה לשלוח את הטופס למטה; ה-JavaScript שלנו יירט את כפתור השליחה ויעביר אליך משוב. כשתנסה לשלוח, תראה את הסגנונות :invalidוהסגנונות :validשהוחלו על פקדי הטפסים שלך.

סגנונות משוב מותאמים אישית מיישמים צבעים מותאמים אישית, גבולות, סגנונות מיקוד וסמלי רקע כדי להעביר משוב טוב יותר. סמלי רקע עבור <select>s זמינים רק עם .custom-select, ולא .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>

ברירת המחדל של הדפדפן

לא מעוניין בהודעות משוב אימות מותאמות אישית או בכתיבת JavaScript כדי לשנות התנהגויות של טופס? הכל בסדר, אתה יכול להשתמש בברירות המחדל של הדפדפן. נסה לשלוח את הטופס למטה. בהתאם לדפדפן ולמערכת ההפעלה שלך, תראה סגנון מעט שונה של משוב.

אמנם לא ניתן לעצב סגנונות משוב אלה עם CSS, אך עדיין תוכל להתאים אישית את טקסט המשוב באמצעות JavaScript.

@
<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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>s ו- <textarea>s עם .form-control(כולל עד אחד .form-controlבקבוצות קלט)
  • <select>s עם .form-controlאו.custom-select
  • .form-checkס
  • .custom-checkboxs ו- .custom-radios
  • .custom-file
נא להזין הודעה באזור הטקסט.
דוגמה לטקסט משוב לא חוקי
דוגמה נוספת לטקסט משוב לא חוקי
דוגמה למשוב בחירה מותאם אישית לא חוקי
דוגמה למשוב קובץ מותאם אישית לא חוקי
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <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 select 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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

התאמה אישית

ניתן להתאים אישית מצבי אימות באמצעות Sass עם $form-validation-statesהמפה. _variables.scssמפת Sass זו ממוקמת בקובץ שלנו , מגולפת בלולאה כדי ליצור את מצבי ברירת המחדל valid/ אימות. invalidכלולה מפה מקוננת להתאמה אישית של הצבע והסמל של כל מדינה. אמנם אין מצבים אחרים שנתמכים על ידי דפדפנים, אבל אלה המשתמשים בסגנונות מותאמים אישית יכולים בקלות להוסיף משוב מורכב יותר על טפסים.

שים לב שאיננו ממליצים להתאים אישית ערכים אלה מבלי לשנות גם את form-validation-stateהמיקסין.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

טפסים מותאמים אישית

להתאמה אישית רבה עוד יותר ועקביות בין דפדפנים, השתמש ברכיבי הטופס המותאמים לחלוטין שלנו כדי להחליף את ברירות המחדל של הדפדפן. הם בנויים על גבי סימון סמנטי ונגיש, כך שהם תחליפים מוצקים לכל בקרת טופס ברירת מחדל.

תיבות סימון ומכשירי רדיו

כל תיבת סימון ורדיו <input>והתאמה <label>עטופה ב- <div>כדי ליצור את השליטה המותאמת אישית שלנו. מבחינה מבנית, זו אותה גישה כמו ברירת המחדל שלנו .form-check.

אנו משתמשים בבורר האחים ( ~) עבור כל <input>המדינות שלנו - כמו :checked- כדי לעצב כראוי את מחוון הטופס המותאם אישית שלנו. בשילוב עם .custom-control-labelהכיתה, נוכל גם לעצב את הטקסט עבור כל פריט על סמך המצב <input>'s.

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

במצבים המסומנים, אנו משתמשים בסמלי SVG מוטבעים ב-base64 מ- 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>

תיבות סימון מותאמות אישית יכולות גם להשתמש ב- :indeterminatepseudo class כשהן מוגדרות ידנית באמצעות JavaScript (אין תכונת 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="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

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

מתגים

למתג יש סימון של תיבת סימון מותאמת אישית אך משתמש .custom-switchבמחלקה לעיבוד מתג החלפה. מתגים גם תומכים disabledבתכונה.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

בחר תפריט

תפריטים מותאמים אישית <select>צריכים רק מחלקה מותאמת אישית, .custom-selectכדי להפעיל את הסגנונות המותאמים אישית. סגנונות מותאמים אישית מוגבלים <select>למראה הראשוני של ה-s ולא ניתן לשנות את ה- <option>s עקב מגבלות הדפדפן.

<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, בהתאמה. אתה יכול לציין ערכים חדשים עבור אלה המשתמשים בתכונות ו .0100minmax

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

סייר קבצים

התוסף המומלץ להנפשת קלט קובץ מותאם אישית: bs-custom-file-input , זה מה שאנחנו משתמשים כרגע כאן במסמכים שלנו.

קלט הקובץ הוא המסובך ביותר בחבורה ודורש JavaScript נוסף אם תרצה לחבר אותם עם פונקציונלי בחר קובץ... וטקסט נבחר של שם הקובץ.

<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>עבור מרווח מתאים לתוכן מסביב.

תרגום או התאמה אישית של המחרוזות באמצעות SCSS

המחלקה :lang()הפסאודו משמשת כדי לאפשר תרגום של הטקסט "עיון" לשפות אחרות. עוקף או הוסף ערכים למשתנה Sass עם תג השפה$custom-file-text הרלוונטי ומחרוזות מקומיות. ניתן להתאים אישית את המחרוזות באנגלית באותו אופן. לדוגמה, כך ניתן להוסיף תרגום לספרדית (קוד השפה של ספרדית הוא ):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 , בין שיטות אחרות.

תרגום או התאמה אישית של המחרוזות באמצעות HTML

Bootstrap מספק גם דרך לתרגם את הטקסט "עיון" ב-HTML עם data-browseהתכונה שניתן להוסיף לתווית הקלט המותאמת אישית (דוגמה בהולנדית):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>