گروه های ورودی در Bootstrap

تاریخ انتشار: 9 دی 1394

تعداد بازدید: 21 نفر

در این بخش نحوه استفاده از گروه های ورودی در بوت استرپ را خواهید آموخت.

توسعه دادن مشخصه های فرم با بوت استرپ:

گروه های ورودی در بوت استرپ، اجزاء بسیار انعطاف پذیر و قدرتمندی برای ایجاد مشخصه های فرم تعاملی ( interactive ) میباشند، هر چند که محدود به ورودی ( input ) از نوع متن میباشند.
در این بخش خواهید دید که چگونه میتوان با اضافه کردن متن یا دکمه ها به قبل، بعد یا در هر دو طرف input از نوع متن، ظاهر فرم را جذاب تر کرد.

ایجاد روردی های پیشوندی و پسوندی :

میتوانید متن یا دکمه ها را به قبل یا بعد هر input از نوع متن اضافه کنید.
جهت پیشوند یا پسوند کردن متن و آیکون ها به یک input :

متن یا آیکون را داخل تگ span با کلاس input-group-addon. قرار داده و آن را قبل یا بعد از تگ input بگذارید.
هر دو تگ span و input از نوع متن را داخل یک div قرار داده و کلاس input-group را بر روی آن اعمال کنید.

نکته : ویژگی پیشوندی و پسوندی بوت استرپ تنها برای input از نوع متن کاربرد دارد و تگ های select یا textarea را پشتیبانی نمیکند.

خروجی مثال بالا به شکل زیر خواهد بود :

افزونه های checkbox و radiobutton :

به طور مشابه میتوانید checkbox یا دکمه های رادیویی ( radiobutton ) را داخل افزونه گروه ورودی به جای متن قرار دهید.

خروجی مثال بالا به شکل زیر خواهد بود :

افزونه های دکمه ها برای input از نوع متن :

همچنین میتوانید به جای متن، دکمه ها را پیشوند یا پسوند کنید. دکمه ها را داخل تگ span قرار داده و کلاس input-group-btn. را به جای input-group-addon. اعمال کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

اضافه کردن دکمه های کشویی به input از نوع متن :

همچنین اگر میخواهید با یک دکمه بیشتر از یک کار را انجام دهید، میتوانید دکمه های کشویی ایجاد کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

اضافه کردن دکمه های کشویی مقطع :

به طور مشابه میتوانید دکمه های کشویی مقطع ایجاد کنید که در این حالت دکمه کشویی در کنار دیگر دکمه ها قرار میگیرد.

خروجی مثال بالا به شکل زیر خواهد بود :

تغییر ارتفاع گروه های ورودی :

همچنین میتوانید با اضافه کردن کلاس های تغییر سایز به فرم مربوطه مانند input-group-lg. یا input-group-sm. به کلاس input-group. آن را بزرگتر یا کوچکتر کنید.
محتوای داخل کلاس input-group. به طور خودکار تغییر سایز داده میشود و نیازی به تکرار کلاس های تغییر سایز برای هر مؤلفه نمی باشد.

خروجی مثال بالا به شکل زیر خواهد بود :

مطلب بعدی -> ایجاد دکمه (button) در Bootstrap

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.