کلیه حقوق مادی و معنوی این سایت متعلق به طراحی وب سایت آواتم میباشد.
منو
به اشتراک بگذارید...
اولین موردی که در این مقاله باید به آن پرداخته شود چیستی خود بوت استرپ است، و سپس کارایی آن زیرا تا زمانی که ندانیم Bootstrap چیست ، دانستن کاربرد آن هم فایده ای نخواهد داشت .
به مجموعه ای از ابزار های رایگان برای ایجاد کردن صفحات وب و نرم افزار های تحت وب، بوت استرپ یا Bootstrap گفته می شود و همچنین دستورات js (جاوااسکریپت)، HTML و CSS برای تولید و نمایش فرم ها، تب ها، ستون ها، دکمه ها و سایر المان های مورد نیاز برای طراحی وب نیاز است را شامل می شود.
بوت استرپ اول به وسیله جاکوب تورنتون و مارک اتو و برای ایجاد یک چارچوب ظاهری یکسان و مشخص در ابزارهای توییتر طراحی و نوشته شده است . پیش از شروع کردن این پروژه نمونه های بسیاری با همین رویکرد بوجود آمده بود که تمامی آنها با سرنوشتی مشابه و استقبال نشدن توسط طراحان وب در دنیا مواجه شده بودند. به علت وجود مشکلات اساسی در نمونه های دیگر، سازنده اصلی توییتر یا همان مارک اتو تصمیم گرفت یک سیستم داخلی و قدرتمند برای خود با نام Bootstrap بسازد.
در ماه اگوست سال 2011، توییتر بوت استرپ را به طور کاملا متن باز و رایگان به عنوان یک فریم ورک طراحی وب سایت در اختیار کاربرام قرارداد و در ماه فوریه سال 2012 به مشهور ترین و محبوب ترین پروژه در سایت Github تبدیل شده بود.
شاید با توجه به توضیحات بالا به طور کامل با امکانات این فریم ورک آشنا نشده باشید، یا به طور دقیق متوجه کارایی آن نشده باشید . دراین قسمت با شیوه ای ساده تر به توضیخ توانایی و امکانات آن خواهیم پرداخت .
از بزرگترین مشکلات طراحان وبسایت یا کدنویسان که در سال های قبل کار می کردند ، بوجود آوردن ظاهری مناسب و زیبا بوده است. اصول کد نویسی و ایجاد ساختار مناسب با زیر بنای آن برای یک وبسایت امری پیچیده و کاملا مهم است. البته لازم به ذکر است که نمایش دادن درست در خروجی کار و بوجود آوردن یک فضایی که کاربر آن را بپسندد اهمیت بالایی دارد.
بوت استرپ تصمیم دارد که کمبود بین کدنویسی و طراحی را از میان بردارد و کدنویسان را تشویق کند تا از طراحی های پیش فرض استفاده کنند. بخاطر همین موضوع دستورات CSS و توابع jQuery لازم را برای شما آماده کرده است تا بتوانید به وسیله آن از دستورات پیش فرض یا از قبل نوشته شده و رعایت اصول مناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را به حداقل رسانده و خروجی را مناسب با استانداردهای روز دنیا مشاهده کنید.
همانطور که می دانید پروژه Bootstrap با هدفی راه اندازی شده است و در این مسیر سه یا چهارمین نسخه خود را تجربه می کند. طراحان زیادی هستند که از استاندارد های آن استفاده می کنند
مشخص و ایده ای ستودنی راه اندازی شده است و در این مسیر سومین نسخه خود را تجربه میکند. طراحان زیادی از استانداردهای آن بهره میبرند و افراد زیادی بهره بردن از آن را در سایت شرکتی یا سایت فروشگاهی را یک فایده می دانند.اما وابستگی بسیار به طرح های اولیه مشکل ساز است.
امروز سایت های بسیاری را می بینیم که تمامی آنها دارای ظاهر نسبتا یکسانی هستند و به آسانی می توانیم ردپای Bootstrap را در آن ببینیم. به طور مثال می توان گفت رنگ مشکلی بکار برده شده در هدر سایت، حاشیه های 1 پیکسلی خاکستری رنگ نشان می دهد که در آن سایت از Bootstrap استفاده شده است، این درصورتی است که با کمی تغییر می توانیم هر یک از بخش ها و رنگ بندی ها را متناسب با سلیقه خود تغییر دهیم.
اگر استفاده از بوت استرپ همینطور ادامه پیدا کند امکان دارد که در آینده بسیار نزدیک تشخیص دادن سایت های اینترنی از هم کمی سخت شده و تمامی آن ها دارای شکل ظاهری یکسان و تکراری باشند. این موضوع به این معنی نیس که ما با این سیستم و امکانات آن مخالفت داریم بلکه آن است که بیاییم تا این امکانات را در جهت بهبود فضای اینترنت استفاده کرده و خلاقیت خود را افزایش دهیم.
نسخه جدیدی که bootstrap سال بعد از انتشار اولین نسخه آن ارائه کرد نسخه بوت استرپ 4 بود، که از مهمترین تغییر اساسی ایجاد شده در نسخه جدید به استفاده از Flex در ستون بندی ها اشاره کرد . در نسخه شماره 2 bootstrap سایز بندی ستون ها به شیوه پیکسل بود که در نسخه شماره 3 آن برای انعطاف پذیری بالاتر به درصد تغییر یافت. در نسخه چهارم بوت استرپ نیز ستون بندی ها براساس درصد انجام می شود اما با این تفاوت که دیگر شما را محدود به درصد های خاص نمی کند.
استفاده کردن از Flexbox در نسخه bootstrap 4 باعث شده است که شما بتوانید ستون ها و المان هایی طراحی کنید که ابعاد آنها به شیوه سایر محتوای موجود در صفحه مشخص شود. به طور مثال اگر23 ستون در یک بخش باشد عرض هر کدام از آنها یک دوم از فضای موجود خواهد بود ولی اگر 3 ستون وجود داشته باشد به صورت اتوماتیک فضایی معادل یک سوم را اشغال خواهد کرد
به شیوه ای ساده تر می توان گفت دیگر هر المان در یک بخش می تواند بخشی مساوی از فضا را در اختیارخود بگیرد. البته به این نکته هم توجه کنید که قابلیت های flex همینجا تمام نمی شود و شما قادرید سهم هر المان از فضا را مشخص کنید و فضای باقی مانده در آخر را بین سایر المان های موجود تقسیم کنید. همین کار به ایجاد ظاهر ساده کمک می کند که هنگام طراحی وب سایت آزادی عمل بیشتری داشته باشیم و شیوه نمایش دادن در نسخه موبایلی را متناسب با سایز صفحه پیش بینی و طراحی کنیم کنیم.
امید واریم این مطلب مفید بوده باشه (شرکت طراحی سایت آواتم)
کلیه حقوق مادی و معنوی این سایت متعلق به طراحی وب سایت آواتم میباشد.