آشنایی با Bootstrap

Bootstrap چیست؟

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

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

 

تاریخچه کلمه Bootstrap چیست؟

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

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

 

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

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

 

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

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

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

 

مشکل Bootstrap چیست؟

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

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

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

 

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

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

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

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

 

مزایای bootstrap

استفاده از فریم وورک بوت استرپ دارای مزایای بسیاری است که باعث می‌شود تمامی توسعه‌ دهندگان صفحات وب از کار با آن لذت ببرند. برخی از این مزایا عبارتند از:

– باگ‌های مرورگر را کاهش می‌دهد؛

– چارچوبی ثابتی است که از بیشتر مرورگرها پشتیبانی می‌کند؛

– مشکل عدم سازگاری CSS را برطرف می‌سازد؛

– دارای حجم کم و قابل شخصی‌سازی است؛

– دارای ساختار ریسپانسیو و طرح‌های پیش‌ساخته است؛

– با استفاده از jQuery چندین پلاگین جاوا اسکریپت را به کاربر ارائه می‌دهد؛

– مستندات و اطلاعات آن به راحتی در فروم‌های کامپیوتری یافت می‌شود و از پشتیبانی خوبی بهره مند است؛

– قالب‌های حرفه‌ای رایگان بسیاری را در خود جای داده است و پلاگین‌ها و تم‌های متنوع وورد پرس را نیز به کاربر ارائه می‌دهد،

– دارای سیستم ستون‌بندی فوق‌العاده‌ای است.

 

معایب bootstrap

با اینکه معایب این فریم وورک به اندازه‌ی مزایای آن نیست اما آشنایی با آن‌ها می‌تواند کمک خوبی در انتخاب فریم ورک مناسب شما باشد. معایب بوت استرپ عبارتند از:

– درصورت عدم علاقه به طراحی‌های موجود در فریم ووک بوت استرپ، بازنویسی و تولید کدهای جدید برای طرح‌ها و قالب‌ها به زمان و انرژی بسیار زیادی نیاز دارد؛

– در صورتی که قالب وبسایت خود را به صورت ویژه سفارشی سازی تکنید، تمامی وب‌سایت‌ها سبک و سیاق یکسانی پیدا خواهند کرد و از سوی دیگر اجرای سفارشی‌سازی سنگین بسیار انرژی‌بر است؛

– طرح‌ها و استایل‌‌های موجود در bootstrap دارای کدهای طولانی هستند و همین امر خروجی‌های HTML را بیش از حد نیاز افزایش می‌دهد؛

– پلاگین‌های جاوا اسکریپت با jQuery ارائه می‌شوند و بخش اعظم قالب‌ها و پلاگین‌های این چارچوب را تشکیل می‌دهند. به همین خاطر بسیاری از پلاگین‌های موجود در این چارچوب بلا استفاده می‌مانند؛

– مطابق با HTML رفتار نمی‌کند.

 

سخن پایانی

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

کار با این فریم وورک بسیار ساده است و کافی است ذره‌ای با کدنویسی آشنایی داشته باشید تا بتوانید به راحتی وبسایت ایده‌آل خود را تولید کنید. این ابزار با ریسپانسیو کردن صفحه‌ از طریق سیستم گرید (ستون‌بندی) به شما اجازه می‌دهد تا وبسایت خود را برای نمایش در پلتفرم‌های گوناگون تنظیم کنید. شما می‌توانید به راحتی این فریم وورک را دانلود کنید و از مزایای بی‌شمار آن لذت ببرید.

 

خیلی خیلی خوشحال می‌شیم اگر نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، اون رو در بخش دیدگاه‌ها ارسال کنین.

 

سپاس از همراهیتون

نظر