דלג לתוכן הראשי דלג לניווט במסמכים
in English

מַעֲרָך

תן לטפסים שלך מבנה מסוים - מ-inline ועד אופקי למימושי רשת מותאמים אישית - עם אפשרויות פריסת הטפסים שלנו.

בעמוד זה

טפסים

כל קבוצה של שדות טופס צריכה להימצא בתוך <form>אלמנט. Bootstrap אינו מספק עיצוב ברירת מחדל עבור <form>האלמנט, אבל יש כמה תכונות דפדפן חזקות הניתנות כברירת מחדל.

  • חדש בטפסי הדפדפן? שקול לעיין במסמכי הטופס של MDN לקבלת סקירה כללית ורשימה מלאה של תכונות זמינות.
  • <button>s בתוך <form>ברירת מחדל ל type="submit", אז השתדלו להיות ספציפיים ולכלול תמיד א type.
  • אתה יכול להשבית כל רכיב טופס בתוך טופס עם disabledהתכונה ב- <form>.

מכיוון ש-Bootstrap חל display: blockוכמעט width: 100%על כל בקרות הטפסים שלנו, טפסים כברירת מחדל ייערמו אנכית. ניתן להשתמש בשיעורים נוספים כדי לשנות פריסה זו על בסיס ביצועים.

כלי עזר

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

אל תהסס לבנות את הטפסים שלך איך שתרצה, עם <fieldset>s, <div>s, או כמעט כל אלמנט אחר.

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

טופס רשת

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

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

מרזבים

על ידי הוספת מחלקות שינויי מרזב , תוכל לשלוט על רוחב המרזב גם בכיוון המוטבע וגם בכיוון הבלוק. מחייב גם את הפעלת $enable-grid-classesהמשת��ה Sass (מופעל כברירת מחדל).

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

ניתן גם ליצור פריסות מורכבות יותר עם מערכת הרשת.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

צורה אופקית

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

לפעמים, אולי תצטרך להשתמש בכלי עזר לשוליים או ריפוד כדי ליצור את היישור המושלם שאתה צריך. לדוגמה, הסרנו את padding-topתווית כניסות הרדיו המוערמות שלנו כדי ליישר טוב יותר את קו הבסיס של הטקסט.

רדיו 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

גודל תווית טופס אופקי

הקפד להשתמש .col-form-label-smאו .col-form-label-lgל- <label>s או s שלך <legend>כדי לעקוב נכון אחר הגודל של .form-control-lgו .form-control-sm.

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

גודל עמודות

כפי שמוצג בדוגמאות הקודמות, מערכת הרשת שלנו מאפשרת לך למקם כל מספר של .cols בתוך .row. הם יחלקו ביניהם שווה בשווה את הרוחב הזמין. אתה יכול גם לבחור תת-קבוצה של העמודות שלך כדי לתפוס פחות או יותר מקום, בעוד שהשארים .colמחלקים באופן שווה את השאר, עם מחלקות עמודות ספציפיות כמו .col-sm-7.

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

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

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

@ 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

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

@ 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

טפסים מוטבעים

Use the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more. The .align-items-center aligns the form elements to the middle, making the .form-checkbox align properly.

@ 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>