تَخطِيط
امنح النماذج الخاصة بك بعض البنية - من عمليات التنفيذ المضمنة إلى الأفقية إلى عمليات تنفيذ الشبكة المخصصة - باستخدام خيارات تخطيط النموذج الخاصة بنا.
نماذج
يجب أن تتواجد كل مجموعة من حقول النموذج في <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
إلى <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>
أو الخاص بك <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>