کار با تصاویر و رنگ ها در بوت استرپ
کار با تصاویر و رنگ ها در بوت استرپ ، رنگ ها در بوت استرپ (از نظر پیاده سازی) به دو دسته ی رنگ های متن و رنگ های پس زمینه تقسیم می شوند و تصاویر در بوت استرپ که در این آموزش به شما یاد خواهیم داد.
مجموعه دکمه ها و نشان ها (badge) در بوت استرپ
مجموعه دکمه ها یا button group ها همانطور که از نامشان مشخص است، مجموعه ای از چند دکمه هستند که در کنار هم قرار می گیرند. برای ساخت این دکمه ها باید از کلاس btn-group. استفاده کنید. به مثال زیر دقت کنید …
نوار پیشرفت (Progress Bar) در بوت استرپ
نوار پیشرفت یا progress bar در بوت استرپ، همانطور که از نامش پیدا است نواری است که وضعیت کاربر در یک پروسه را مشخص می کند. به عبارت دیگر به کاربر نشان می دهد چقدر در فلان عملیات پیشرفت کرده است.
spinner ها و صفحه بندی (Pagination) در بوت استرپ
spinner ها و صفحه بندی (Pagination) در بوت استرپ ، spinner ها همان علامت های بارگذاری و loading هستند و برای ساخت یک صفحه بندی ساده با بوت استرپ باید کلاس pagination استفاده کنید که در این آموزش به شما یاد خواهیم داد.
منوهای Nav در بوت استرپ
منوهای Nav (مخفف Navigation) در فارسی اسم خاصی ندارند و معمولا با نام های منوهای جهت یابی یا نوار مسیریابی و… شناخته می شوند؛ این منوها استفاده های خاصی دارند که رایج ترین آن ها نوار موقعیت سایت و منوهای سربرگی هستند.
فرم‌ها در بوت استرپ 4
فرم ها در بوت استرپ تمام عناصر فرم ها در بوت استرپ استایل دهی شده اند. بنابراین باید بدانید این استایل ها به چه شکل هستند.
Input Group ها در بوت استرپ 4
input-group در بوت استرپ در واقع یک input عادی است با این تفاوت که در کنار آن متن یا چیز دیگری قرار دارد که به کاربر در پر کردن فرم کمک می کند. برای ایجاد این نوع از input ها باید از کلاس input-group. استفاده کنید.
ساخت اسلایدر تصاویر و پنجره های modal در بوت استرپ
اسلایدرها عناصری در طراحی وب هستند که وظیفه ی نمایش خودکار یک سری از تصاویر را بر عهده دارند. modal ها پنجره هایی هستند که روی صفحه ی اصلی باز می شوند و حاوی اطلاعات مختلفی هستند.
کار با Tooltip و Popover در بوت استرپ
tooltip ها به شکل های مختلفی دیده می شوند اما اکثر آن ها کادری مستطیل شکل یا مربع شکل اند که حاوی اطلاعاتی اضافی در مورد مسئله ی خاصی می باشند. این دسته از اطلاعات معمولا به صورت توضیحات اضافی هستند که نیازی به حضور آن ها در متن اصلی نیست.
Toast ها و Scrollspy در بوت استرپ
در بوت استرپ کامپوننتی به نام toast وجود دارد که در واقع یک alert box (پیام های هشدار) است و زمانی که کاربر کاری را انجام دهد تنها برای چند ثانیه نمایش داده می شود
utility (کلاس های کمکی) در بوت استرپ
در بوت استرپ کلاس هایی از قبل تعریف شده است که به شما کمک می کند تا بدون استفاده از هیچ کد CSS ای بتوانید عناصر را سریعا استایل دهی کنید. به این کلاس ها، کلاس های کمکی (utility/helper classes) می گوییم. از آنجا که لیست این کلاس ها بسیار طولانی هستند آن ها را در دو مقاله به شما ارائه خواهیم کرد.
مدل Flex در بوت استرپ 4
مدل Flex در بوت استرپ 4 شما می توانید برای کنترل محیط و طرح کلی صفحات وب خود از کلاس های Flex در بوت استرپ 4 استفاده کنید که در این آموزش بوت استرپ شما یاد خواهید گرفت که چگونه از آن استفاده کنید.
Media Object و فیلترها در بوت استرپ 4
Media Object (شیء رسانه) به طور کلی یعنی چیزهایی مانند تصاویر و ویدیوها! اما در بوت استرپ معمولا ساختار کلی کامنت گونه ای وجود دارد که به آن Media object می گوییم. بوت استرپ راه آسانی برای ترازبندی Media object با محتوا را در نظر گرفته است؛ معمولا Media object ها چیزهایی مانند کامنت ها و توییت ها را می سازند.
سیستم Grid در بوت استرپ 4
همانطور که می دانید grid ها طراحی وب را بسیار آسان کرده اند اما اگر می خواهید از آن ها استفاده کنید دو راه دارید: نوشتن grid به صورت دستی در CSS استفاده از کتابخانه های grid یا کتابخانه هایی که grid داشته باشند (مانند بوت استرپ) توسعه دهندگان بوت استرپ نیز اهمیت grid ها را می دانند به همین دلیل یک سیستم grid در بوت استرپ را پیاده سازی کرده اند.
Grid های بسیار کوچک در بوت استرپ 4
همانطور که م یدانید گرید در بوت استرپ انواع مختلفی دارد؛ بسیار کوچک، کوچک، متوسط، بزرگ و بسیار بزرگ. ما می خواهیم در این مقاله و مقاله ی آینده این grid ها را با ذکر مثال بررسی کنیم. ابتدا یک مثال ساده برایتان می آورم؛
نکات تکمیلی سایزها در Grid
نکات تکمیلی سایزها در Grid که در قسمت قبلی در مورد اندازه های مختلف grid در بوت استرپ صحبت کرده‌ایم و در این آموزش بیشتری شما یاد خواهید گرفت.
آشنایی با List Group در بوت استرپ
List Group چیست ؟ List Group ها در واقع همان لیست های HTML هستند که بوت استرپ به شکل خاصی نمایش می دهد. این لیست ها برای نمایش مجموعه از از موارد مختلف مورد استفاده قرار می گیرند.
طراحی جدول ها در بوت استرپ
جدول ها در Bootstrap جداول ساده‌ی بوت استرپ، دارای padding کم و خطوط افقی برای جدا کردن ردیف ها هستند. برای ایجاد این استایل ساده می توانید کلاس table. را به جدول خود اضافه کنید. مثال:
سیستم Grid در بوت استرپ 4
سیستم Grid در بوت استرپ 4 سیستم grid در بوت استرپ بر اساس flexbox ساخته شده است و به شما اجازه می دهد تا 12 ستون هم در یک صفحه ایجاد کنید.
آشنایی با Bootstrap 4
Bootstrap چیست و کاربردهای آن
Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML ،CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.
تایپوگرافی در بوت استرپ 4
تایپوگرافی در بوت استرپ 4 در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم.
افکت عکس برای کلیک کردن
در این نمونه کدهای آماده برای افکت عکس در هنگام کلیک کردن آورده شده است. در اینجا از بوت استرپ و همچنین از CSS به کار رفته است. می توانید نمونه پروژه را دانلود نمائید و مشاهده نمائید.