کامپوننت های بوت استرپ 4

بوت استرپ 4 تکه کدهای آماده ای به نام کامپوننت در اختیار طراحان قرار داده که به کمک آن ها می توان عناصر استاندارد و زیبایی را روی صفحه وب قرار داد.

در حقیقت کامپوننت ها مجموعه ای از کدهای نوشته شده با html و css و javascript هستند. مانند دکمه ها، تصاویر متحرک، لیست ها، منوهای افقی و عمودی و .... بطور مثال اگر بدون استفاده از کدهای بوت استرپ یک تصویر متحرک اسلایدشو روی صفحه وب قرار دهیم لازم است، غیر از کدهای html و css که باید بنویسیم از جاوااسکریپت هم برای متحرک کردن تصاویر استفاده کنیم. اما بوت استرپ فرایندهای دستی بالا را انجام داده و آن را به عنوان یک کامپوننت معرفی کرده است و فقط کافی است نحوه استفاده از آن را بدانیم.

برای استفاده از کامپوننت ها کافی است به سایت getbootstrap.com مراجعه کرده، از قسمت کامپوننت ها (components)، کامپوننت مورد نظر خود را پیدا کرده و راهنما و نحوه استفاده از کد ها را مطالعه کنیم و در اکثر موارد با کپی کردن کدهای آن و سپس تغییرات جزئی در متن و برخی خصوصیات آن به هدف مورد نظر خواهیم رسید.

در دوره آموزش بوت استرپ 4 نیز به طور کامل کامپوننت های بوت استرپ و نحوه استفاده از آنها را آموزش داده ایم.

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

• Alert

برای ارائه پیام های هشدار یا پیام های انتقادی متنی بکار می رود.

• Badge

برای نشان ها و برچسب گذاری ها مورد استفاده قرار می گیرد.

• Breadcrumb

برای آنکه موقعیت صفحه ای که در آن هستیم را مشخص کنید می توانید از این کامپوننت استفاده کنید. در این حالت جداکننده ها بطور خودکار از طریق کد css اضافه می شوند.

• Button

از استایل های دکمه (Button) برای فرم ها، گفتگوها و موارد دیگر با پشتیبانی از اندازه ها و حالت های مختلف استفاده کنید.

• Button group

گروهی از چندین دکمه با هم روی یک خط است که می توانید در موارد مختلف از آن استفاده کنید.

• Card

برای داشتن یک محتوای انعطاف پذیر و گسترده با انواع گزینه های مختلف بکار می رود.

• Carousel

برای ایجاد اسلایدشو از تصاویر و اسلاید های متنی مورد استفاده قرار می گیرد.

• Collapse

با این کامپوننت می توانید یک محتوا را با کلیک روی یک دکمه ظاهر یا پنهان کنید.

• Dropdowns

برای نمایش کمبوباکس ها منوهای آبشاری از آن استفاده می شود.

• Forms

برای ایجاد فرم های دریافت اطلاعات از کاربران می توان از انواع مختلف آن استفاده کرد.

• Input group

شکل ظاهری فرم های دریافت اطلاعات را با یک متن یا آیکون زیباتر و با مفهوم تر می کنند.

• Jumbotron

کامپوننتی انعطاف پذیر برای نمایش استایل محتوایی hero

• List group

برای نمایش لیستی از محتوا مورد استفاده قرار می گیرد.

• Media object

برای ساخت اجزای بسیار تکراری مانند نظرات وبلاگ ها، توییت ها و موارد مشابه مورد استفاده قرار می گیرد.

• Modal

برای افزودن گفتگو به سایت خود به صورت lightbox و یا اعلان های کاربر استفاده می شود.

• Navs

برای نمایش منوها یا  navigation ها از این کامپوننت استفاده می شود.

• Navbar

برای ایجاد منوهای افقی واکنش گرا از این کامپوننت استفاده می شود.

• Pagination

برای صفحه بندی اطلاعات معمولا جداول از این کامپوننت استفاده می شود.

• Popovers

با کلیک روی یک دکمه یک منو به صورت popover نمایش داده می شود.

• Progress

برای نمایش میزان پیشرفت کاربرد دارد.

• Scrollspy

چنانچه بخواهیم اجزای گروه را بر اساس موقعیت پیمایش لیست کنیم تا مشخص شود کدام پیوند در حال حاضر در حال نمایش است، از این کامپوننت استفاده می کنیم.

• Spinners

حالت loading… یا  waiting… را برای یک دکمه ایجاد می کند.

• Toasts

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

• Tooltips

برای افزودن راهنماهایی به فرم ها یا دکمه ها  مورد استفاده قرار می گیرد.

در اینفوگرافیک زیر می توانید خلاصه این مقاله را مشاهده نمایید.