آشنایی با فریم ورک بوت استرپ
فیچر هایی که اگه خودمون بخواهیم بسازیمشون و کدش رو صفر تا صد بزنیم ممکنه زمان زیادی رو از ما بگیره و یا ساختنشون برای ما سخت باشه. یک توضیح کوتاهم درباره ی فریم ورک بگم ،کلا فریم ورک های این چنینی دارای یک سری کلاس و توابعی هستند که از پیش تعریف شدند .ما فقط میایم ازین کلاس ها و توابع در کدمون در جایی که لازم باشه استفاده میکنیم .مثلا برای ساخت منوی Drop-Down دیگه لازم نیست اون همه کد رو در فایل css مون بنویسیم و فقط کافیه از کلاس مربوط به اون فریم ورک در کد html مون استفاده کنیم.
بوت استرپ چیه؟
یکی دیگر از ویژگی های بوت استرپ، ویژگی ریسپانسیو بودنشه که از یک سیستم 12 ستون برای این کار استفاده میکنه و با توجه به سایز دستگاهمون تنظیم میشه و کارهای ریسپانسیو رو برای ما خیلی راحت کرده.
متد mobile first یعنی اینکه بیایم طراحی سایتمون رو از سایز موبایل شروع کنیم و بعد میریم سراغ سایز های بزرگتر.
طبق این تصویر میبینید که توی ریسپانسیو طراحی سایت از سایز بزرگ شروع میشه مثل لپ تاپ و این چیزها و بعد میریم سراغ سایز های کوچیک مثل تبلت و موبایل.ولی درمتد یا طراحی mobile first میایم طراحی مون رو از موبایل و سایز کوچیک شروع میکنیم و محتویات رو به صورتlinear یا خط به خط قرار میدیم و بعد میریم سراغ سایز های بزرگتر.
فریمورک بوت استرپ موبایل فرندلی است!
و اینکه بوت استرپ موبایل فرندلی است و میدونه سایتی رو که ما میخواهیم طراحی کنیم با بوت استرپ موبایل فرندلی هستش و کار ما رو راحت کرده در این زمینه و اینکه حتما به باگ هایی بر خوردید توی طراحی سایتتون که مثلا یک چیزی رو میسازید در کروم یا فایرفاکس به درستی کار میکنه ولی مثلا میاید تو اپرا میبینید اصلا کار نمیکنه ولی بوت استرپ توی دستگاه های مختلفی روی سایت ها و مرورگر های مختلفی تست شده و شما دغدغه این کار رو ندارید و زمان زیادی رو برای شما صرفه جویی میکنه .و همون طور که میدونید بوت استرپ از html ،cssو javascript برای طراحیbutton ها یا مثلا تب ها ستون ها ،فرم ها یا سایر المان هایی که داریم توی طراحی وب استفاده میکنه و در ورژن های less و sass هم قابل دسترسی هست و کاملا هم قابل کاستومایز کردن هستش و میتونید فقط از بخش هایی که مورد نیاز و سلیقه ما هست استفاده کنید.
اصلا بوت استرپ رو کجاها باید استفاده بکنیم
بوت استرپ خیلی برای پروژه های کوچیک مناسبه پروژه هایی که به فیچر های زیادی احتیاج دارن مثل Drop-Down ،nav bar،carosel ولی خودمون نمیخوایم این ها رو بسازیم .بوت استرپ میاد 80 درصد این فیچر ها رو برای ما فراهم میکنه و بسیار مناسب هست برای این کار .
برای کسانی که کارشون functionality سایت هست و نمیخوان وقتشون رو صرف طراحی سایت بکنند،چون که طراحی سایتشون در رابطه دیزاینر تیمشونه فقط میخوان تمرکز کنن روی functionality تیم خب باید یک پیکر بندی و یک اسکلت بندی از سایتشون داشته باشند. برای این افراد هم بسیار مناسبه بوت استرپ و همون طور که گفتیم برای پروژه های کوچیک مناسبه ولی دلیل نمیشه که برای پروژه های بزرگ نتونیم از بوت استرپ استفاده بکنیم.
چون که ما هر سایتی که میسازیم مسلمه یه چند تا فیچر مشترک داره مثلا مثل carosel ،Drop-Down،اینها مشترک هستند در بیشتر پروژه های ما و ما میتونیم دیگه صفر تا صد کدشون رو نزنیم و از بوت استرپ استفاده کنیم.
ما میتونیم به دو شیوه بوت استرپ رو نصب کنیم یکی به صورت بیسیک هستش که خودش دو نوع داره استفاده از CDN Bootstrap هستش که CDN مخفف Content Delivery Network هستش و به این معناست که یک سری لایبرری ها مثل همین بوت استرپ میانhost میشن و ما با استفاده از یک لینک به اونها دسترسی پیدا میکنیم و یک ویژگی خوبی که CDN ها دارند اینه که مثلا من میام از یک سایتی که از CDN مربوط به بوت استرپ استفاده کرده الان ویزیت میکنم و بعدش میرم توی یک سایت دیگه اون هم از CDN بوت استرپ استفاده کرده ولی در سایت دوم مرورگر من دیگه فایل رو request نمی کنه و میاد از همون نسخه cache شده اون لایبرری استفاده میکنه و سایت رو لود میکنه و باعث میشه سایت در زمان سریعتری لود بشه و بسیار خوبه و میتونیم فایل ها رو به صورت دستی دانلود کنیم و در پروژه مربوط به کارمون بیاریم.
به صورت Advance هم برای کاربر های حرفه ای هستش میتونن از Less و Sass استفاده کنند.
