Input Group و نحوه ایجاد آن در Bootstrap :
یکی از اجزای کاربردی و قدرتمند در فریمورک Bootstrap، Input Group است. Input Group یک مجموعه از المان‌ها مانند فیلد ورودی (input field)، دکمه، آیکون و غیره است که به صورت یک واحد و در کنار هم قرار می‌گیرند. با استفاده از Input Group، می‌توانیم یک ظاهر یکنواخت و جذاب برای فرم‌ها و ورودی‌ها ایجاد کنیم.
برای ایجاد یک Input Group در Bootstrap، ابتدا باید یک عنصر div با کلاس “input-group” ایجاد کنیم. سپس در داخل این عنصر، المان‌های مورد نظر را قرار داده و آن‌ها را به نحوی تنظیم کنیم که به صورت یک واحد نمایش داده شوند. به عنوان مثال، می‌توانیم یک فیلد ورودی (input field) را درون Input Group قرار داده و سپس یک دکمه را به آن اضافه کنیم.
اگر می‌خواهیم فیلد ورودی به سمت راست دکمه قرار بگیرد، کافیست به فیلد ورودی کلاس “form-control” را اضافه کنیم و به دکمه کلاس “input-group-append” را اضافه کنیم. اگر می‌خواهیم فیلد ورودی به سمت چپ دکمه قرار بگیرد، کلاس “input-group-prepend” را به دکمه اضافه کنیم. همچنین می‌توانیم آیکون‌هایی را به Input Group اضافه کنیم. برای این کار، کافیست به دکمه کلاس “input-group-text” را اضافه کنیم و آیکون مورد نظر را درون دکمه قرار دهیم.
از ویژگی‌های دیگری که در Input Group قابل استفاده است، می‌توان به ترکیب چندین Input Group با هم و استفاده از Input Group در فرم‌های افقی (horizontal forms) اشاره کرد. با استفاده از این قابلیت‌ها، می‌توانیم طرح‌بندی فرم‌ها و ورودی‌ها را به صورتی پیچیده‌تر و سفارشی‌تر ایجاد کنیم.
در نهایت، با استفاده از CSS و ترکیب Input Group با سایر کلاس‌های Bootstrap، می‌توانیم ظاهر و سبک دلخواه خود را برای Input Group تعیین کنیم و آن را با سایر اجزا و المان‌های وب سایتمان هماهنگ کنیم.
به طور خلاصه، Input Group یک ابزار قدرتمند در فریمورک Bootstrap است که به ما این امکان را می‌دهد تا المان‌های مختلف را به صورت یکپارچه در کنار هم نمایش دهیم. با استفاده از Input Group، می‌توانیم فرم‌ها و ورودی‌ها را به صورتی زیبا و کاربرپسند طراحی کنیم و تجربه کاربر را بهبود بخشیم.
