info@academyit.net 02144284207
  1. صفحه نخست
  2. مقالات
  3. آشنایی با فریم ورک بوت استرپ

آشنایی با فریم ورک بوت استرپ

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

فیچر هایی که اگه خودمون بخواهیم بسازیمشون و کدش رو صفر تا صد بزنیم  ممکنه زمان زیادی رو از ما بگیره و یا ساختنشون برای ما سخت باشه. یک توضیح کوتاهم درباره ی فریم ورک بگم ،کلا فریم ورک های این چنینی دارای یک سری کلاس و توابعی هستند که از پیش تعریف شدند .ما فقط میایم ازین کلاس ها و توابع در کدمون در جایی که لازم باشه  استفاده میکنیم .مثلا برای ساخت منوی Drop-Down دیگه لازم نیست اون همه کد رو در فایل css مون بنویسیم و فقط کافیه از کلاس مربوط به اون فریم ورک در کد html مون استفاده کنیم.
بوت استرپ تنها فریم ورکی نیست که ما داریم. فریم ورک های مختلفی مثل Foundation ،montage ،less ،w3 ،pure و کلا فریم ورک زیاد داریم در این زمینه ولی بوت استرپ محبوب ترینشون هست توی این کار و در بازار ایران هم جایگاه خوبی داره.

 


فریم ورک bootstrap

بوت استرپ چیه؟

یکی دیگر از ویژگی های بوت استرپ، ویژگی ریسپانسیو بودنشه که از یک سیستم 12 ستون برای این کار استفاده میکنه و با توجه به سایز دستگاهمون تنظیم میشه و کارهای ریسپانسیو رو برای ما خیلی راحت کرده.
متد mobile first یعنی اینکه بیایم طراحی سایتمون رو از سایز موبایل شروع کنیم و بعد میریم سراغ سایز های بزرگتر.
طبق این تصویر میبینید که توی ریسپانسیو طراحی سایت از سایز بزرگ شروع میشه مثل لپ تاپ و این چیزها و بعد میریم سراغ سایز های کوچیک مثل تبلت و موبایل.ولی درمتد یا طراحی mobile first میایم طراحی مون رو  از موبایل و سایز کوچیک شروع میکنیم  و محتویات رو به صورت linear یا خط به خط قرار میدیم و بعد میریم سراغ سایز های بزرگتر.



فریم ورک bootstrap

فریمورک بوت استرپ موبایل فرندلی است!

و اینکه بوت استرپ موبایل فرندلی است و میدونه سایتی رو که ما میخواهیم طراحی کنیم با بوت استرپ  موبایل فرندلی هستش و کار ما رو راحت کرده در این زمینه و اینکه حتما به باگ هایی بر خوردید توی طراحی سایتتون که مثلا یک چیزی رو میسازید در کروم یا فایرفاکس به درستی کار میکنه ولی مثلا میاید تو اپرا میبینید اصلا کار نمیکنه ولی بوت استرپ توی دستگاه های مختلفی روی سایت ها و مرورگر های مختلفی تست شده و شما دغدغه این کار رو ندارید و زمان زیادی رو برای شما صرفه جویی میکنه .و همون طور که میدونید بوت استرپ از 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 استفاده کنند.

 


فریم ورک بوت استرپ

 

 

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

 

ارسال نظر

= 6 + 1

هنوز نظری برای این مقاله ثبت نشده است ...