Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و سوم bootstrap : نحوه ی ساخت گروه ورودی در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

27 , خرداد , 1399

Work time-rafiki

زمان تقریبی مطالعه :

4 دقیقه

در قسمت بیست و سوم از آموزش‌های بوت استرپ ۴ به این خواهیم پرداخت که گروهی از ورودی را طراحی کنیم. انواع فرم‌های ورودی در این قسمت به شما بزرگواران آموزش داده خواهد شد.

پیشنهاد می‌شود برای درک بهتر این جلسه، قسمت‌های پیشین دوره‌ی بوت استرپ ۴ را مطالعه فرمایید.

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

شما با استفاده از کلاس.input-group می‌توانید یک راهنما به فرم‌های خود اضافه کنید. این فرم‌ها متنی یا آیکونی خواهند بود.

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

برای استفاده از یک راهنمای متنی خاص از کلاس .input-group-text باید استفاده کرد.

برای درک بهتر این موضوع به سورس کد زیر توجه کنید.

در رابطه باکلاس.mb-3 در ویدیوی قبلی صبحت کردیم که به خاطر فاصله گرفتن از پایین از این کلاس استفاده می‌شود.

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

برای استفاده از ابعاد مختلف می‌توانید از کلاس‌های.input-group-sm برای کوچک کردن گروه ورودی و کلاس.input-group-lg برای بزرگنمایی استفاده کرد.

برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

ورودی‌های چندگانه و راهنماها

در سورس کد زیر دو مورد ورودی‌های چندگانه و راهنماهای چندگانه را قرار داده‌ایم:

گروه فرم همراه با چک باکس یا دکمه‌های رادیویی

شما می‌توانید بجای متن از چک باکس و دکمه‌های رادیویی استفاده کنید. برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

گروه ورودی به همراه دکمه

گروه ورودی به همراه لیست بازشونده

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

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

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

برای درک بهتر این موضوع به سورس کد زیر توجه کنید:

برای مطالعه موارد بیشتر می‌توانید به سایت getbootstrap مراجعه کنید.

پیشنهاد می‌شود برای مطالعه موارد بیشتر به دوره آموزش بوت استرپ ۴ مراجعه فرمایید.

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و سوم bootstrap : نحوه ی ساخت گروه ورودی در بوت استرپ ۴"

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *