گروه ورودی‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

کلاس .input-group یک ظرف (به انگلیسی: Container) برای بهبود یک ورودی با اضافه کردن آیکون، متن یا کلید در جلو یا پشت فیلد ورودی بعنوان «متن راهنما» است.[۱]

می‌توان برای اضاف کردن متن راهنما جلوی فیلد ورودی (قبل از آن) از .input-group-prepend و برای اضافه کردن متن راهنما در پشت فیلد ورودی (بعد از آن) از .input-group-append استفاده کرد.

در نهایت، باید کلاس .input-group-text را برای استایل دادن به متن راهنمای مورد نظر اضافه شود.

مثال

 1 <form>
 2   <div class="input-group mb-3">
 3     <div class="input-group-prepend">
 4       <span class="input-group-text">@</span>
 5     </div>
 6     <input type="text" class="form-control" placeholder="Username">
 7   </div>
 8 
 9   <div class="input-group mb-3">
10     <input type="text" class="form-control" placeholder="Your Email">
11     <div class="input-group-append">
12       <span class="input-group-text">@example.com</span>
13     </div>
14   </div>
15 </form>


مشاهدهٔ نتیجه


نکته: از کلاس کاربردی (به انگلیسی: Utility Class) .mb-3 برای تضمین حاشیهٔ پایین مناسب برای گروه ورودی استفاده می‌کنیم.

در مورد کلاس‌های کاربردی در بخش Utilities BS4 بیشتر خواهید آموخت.

سایز دهی گروه ورودی

کلاس .input-group-sm را برای گروه‌های ورودی کوچک و کلاس .input-group-lg برای گروه‌های ورودی بزرگ اضافه کنید:

مثال

 1 <form>
 2   <div class="input-group mb-3 input-group-sm">
 3      <div class="input-group-prepend">
 4        <span class="input-group-text">Small</span>
 5     </div>
 6     <input type="text" class="form-control">
 7   </div>
 8 </form>
 9 <form>
10   <div class="input-group mb-3">
11     <div class="input-group-prepend">
12       <span class="input-group-text">Default</span>
13     </div>
14     <input type="text" class="form-control">
15   </div>
16 </form>
17 <form>
18   <div class="input-group mb-3 input-group-lg">
19     <div class="input-group-prepend">
20       <span class="input-group-text">Large</span>
21     </div>
22     <input type="text" class="form-control">
23   </div>
24 </form>


مشاهدهٔ نتیجه


چند ورودی و Helper

ورودی‌ها یا addonها را اضافه کنید:

مثال

 1 <!-- Multiple inputs -->
 2 <form>
 3   <div class="input-group mb-3">
 4     <div class="input-group-prepend">
 5       <span class="input-group-text">Person</span>
 6     </div>
 7     <input type="text" class="form-control" placeholder="First Name">
 8     <input type="text" class="form-control" placeholder="Last Name">
 9   </div>
10 </form>
11 
12 <!-- Multiple addons / help text -->
13 <form>
14   <div class="input-group mb-3">
15     <div class="input-group-prepend">
16       <span class="input-group-text">One</span>
17       <span class="input-group-text">Two</span>
18       <span class="input-group-text">Three</span>
19     </div>
20     <input type="text" class="form-control">
21   </div>
22 </form>


مشاهدهٔ نتیجه


گروه ورودی با چک باکس و Radioها

همچنین می‌توان از چک باکس‌ها یا کلیدهای radio به جای متن استفاده کرد:

مثال

 1 <div class="input-group mb-3">
 2   <div class="input-group-prepend">
 3     <div class="input-group-text">
 4       <input type="checkbox">
 5     </div>
 6   </div>
 7   <input type="text" class="form-control" placeholder="Some text">
 8 </div>
 9 
10 <div class="input-group mb-3">
11   <div class="input-group-prepend">
12     <div class="input-group-text">
13       <input type="radio">
14     </div>
15   </div>
16   <input type="text" class="form-control" placeholder="Some text">
17 </div>


مشاهدهٔ نتیجه


کلیدهای گروه ورودی

مثال

 1 <div class="input-group mb-3">
 2   <div class="input-group-prepend">
 3     <button class="btn btn-outline-primary" type="button">Basic Button</button>
 4   </div>
 5   <input type="text" class="form-control" placeholder="Some text">
 6 </div>
 7 
 8 <div class="input-group mb-3">
 9   <input type="text" class="form-control" placeholder="Search">
10   <div class="input-group-append">
11     <button class="btn btn-success" type="submit">Go</button>
12   </div>
13 </div>
14 
15 <div class="input-group mb-3">
16   <input type="text" class="form-control" placeholder="Something clever..">
17   <div class="input-group-append">
18     <button class="btn btn-primary" type="button">OK</button>
19     <button class="btn btn-danger" type="button">Cancel</button>
20   </div>
21 </div>


مشاهدهٔ نتیجه


گروه ورودی با کلید کرکره ای (به انگلیسی: Dropdown)

یک کلید کرکره ای به گروه ورودی اضافه کنید. دقت کنید که برخلاف همیشه، نیازی به .dropdown wrapper ندارید.

مثال

 1 <div class="input-group mt-3 mb-3">
 2   <div class="input-group-prepend">
 3     <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
 4       Dropdown button
 5     </button>
 6     <div class="dropdown-menu">
 7       <a class="dropdown-item" href="#">Link 1</a>
 8       <a class="dropdown-item" href="#">Link 2</a>
 9       <a class="dropdown-item" href="#">Link 3</a>
10     </div>
11   </div>
12   <input type="text" class="form-control" placeholder="Username">
13 </div>


مشاهدهٔ نتیجه


برچسبهای گروه ورودی

برچسب‌ها را خارج از گروه ورودی قرار دهید و به یاد داشته باشید که مقدار ویژگی باید با id ورودی مطابقت داشته باشد.

روی برچسب کلیک کنید و Focus روی ورودی قرار می‌گیرد:

مثال

1 <label for="demo">Write your email here:</label>
2 <div class="input-group mb-3">
3   <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
4   <div class="input-group-append">
5     <span class="input-group-text">@example.com</span>
6   </div>
7 </div>


مشاهدهٔ نتیجه



منابع آموزشی