آموزش کامپوننت های Jumbotron و Badge و Toastsدر بوت استرپ 4
یادگیری کامپوننت های jumbotron ,badg و toasts در بوت استرپ 4:
در این بخش از آموزش، با کامپوننتهای jumbotron ,badg و toasts در بوت استرپ 4 و نحوه استفاده از آن ها آشنا میشوید.
jumbotron: در واقع یک باکس خاکستری رنگ است، که معمولا برای تبلیغات استفاده میشود. هدف اصلی آن جلب توجه و برجسته کردن اطلاعات خاصی میباشد. محتوای آن میتواند شامل دکمه، متن و یا تصویر باشد.
- jumbotron-fluid: این ویژگی jumbotron را به صورت تمام صفحه نمایش میدهد. همچنین می توانیم برای نمایش دادن jumbotron در وسط صفحه از کلاس container استفاده کنیم.
- bg-color: برای تعیین رنگ پس زمینه می باشد. به طور پیش فرض رنگ پس زمینه خاکستری می باشد.
badg: برای نشان دادن یک علامت و کلمه خاص یا یک عدد استفاده میشود. مثلا برای نشان دادن تعداد کاربران. برای استفاده از badge از تگ span استفاده میکنیم. همچنین میتوانیم badge را داخل دکمهها قراردهیم.
- badge-color: برای تعیین رنگ badge از این کلاس استفاده میشود. مثلا: badge-danger
- badge-pill: برای تغییر شکل badge به دایره استفاده میشود.
toasts: در واقع همان Alert میباشد. با این تفاوت که به صورت زمان دار میباشد و به صورت اتوماتیک بسته میشود. به طور پیش مدت زمان آن نیم ثانیه میباشد.
- toast-header: برای تعیین قسمت بالای toast یا هدر استفاده میشود. شامل محتوای متنی، تصویری و ... میباشد.
- toast-body: برای تعیین محتوای متنی toast استفاده میشود.
- data-delay: مدت زمان نمایش toast را مشخص میکند و برحسب میلی ثانیه میباشد.
- position: با استفاده از position میتوانیم محل قرار گرفتن toast را مشخص کنیم.
برای یادگیری این مبحث مثالها و نکتههای متعددی را در فایل ویدئویی آوردهایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.
امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، درصورت سوال و یا مشکل میتوانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.
انجمن برنامه نویسان وب
جلسات دوره
مهدی عباسی
مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مطالعه بیشتر رزومه
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.