آموزش کامپوننت های Jumbotron و Badge و Toastsدر بوت استرپ 4


آموزش کامپوننت های 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 را مشخص کنیم.


برای یادگیری این مبحث مثال‌ها و نکته‌های متعددی را در فایل ویدئویی آورده‌ایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.

 

امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، درصورت سوال و یا مشکل می‌توانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.smiley

انجمن برنامه نویسان وب


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


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات : جلسه
مدت زمان : 661 دقیقه
حجم دوره : 2/78 گیگابایت
سطح مهارت : مقدماتی تا پیشرفته
وضعیت دوره : پایان یافته
تعداد دانشجویان : 689
: میانگین امتیاز
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی آنلاین درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....