آموزش بوت استرپ 4 Bootstrap

بوت استرپ یک چهارچوب کاری رایگان طراحی سمت کاربر یا فرانت اند (Front end) است که به منظور طراحی سریع تر و ساده تر برنامه ها و وب سایت های اینترنتی ایجاد شده است.

آموزش مقدماتی سیستم گرید بندی (Grid System) در بوت استرپ 4

آموزش کار با متن (Text) و فن چاپ Bootstrap 4، در این درس به آموزش فرمت کردن نوشته و تگ ها و کلاس های خاص بوت استرپ 4 برای کار با متن پرداخته شده است.

چهارچوب کاری بوت استرپ4 دارای تعدادی کلاس متنی است که با توجه به نام آن ها، رنگ های مفهومی و مرتبط به نوشته و سایر عناصر در صفحه می دهند.

در این درس به آموزش ساخت انواع جدول در بوت استرپ 4 و قالب بندی و رنگ بندی Table و عناصر آن در Bootstrap 4 پرداخته شده است.

در این مقاله آموزشی به آموزش کار با عکس و تصویر Image در بوت استرپ 4 bootstarp ، نحوه نمایش عکس و چیدمان تصویر در صفحه وب سایت پرداخته شده است.

یک Jnmbotron در بوت استرپ 4، یک جعبه بزرگ خاکستری رنگ ایجاد می کند که می توانید برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته، از آن استفاده کنید.

چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.

چهارچوب کاری بوت استرپ 4 ، چندین استایل و رنگ مختلف دکمه دارد که از هر کدام می توانید برای منظور خاصی استفاده کنید. مثلا یک دکمه برای عملیات تأیید مناسب است و دکمه دیگر برای اعلام خطر به کاربر.

چهارچوب کاری بوت استرپ 4، این امکان را فراهم کرده تا چندین کنترل را با هم در یک گروه قرار و مثلا آن ها را در یک خط کنار هم نشان دهید.

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

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

برای ایجاد یک شکلک چرخنده (Spiner) یا آیکون لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.

برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ <ul> با کلاس Pagination. ایجاد نمایید. سپس به هر یک از <li> درون لیست، کلاس .page-item داده و برای لینک ها هم (تگ <a> یا دکمه)، کلاس .page-link تعیین کنید.

برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ <ul> با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ <li> با کلاس list-group-item، تعیین خواهد شد.

یک کارت (Card) در بوت استرپ 4، یک جعبه یا Box با خطوط حاشیه به دور آن و مقداری حاشیه درونی یا Padding به دور محتویاتش است.

Dropdown یک منوی کرکره ای، قابل کلیک و باز شونده است که به شما امکان می دهد تا یک مقدار را از لیستی از مقادیر از پیش تعریف شده، انتخاب نمایید.

آیتم های باز و بسته شونده (Collapse) در مواقعی که می خواهید حجم زیادی محتوا یا Content را مخفی یا مجددا نمایان کنید، کاربرد دارند.

برای ایجاد یک منوی Narbar افقی، بایستی کلاس nar. را به المنت <ul> مادر لیست اضافه کرده و برای هر آیتم <li> آن کلاس nar-item. را تعیین نمایید.

Navigation Bar یک منوی مسیر دهی و دسترسی به قسمت های مختلف وب سایت است که در قسمت بالایی صفحه (Header) قرار می گیرد.

بوت استرپ 4، کلاس ها وامکانات ویژه ای برای کار با فرم ها (تگ <form>) فراهم کرده است.

بوت استرپ 4 از کنترل های فرم و ورود اطلاعات زیر، پشتیبانی می کند : ورود متن input، ورود متن چند خطی textarea،کنترل انتخاب گزینه checkbox، کنترل های رادیویی radio، کنترل کادر کشویی select.

المنت با کلاس Input- Group یک عنصر دربرگیرنده (Container) است که به وسیله آن می توان سایر کنترل های درون آن گروه را با اضافه کردن آیکون، قرار دادن متن یا دکمه در جلو یا انتهای کنترل به عنوان متن راهنما و کمکی، گسترش داد.

چهار چوب کاری بوت استرپ 4، تمامی کنترل های معمول و رایج HTML 5 را با ظاهر و استایل جدیدی سفارشی سازی کرده تا به جای کنترل های پیش فرض از آن ها استفاده کند.

یک اسلایدر یا Carousel در بوت استرپ 4، یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است.

کامپوننت Modal در چهارچوب کاری بوت استرپ 4، یک کادر نمایش popup است که در بالای صفحه جاری ظاهر شده و نمایش داده می شود.

کامپوننت عنوان راهنما یا tooltip یک کادر کوچک popup است که در هنگام عبور موس از روی یک المنت، ظاهر شده و معمولا توضیحاتی راجع به آن ارائه می دهد.

Popover یک کادر ظاهر شونده pop up است که در هنگام کلیک کاربر بر روی یک المنت، ظاهر می شود. با tooltip دو فرق عمده دارد : یکی این که با کلیک بر روی المنت فعال می شود نه عبور موس از روی آن و دوم این که می تواند حاوی محتویات بیشتری باشد.

کامپوننت Toast همانند یک کادر اخطار cilert box است با این تفاوت که فقط برای چند ثانیه و در کنار المنت موردنظر نمایش داده می شود. این کامپوننت در هنگام بروز یک رویداد، مثلا کلیک کاربر بر روی یک دکمه، ارسال یک فرم و ... ظاهر و فعال می شود.

از کامپوننت Scrollspy در Bootstrap 4 برای ایجاد لینک های پرشی در صفحات وب استفاده می شود. در صورت کلیک بر روی هر لینک محتوای مرتبط به آن لینک در صفحه یا عنصر دربرگیرنده، نمایش داده خواهد شد و صفحه به آن نقطه پرش می کند.

بوت استرپ 4، دارای تعداد زیادی کلاس کاربردی / کمکی موسوم به Utility Classes است که به شما امکان می دهد بدون استفاده از هیچ کد یا استایل CSS، قالب مورد نظرتان را به المنت هدف، اعمال کنید.

آموزش روش Flex در Bootstrap 4,بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

بوت استرپ 4، دارای کتابخانه آیکون (Icon) مختص به خود نیست (بر خلاف بوت استرپ 3 که مجموعه Glyphicons را ارائه کرده بود و دیگر در Bootstrap 4 پشتیبانی نمی شود).

بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.

بوت استرپ دارای کامپوننتی برای سرچ یا فیلتر اطلاعات نیست و کلا انجام آن در Bootstrap امکان پذیر نیست. اما با ترکیب کلاس های بوت استرپ برای دیزاین المنت ها و استفاده از کدهای jQuery می توان فیلترهای جستجو (Search Filter) های خاصی ایجاد نمود.

سیستم گریدبندی (Bootstrap 4 Grid System) بوت استرپ 4 به شما اجازه می دهد تا 12 خانه یا ستون (column) در یک سطر داشته باشید.

در این درس، یک جدول گرید سیستم (Grid System) ساده ایجاد کرده ایم، که ستون های آن در صفحات موبایل بسیار کوچک، به صورت تمام عرض (Stacked) بر روی هم قرار می گیرند، ولی در صفحات نمایش بزرگتر به صورت افقی در آمده و در یک سطر کنار هم تنظیم می شوند.

در این درس به بررسی صفحات بسیار کوچک (Extra Small) و آموزش مثال های عملی کار با آن خواهیم پرداخت.

در این درس به آموزش کار با صفحات موبایلی (Small) و ارائه مثال های عملی گریدبندی ستون ها (Columns) در آن ها خواهیم پرداخت .

در این درس، به آموزش کار با دستگاه های متوسط (Medium) مثل تبلت ها و ارائه مثال های عملی گرید بندی ستون ها (Columns) در آن ها خواهیم پرداخت.

در این درس قصد داریم تا نحوه طراحی گرید سیستم برای دستگاه های بزرگ مثل لپ تاپ ها را به وسیله بوت استرپ 4، آموزش دهیم.

در این درس، به آموزش مثال گریدبندی ستون ها در صفحات بسیار بزرگ (کامپیوترهای رومیزی و مانیتورهای عریض) به وسیله Bootstrap 4 پرداخته ایم.

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

در این درس، یک قالب ریسپانسیو Responsive Template نمونه با بوت استرپ 4 ایجاد کرده ایم.

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

در این درس به آموزش کار با کلاس ها، خواص و متدهای JS Alert در Bootstrap 4 خواهیم پرداخت. همانطور که می دانید از Alert در جاوا اسکریپت، برای نمایش یک کادر هشدار Alert Box به کاربر استفاده می شود.

در این درس به آموزش کار با کلاس، خواص و متدهای Js Button در Bootstrap 4 خواهیم پرداخت. همانطور که می دانید از Button در جاوا اسکریپت برای ایجاد دکمه و لینک استفاده می شود.

در این درس به آموزش کار با کلاس، خواص و متدهای JS Carousel در Bootstrap 4 خواهیم پرداخت. همانطور که می دانید از Carousel در بوت استرپ 4، برای ایجاد اسلایدر استفاده می شود.

در این درس، به آموزش کار با کلاس، خواص و متدهای JS Collapse در بوت استرپ 4، خواهیم پرداخت. همانطور که می دانید از Collapse در Bootstrap 4 برای نمایش و مخفی کردن محتوا و عناصر استفاده می شود

در این درس، به آموزش کار با کلاس ها، خواص و متدهای Java Script JS DropDown در بوت استرپ 4، خواهیم پرداخت. همانطور که می دانید از dropdown در بوت استرپ 4، برای نمایش کادرهای کشویی به کاربر، استفاده می شود.

در این درس، به آموزش کار با کلاس ها، خواص و متدهای JavaScript Modal در Bootstrap 4، خواهیم پرداخت. از کادر محاوره ای Modal برای نمایش یک Alert Box یا پیام هشدار و اطلاعات به کاربر در صفحه استفاده می شود.

کامپوننت Popover بسیار شبیه کادر راهنمای ToolHip است. کادر Popover یک جعبه یا box است که در هنگام کلیک کاربر بر روی یک المنت، ظاهر می شود. تفاوت مهم Popover و کادر toolhip این است که کادر Popover می تواند محتوای بیشتری نشان دهد.

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

همانطور که می دانید، Tab یا لبه ها، برای دسته بندی محتویات در لبه های مختلف استفاده می شود که کاربر در هر لحظه می تواند یکی از لبه ها را مشاهده کرده و به لبه بعدی یا قبلی برود. در این درس، به آموزش کامل کلاس ها، خواص و متدهای JS Tab در Bootstrap 4 پرداخته ایم.

کامپوننت Toast همانند یک کادر هشدار Alert Box است، که در هنگام بروز یک اتفاق (مثل کلیک کاربر بر روی یک دکمه، ارسال فرم و ..)، برای چندین ثانیه نمایش داده می شود و حاوی اطلاعات و پیام است.

کادر محاوره ای Tooltip یک جعبه pop-up کوچک است که در هنگام عبور موس از روی یک المنت ظاهر شده و معمولا برای نمایش پیام، اطلاعات یا اخطار به کاربر از آن استفاده می شود.