Bootstrap چیست؟

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

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

اهمیت و کاربرد بوت استرپ

دلایل زیادی برای استفاده از Bootstrap برای توسعه وب سایت وجود دارد. فریمورک Bootstrap نه تنها توسط توسعه دهندگان مستقل وب سایت بلکه توسط شرکت‌ها نیز استفاده می‌شود. زمینه اصلی کاربرد بوت استرپ، توسعه و طراحی سایتهای مختلف است. در میان سیستم‌های مشابه (Foundation ، UIkit ، Semantic UI ، InK و غیره) ، فریمورک Bootstrap محبوب‌ترین فریمورک است.

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

بوت استرپ توابع و دستورات مناسب را ایجاد کرده و در اختیار برنامه نویسان قرار می‌دهد. این کار باعث می‌شود نه تنها زمان طراحی و ایجاد وب سایت کاهش یابد بلکه نتیجه نهایی مطابق با استانداردهای جهانی باشد. به همین دلیل بوت استرپ از اهمیت بالایی در زمینه طراحی و تولید وب سایت برخوردار است.

مهم‌ترین کاربرد بوت استرپ این است که با استفاده از آن، توسعه دهندگان وب می‌توانند بر کار توسعه تمرکز کنند، بدون اینکه نگران طراحی باشند و به سرعت یک وب سایت زیبا را طراحی و راه اندازی کنند.

مهم‌ترین مزایای بوت استرپ 

بوت استرپ با استفاده از طرح‌ها و قالب‌های آماده، طراحی سایت را بسیار آسان می‌کند. در ادامه مهم‌ترین مزایای چارچوب بوت استرپ معرفی شده‌اند.

سازگاری با مرورگرهای مختلف

سایت‌های ایجاد شده با Bootstrap به طور یکسان در تمام دستگاه‌های مختلف و همچنین مرورگرهای مختلف نمایش داده می‌شوند.

راحتی در استفاده

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

یادگیری آسان bootstrap

یادگیری بوت استرپ نیز بسیار آسان است. علاوه بر آن اکثر کدهای این چارچوب از قبل نوشته شده و می‌توانید برای طراحی مورد استفاده قرار دهید.

اجزای موجود در آن

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

پس بوت استرپ (Bootstrap) یک فریم ورک CSS رایگان و متن باز است که برای توسعه وب واکنش‌گرا (Responsive) و Mobile-First ایجاد شده است. منظور از طراحی Mobile-First این است که برای ایجاد یک وب‌سایت، طراحی نسخه موبایل آن اولویت دارد. به این ترتیب، با استفاده از طراحی Mobile-First می‌توان ابتدا وب سایت را برای صفحه نمایش‌های کوچک تلفن همراه آماده کرد و به مرور زمان وب سایت را برای صفحه نمایش‌های بزرگ‌تر نیز توسعه داد. Bootstrap دارای قالب‌های طراحی شده‌ای است که این قالب‌ها مبتنی بر CSS و جاوا اسکریپت هستند.

ساده‌ترین تعریف ممکن برای بوت استرپ این است که می‌توان از Bootstrap به عنوان یک ابزار جامع برای توسعه وب استفاده کرد. بوت استرپ حاوی کتابخانه‌های پیش‌پردازنده Less ،CSS ،HTML و جاوا اسکریپت است و برنامه‌نویسان می‌توانند به سادگی ابزارهای دلخواه خود را از این کتابخانه جامع دریافت کنند.

در بوت استرپ از چه زبان‌هایی استفاده می‌شود؟

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

• جاوا اسکریپت: جاوا اسکریپت (JavaScript) یا همان JS، یک زبان سطح بالای تفسیری (Interpreted) است که با استفاده از آن می‌توان صفحات وب تعامل‌پذیر ساخت. امروزه اکثر وب‌سایت‌ها از این زبان برنامه نویسی به همراه HTML و CSS به عنوان سه فناوری اساسی تشکیل‌دهنده وب استفاده می‌کنند.
• HTML :HTML برگرفته از عبارت «Hypertext Markup Language» است و به عنوان زبان نشانه‌گذاری استفاده می‌شود. معمولا صفحات وب شامل متن‌ها، عکس‌ها و بخش‌های مختلفی هستند که می‌توان با کمک تگ‌ها و کدهای HTML یک ساختار مشخص برای این صفحات وب ایجاد کرد.

که ما در آکادمی آنلاین قاسمی بهترین و کامل ترین سر فصل های HTML  را برای شما گردآوری کردیم که کاملا اصولی ، درس به درس و پروژه محور می باشد .

• CSS : CSS از عبارت «استایل‌شیت‌های آبشاری» (Cascading Style Sheets) برگرفته شده است و با استفاده از آن می‌توان ظاهر مناسبی برای صفحه‌های وب ایجاد کرد. در واقع صفحه‌آرایی، استایل‌دهی و زیباسازی صفحات وب به عنوان کاربردهای CSS به حساب می‌آیند.

طراحی ریسپانسیو با Bootstrap

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

سیستم Grid صفحه را به ۱۲ ستون تقسیم می‌کند و شما می‌توانید محتوای وبسایت خود را با استفاده از این ستون‌ها کنار هم قرار دهید و نحوه چینش آنها در دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل و…) را تعیین کنید.

دیگر کاربردهای بوت استرپ

Bootstrap تنها در ریسپانسیو کردن صفحات نیست که کاربرد دارد بلکه آپشن‌های دیگری هم در اختیار شما می‌گذارد. این فریم ورک محبوب تقریبا فکر همه چیز را کرده است و برای هرعنصری که شما در وبسایت خود به آن نیاز دارید style زیبایی تدارک دیده است!

برای مثال می‌توان به ساخت دکمه‌هایی با رنگ‌های مختلف، تنها با اضافه کردن کلاس‌های از قبل تعیین شده، اشاره کرد.

معایب Bootstrap

در کنار مزیت‌های مهم گفته شده برای بوت استرپ برخی از معایب نیز وجود دارد که باید به آن‌ها نیز توجه داشته باشید.

قالب‌های مشابه

سایت‌های توسعه یافته با Bootstrap مشابه یکدیگرند، ساختار یکسان، دکمه‌ها و بخش‌های مختلف شباهت زیادی به یکدیگر دارند. با توجه به آنچه گفته شد باید با همه ابزارهای ارائه شده توسط Bootstrap به طور کامل آشنایی داشته باشید تا از حداکثر آن‌ها در توسعه وب‌سایت استفاده کنید. این که همه سایت‌های طراحی شده با این فریم ورک شبیه یکدیگر هستند، باعث می شود استفاده از آن برای اجرای برخی از پروژه‌ها مناسب نباشد.

عدم سازگاری با مرورگرهای قدیمی‌تر

از آنجا که بوت استرپ سعی می‌کند با زمان هماهنگ باشد و دائماً به روزرسانی می‌شود، در نتیجه، ممکن است سایت‌های موجود در بوت استرپ در مرورگرهای قدیمی به درستی نمایش داده نشوند.

معرفی less:

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

LESS چیست؟

LESS مخفف عبارت Leaner Style Sheets و یک زبان پیش‌پردازنده برای CSS است. این تکنولوژی به زبان JavaScript نوشته شده است اما برای کارکردن با آن نیازی به دانستن جاوا اسکریپت ندارید.

Less قادر است قابلیت‌های مختلفی را به CSS اضافه کند تا بتوانیم با CSS‌ مثل یک زبان برنامه‌نویسی سمت سرور برخورد کنیم. برای مثال در CSS نمی‌توانیم از توابع یا متغیرها استفاده کنیم اما LESS این قابلیت‌ها را ممکن می‌سازد.

قابلیت‌های LESS

۱- تعریف متغیر

همانطور که می‌دانید در CSS نمی‌توان متغیر تعریف کرد اما گاهی لزوم وجود متغیرها احساس می‌شود. این قابلیت در LESS وجود دارد و می‌توان از آن استفاده کرد.

یکی از مزایای کلیدی استفاده از Less، معرفی متغیرها است. متغیرها به شما این امکان را می‌دهند که مقادیر قابل استفاده مجدد مانند رنگ‌ها، فونت‌ها را ذخیره کنید و در آینده در همه جای فایل خود (صد ها هزاران بار) از آنها استفاده کنید. این باعث می‌شود که تغییرات کلی را با تغییر مقدار متغیر در یک مکان آسان کنید، نه اینکه هر نمونه‌ای را که از آن مقدار استفاده می‌شود، پیدا کنید و به‌روزرسانی کنید. این نه تنها در زمان صرفه جویی می کند، بلکه به حفظ ثبات در فایل های CSS شما نیز کمک می کند.

۲- نوشتار تودرتو

یکی دیگر از ویژگی های Less نوشتن selector های تو در تو است. یعنی می توانید انتخابگرهای CSS را در داخل یکدیگر قرار دهید. این به سازماندهی و ساختار کد شما کمک می کند و آن را خواناتر و قابل نگهداری تر می کند. همچنین می‌توانید از انتخابگر والد (&) برای اشاره به عنصر والد استفاده کنید، که می‌تواند برای ایجاد استایل های پیچیده یا مدیریت حالت‌های خاص یک عنصر مفید باشد.

۳- استفاده از عملگرها

خیلی هیجان‌انگیز است اگر بدانید که با LESS می‌توان تمام عملیات‌های اصلی را انجام داد و حاصل را در متغیری ذخیره کرد!

۴- استفاده از توابع

در این زبان می‌توان برای ساده سازی، کاهش کدنویسی و انجام محاسبات از توابع مختلفی استفاده کرد.

معرفی میکسین ها:

دستورات CSS را یک جا بنویس ، در همه انتخابگر های CSS استفاده کن!

Less همچنین میکسین ها (Mixins) را معرفی می کند که بلوک های قابل استفاده مجدد از کد CSS هستند. Mixins به شما این امکان را می دهد که مجموعه ای از استایل ها را تعریف کنید و سپس آنها را روی عناصر یا انتخابگرهای مختلف اعمال کنید. این امر قابلیت استفاده مجدد کد را ارتقا و حجم کد را کاهش می دهد. به عنوان مثال، می‌توانید یک میکسین را برای یک طرح یا انیمیشن خاص ایجاد کنید و آن را بر روی چندین عنصر اعمال کنید بدون اینکه نیازی به نوشتن کدهای مکرر داشته باشید.

تنها فرق متغیر ها و میکسین ها :

میکسین ها : استفاده مجدد از مجموعه ای از دستورات و پراپرتی های CSS (ویژگی های color ، width, height و…)

متغیر ها : استفاده مجدد از مقادیر پراپرتی های CSS (کد رنگ یا اندازه فونت)

مزایای استفاده از LESS

• قابلیت اجرا در سمت سرور و کاربر
• استفاده از mixin برای افزایش سرعت کدنویسی
• اجرای دستورات تودرتو
• نوشتن کدهای CSS با قابلیت یک زبان برنامه‌نویسی
• اجرای استایل و کار بر روی متغیر‌‎ها

چرا باید از Less استفاده کنیم؟

1. 1. جلوگیری از تکرار کد های css
   2. منظم بودن کد های استایل دهی
   3. ابزاری برای مدیریت راحت ترcss
   4. صرفه جویی در زمان
   5. استفاده از متغیر
   6. ایجاد  توابع
   7. استفاده از توابع رنگی
   8. استفاده ار حلقه ها
   9. استایل دهی تو در تو برای عناصر

Sass چیست؟

Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازمان‌دهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.

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

Sass چیست ؟

• مخفف Syntactically Awesome Stylesheet است.
• یک اکستنشن CSS (extension) است.
• یک پیش‌پردازشگر CSS (pre-processor) است.
• با تمام نسخه‌های CSS کاملاً سازگار است.
•  تکرار کردن کدهای CSS را کاهش می‌دهد. بنابراین باعث صرفه‌جویی در زمان می‌شود.
• Sass توسط Hampton Catlin طراحی شده است. Natalie Weizenbaum در سال ۲۰۰۶ نیز، آن را توسعه داده است.
• دانلود و استفاده از Sass هم رایگان است.

Sass یک پیش‌پردازنده (Preproccesor) برای زبان CSS است. در واقع Sass آمده است تا محدودیت‌ها و ضعف‌های زبان CSS را جبران کند و با اضافه کردن ویژگی‌های جالبی به آن، نوشتن کد‌های CSS را راحت‌تر و سریع‌تر سازد.

می‌توان گفت که Sass محبوب‌ترین و پرکاربرد ترین پیش‌پردازنده برای CSS است. برای اضافه کردن ساس به پروژه خود تنها کافیست تا نرم‌افزار کامپایل کدهای Sass به CSS را نصب کنید و سپس به جای پسوند .css از پسوند‌های .sass و .scss برای فایل‌های استایل استفاده کنید.

Sass دو Syntax مختلف با نام‌های sass و scss برای نوشتن کدها به این زبان در نظر گرفته است که استفاده از آنها فقط و فقط به راحتی و سلیقه شما بر می‌گردد. بصورت کلی می‌توان گفت کدها در sass خلاصه‌تر و راحت‌تر از scss نوشته می‌شوند.

باید دقت داشته باشید که Syntax موردنظر خود را در ابتدای کار مشخص کنید. اگر با sass راحت‌تر هستید باید پسوند فایل‌ها هم .sass باشند. اما اگر با scss راحتید باید پسوند فایل‌ها را .scss قرار دهید.

چرا از Sass استفاده کنیم 

Sass برای یک  syntax ساده برای یادگیری، شیوه نامه های سازماندهی شده، و پایدار شناخته شده است.

اما یادگیری هر چیزی به زمان و تلاش نیاز دارد. اگر قبلاً CSS را می‌دانید، چرا باید برای تسلط بر Sass وقت بگذارید.

۱.استایل شیت ما را سازماندهی و modularizes می کند:  Sass قادر است کاری را که CSS انجام می دهدبا حجم کد کمتر انجام دهد. از این رو، کارآمدتر است و بهره وری توسعه دهندگان را افزایش می دهد.

۲.یادگیری syntax آسان: برای توسعه دهندگان CSS، استفاده از Sass آسان است زیرا عملکرد و بسیاری از نحوها با CSS یکسان هستند.

۳.کد قابل استفاده مجدد: با ویژگی های منحصر به فرد Sass، کد را می توان در مکان های مختلف از طریق روش های متمایز استفاده مجدد کرد که باعث صرفه جویی در زمان می شود.

۴.Divide & Conquer: وقتی پروژه بزرگ می شود، استفاده از CSS در یک فایل یا ۲۰ فایل پیشنهاد نمی شود. با استفاده از تابع import در Sass، نگهداری و پیمایش در بخش‌های مختلف شیوه نامه آسان‌تر است.

۵.سفارشی کردن بوت استرپ: با دانش Sass، ما همچنین می توانیم بوت استرپ را سفارشی کنیم. بسیاری از فریم ورک های معروف front-end توسط این پیش پردازنده از جمله Bootstrap &Foundation ایجاد شده اند.

۶.جامعه توسعه‌دهنده بزرگ و مستند: برای استفاده از زبان توسط توده‌ها، جامعه توسعه‌دهنده و مستندات نقشی حیاتی دارند. خوشبختانه، Sass ما را در این بخش پوشش داده است و منابع زیادی برای متخصص شدن هر کسی در اختیار دارد

نصب Sass

جهت شروع با Sass، در ابتدا Sass را بر روی سیستم خود نصب کنید. Sass نصب به صورت خط فرمان و یا با استفاده از نرم افزاری همچون npm، yarn و… در دسترس است. حال برای نصب Sass، مراحل زیر را انجام میدهیم:

۱)نصب Node.js

Sass بر پایه Node.js شکل گرفته است، در همین راستا باید Node.js را روی سیستم خود نصب داشته باشیم.

۲)نصب Sass با استفاده از npm

npm (Node.js Package Manager) بهترین روش‌ برای نصب Sass است. بعد از نصب Node.js، می‌توان دستور زیر را در ترمینال خود وارد کنید:

npm install -g sass

این دستور Sass را برای استفاده در سطح سیستم عامل  (global) نصب می‌کند. جهت تأیید نصب Sass، دستور پایین را اجرا میکنیم. در صورتی که نسخه Sass را باید بصورت درست مشاهده کردید، نصب Sass با موفقیت انجام گردیده است.

sass --version

کامپایل کردن Sass به CSS

بعد از نوشتن کدهای Sass، شما باید آنها را به CSS ترجمه کنید. برای این کار می توانید از ابزارهای کامپایل Sass مانند خط فرمان Sass و یا ابزارهای بصری مانند CodeKit و Prepros استفاده کنید.

برای کامپایل کردن Sass به CSS، می‌توانید از چند روش مختلف استفاده کنید:

استفاده از دستور sass در خط فرمان

میتوانید از دستور sass در خط فرمان استفاده کنید تا فایل Sass خود را به فایل CSS تبدیل کنید. برای این کار، به پوشه حاوی فایل Sass خود بروید و سپس دستور زیر را وارد کنید:

sass input.scss output.css

در این دستور، input.scss  نام فایل Sass شماست و output.css نام فایل CSS خروجی شماست. Sass به طور خودکار فایل CSS خروجی را ایجاد می‌ کند و کدهای CSS شما در آن قرار خواهند گرفت.

مقایسه Sass و Scss

رایج ترین سینتکس مورد استفاده به عنوان “SCSS” شناخته می‌شود (برای “Sassy CSS”). Scss، سینتکس CSS ای که به طور معمولی نوشته می‌شود را می‌گیرد و ویژگی‌های فوق العاده‌ای را که همراه Sass است به آن می‌دهد. این بدان معناست که هر شیوه‌نامه CSS3 (CSS Stylesheet) معتبر، به اندازه‌ی SCSS معتبر است. فایل‌های SCSS دارای پسوند .scss هستند. این سینتکس برای توسعه‌دهندگان بسیار کاربردی است. زیرا تبدیل استایل‌های CSS معمولی به Scss را بسیار آسان‌تر می‌کند.

/* SCSS */
$primary-color: #۳bbfce;
$secondary-color: #ff8700;
.content {
  background-color: $primary-color;
  color: darken($secondary-color, ۹%);
}

سینتکس دوم (که سینتکس قدیمی‌تری است) Sass نام دارد. Sass برای جذاب‌تر شدن CSS ایجاد شده است. همچنین با حذف آکولادها (curly-braces) و سمی‌کالن‎ها (semi-colons) کدهای CSS را کارآمدتر کرده است. Sass از تورفتگی خطوط برای تعیین بلوک‌ها استفاده می‌کند. فایل‌های موجود در این سینتکس، از پسوند .sass استفاده می‌کنند.

/* SASS */
$primary-color: #۳bbfce
$secondary-color: #ff8700
.content-navigation
  background-color: $primary-color
  color: darken($secondary-color, ۹%)

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

اما در واقع شما خودتان باید بدانید که چه چیزی برای شما مناسب‌تر است. همچنین کدام یک مناسب الگوی نوشتن کد شما است.

برخی از توسعه‌دهندگان علاقه‌ای به سینتکس Sass ندارند. زیرا به استفاده از آکولادها و سمی‌کالن‌ها  عادت دارند. اما Scss همیشه در کارهای تیمی مفید بوده است.

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

در نهایت 

استفاده از sass نیاز به دوره آموزشی مناسب دارد . در آکادمی آنلاین قاسمی دوره آموزشی کامل برای این دوره ارزشمند به صورت کاملا درس به درس و جامع  در اختیار شما دانشجویان  قرار گرفته است و میتوانید در یک دوره کوتاه چندساعته ، این پیش پردازنده را به راحتی یادبگیرید اما توجه داشته باشید که پیشنیاز ورود به دوره آموزش sass ، تسلط کامل ( نه حتی متوسط ) به زبان css است .

کار کردن با این پیش پردازنده بسیار لذت بخش است و اگر در دوره جامع sass که داخل سایت آکادمی آنلاین قاسمی ارائه شده است شرکت داشته باشید ، خواهید دید که کدنویسی در بستر این ابزار بسیار لذت بخش است چرا که طراحی را به سمت و سوی دیگری سوق داده و شما شاید برای اولین بار از ابزارهایی همچون خط فرمان استفاده خواهید کرد . در دوره آموزشی sass ریز به ریز این موارد  تدریس شده است .

ما در آکادمی آنلاین قاسمی این امکان را فراهم نموده ایم تا با سبکی کاملا متفاوت و اصولی شما را از آغاز تا پایان دوره طراحی سایت- Bootstrap-Less-Sass همراهی کنیم و موفقیت شما را در این درس شاهد باشیم.