Bootstrap یک فریم ورک HTML,CSS,JavaScrtip است که به شما این توانایی رو میده به راحتی وب سایت های خودتون رو رسپانسیو و انعطاف پذیر طراحی کنید.

رسپانسیو (Responsive) یعنی چی؟! وقتی وب سایت شما با توجه به سایز صفحه نمایشگر تغییر سایز بده و در عرض دارای اسکرول نباشه رسپانسیو کقته میشه و به عبارت دیگه وب سایت ها در قدیم برای سایز نمایشگر های لپ تاپ و کامپیوتر ها طراحی میشد و در سایر پلتفرم ها مثل تبلت و گوشی موبایل به درستی نمایش داده نمی شدند و یا قالب سایت بهم میریخت ولی با استفاده از بوت استرپ قادرید وب سایت رو طوری طراحی و کدنویسی کنید که در تبلت و گوشی موبایل به راحتی قابل نمایش باشه و با این کار شما بخش عظیمی از کابرانی رو که از تبلت و گوشی موبایل استفاده میکنند رو به وب سایت خودتون جذب می کنید.

قابلیت Responsive شدن وب سایت با استفاده از Bootstrap تنها مربوط به بخش HTML و CSS می شه اما بوت استرپ علاوه بر این امکان یک ویژگی بارز دیگه هم داره و اون آماده سازی Component ها و ابزارهای ساخته شده با JavaScript برای کاربران است که شما میتونید هر کدام از این ابزارها رو در قالب خودتون با کپی کردن کد اون بکار ببرید. توضیح بیشتر برای این بخش نمیدم برای آشنایی بیشتر به لینک های زیر در سایت Bootstrap مراجعه کنید و با این ابزارها آشنا بشین:

Components

ابزارهای JavaScript

خب تا این قسمت به نظرم از بوت استرپ خوشتون اومده…

برای شروع کار اول به وب سایت بوت استرپ میریم به قسمت Getting started. در این بخش توضیح مختصری در مورد ورژن فعلی بوت استرپ ۳٫۲٫۰ و نحوه استفاده از این ورژن گفته شده است. در این قسمت مشاهده می کنید که سه pack بوت استرپ برای دانلود قرار داده شده است:

bootsrap-dl

بخش اول از سمت چت سورس کدهای اصلی Bootstrap هست یعنی کدهای css , js و fonts هستند که دارای کدهای minified شده css هم هستند. اگر از این بسته برای طراحی قالب سایت استفاده کنید برای ایجاد تغییرات در هر بخش کد باید قسمت های زیادی از کد css رو تغییر بدین و وقت زیادی رو میگیره!

اگر در css قادر بودین مانند PHP متغییر تعریف کنید و یا از دستورات شرطی و حلقه ها استفاده کنید و یا تابعی رو بنویسید خیلی کار استایل دهی قالب به سرعت پیش می رفت و نیاز به تکرار برخی از کدها و بازنویسی در جاهایی که لازم هست نداشتین! مثلا میتونستید یک تابع تعریف کنید و کدهایی مثل font,color,size,border,border-radius رو داخلش قرار بدین و هرکجا تابع رو فرخوانی کردین این دستورات اجرا بشه به سرعت میتونستید یک استایل رو آماده کنید! تمامی این امکانات در زبان های Less و Sass آورده شده و بسته های دوم و سوم بوت استرپ مخصوص کسانی هست که حرفه ای کار می کنند و میخوان زودتر و شیک تر برنامه خودشون رو بنویسند.

زبان های Less و Sass تقریبا شبیه به هم عمل میکنند یعنی با استفاده variables, mixins, functions در این زبان ما میتونیم کدهای CSS رو به راحتی آماده کنیم. مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت – ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است. توتال دیزاین ترجیح داده از زبان شیرین Sass برای توسعه قالب ها استفاده کنه و در آموزش های بعد نحوه استفاده از این زبان اسکریپتی رو بیان میکنیم…

تا این قسمت با بوت استرپ آشنا شدیم. در قسمت بعد نحوه استفاده از بوت استرپ در طراحی قالب شماره ۱ توتال دیزاین برای شما عزیزان منتشر خواهد شد. سعی میکنیم آموزش ها رو به صورت مرتب منتشر کنیم.  🙂

پایان قسمت اول