Bootstrap چیست و چه کاربردی دارد؟

Bootstrap چیه؟

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

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

bootstrap elements

نمونه ای از المانای پیش فرض Bootstrap

در اگوست سال ۲۰۱۱، توییتر Bootstrap رو به شکل متن باز و رایگان به عنوان یه فریم ورک طراحی سایت در اختیار بقیه قرارداد و در فوریه ۲۰۱۲ به محبوب ترین پروژه در سایت Github تبدیل شده بود.

گذشته کلمه Bootstrap چیه؟

جدای از بحث مربوط به طراحی وب و موارد مربوط به اون، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یه پروسه به شکل جداگونه و بدون به کار گیری منابع خارجیه. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میره، که نشون دهنده پروسه راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتره.

معنی کلمه bootstrap

کلمه Boot در زبون انگلیسی به معنی پوتین یا چکمه س، بعضی از پوتینا زبانه کوچیکی در انتهای خود دارن که هنگام پوشیدن پوتین واسه قرارگرفتن بهتر پا در اون استفاده میشه (چیزی مثل پاشنه کش) این زبانه با نام Bootstrap شناخته میشه.

معرفی امکانات Bootstrap

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

Bootstrap متن باز بوده و در سایت Github واسه دانلود رایگان قرارگرفته س. امکان همکاری در این پروژه و شخصی سازی امکانات و ظاهر اون جفت و جور شده و تا الان مستندات مربوط به اون به چندین زبون دنیا ترجمه شده.

responsive bootstrap

با در نظر گرفتن راست چین بودن نوشته فارسی و فرق چیدمان مطالب با سایتای انگلیسی نیاز به تغییرات اساسی در کدهای CSS و توابع jQuery احساس میشه که با جستجو در اینترنت سایت Bootstrap فارسی رو پیدا کردیم. این سایت علاوه بر تغییر کدهای اولیه مستندات و آموزشای مربوط به Bootstrap رو هم به زبون فارسی ارائه داده که میتونه واسه شروع به کار بسیار مناسب باشه.

Bootstrap به زبون ساده!

شاید هنوزم با امکانات و تواناییای Bootstrap بخوبی آشنا نشده باشین و یا دقیقا متوجه کاربرد اون نشید. در این بخش کمی ساده تر امکانات و تواناییای اون رو بررسی می کنیم.

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

Bootstrap می خواد که فضای خالی میان طراحی و کدنویسی رو از بین ورداشته و کدنویسان رو تشویق به به کار گیری طراحیای پیش فرض و استاندارد کنه. به همین منظور دستورات CSS و توابع jQuery لازم رو واسه شما جفت و جور کرده تا شما بتونین با به کار گیری دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یه پروژه رو تا حد زیادی کاهش داده و خروجی اون رو متناسب با استانداردهای روز دنیا پیش ببرین.

اگه طراحی سایت رو به آشپزی تشبیه کنیم، دستورات php مثل مواد اولیه در پخت یه غذا بوده و وظیفه تامین مواد غذایی لازم رو برعهده داره، کدهای HTML مثل دستورالعمل پخت غذا هستش که خروجی مورد نظر شما رو از مواد اولیه بوجود میاره. دستورات CSS شباهت زیادی به چگونگی کشیدن غذا در ظرف و چگونگی ارائه اون در سفره داره! خوشمزه ترین غذای دنیا هم اگه در ظرف پلاستیکی و به شکل ناجور سرو شه ممکن نیس که رضایت افراد رو جلب کنه ولی ارائه مناسب و زیبای یه غذای ساده میتونه اشتهای سخت گیرترین افراد رو هم برانگیزد.

Bootstrap به شما در چگونگی ارائه غذا و بهبود نمایش صفحات وب بسیار کمک میکنه، مهمتر از هرچیز دیگه سرعت بالای کار با اون هستش که زمان راه اندازی و اتمام یه پروژه رو حتی تا ۸۰ درصد کم می کنه.

مشکل Bootstrap چیه؟

پروژه Bootstrap با هدفی مشخص و ایده ای ستودنی راه اندازی شده و در این راه سومین نسخه خود رو تجربه میکنه. طراحان خیلی از استانداردهای اون بهره میبرن و افراد زیادی به کار گیری Bootstrap در طراحی سایت شرکتی یا طراحی فروشگاه اینترنتی رو یه مزیت مهم میدونن ولی مشکل اصلی وقتی بوجو میاد که شما وابستگی زیادی به طراحی اولیه اون داشته باشین.

امروز تماشاگر سایتای زیادی هستیم که همه ظاهر تقریبا برابری داشته و خیلی راحت میشه ردپای Bootstrap رو در اون دید. مثلا رنگ مشکلی هدر سایت، حاشیه های ۱ پیکسلی خاکستری و دکمه های آبی و قرمز با ظاهری مشخص نشون دهنده استفاده Bootstrap تو یه سایت هستن، در حالیکه با کمی تغییر میشه ظاهری جدید و متفاوت به هر کدوم از این بخشا داده و رنگ بندیای دلخواه خود رو در اونا ایجاد کرد.

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

بوت استرپ ۴ تحولی در ستون بندی صفحات

نسخه جدید بوت استرپ ۴ سال بعد از منتشر کردن اولین نسخه اون معرفی شد. مهمترین تغییر در نسخه جدید رو میشه به کار گیری Flex در ستون بندیا دونست. در نسخه ۲ بوت استرپ اندازه بندی ستونا براساس پیکسل انجام میشد که در نسخه ۳ واسه انعطاف پذیری بیشتر به درصد تغییر یافت. در نسل چهارم فریم ورک بوت استرپ هم ستون بندیا براساس درصد انجام میشه فرقش اینه که شما دیگه محدود به درصدایی خاص نیستین.

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

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

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

اطلاعات و تجربه شما در کار با Bootstrap رو با ما و بقیه به اشتراک بذارین و اگه منابع فارسی مناسبی واسه آموزش این سیستم می شناسین در بخش نظرات همین سایت معرفی کنین.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *