מַעֲרָך
תן לטפסים שלך מבנה מסוים - מ-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>
גודל עמודה
כפי שמוצג בדוגמאות הקודמות, מערכת הרשת שלנו מאפשרת לך למקם כל מספר של .col
s בתוך .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>
טפסים מוטבעים
השתמש .row-cols-*
בשיעורים כדי ליצור פריסות אופקיות רספונסיביות. על ידי הוספת מחלקות שינוי מרזבים , יהיו לנו מרזבים בכיוונים אופקיים ואנכיים. ביציאות תצוגה ניידות צרות, זה .col-12
עוזר בערימת פקדי הטפסים ועוד. מיישר את .align-items-center
רכיבי הטופס לאמצע, מה שהופך את .form-checkbox
היישור כראוי.
<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>