ساخت یک وب سایت واکنش گرا با بوت استرپ – راهنمای مبتدیان

این مقاله به منظور آموزش سریع و موثرِ توسعه دهندگان وب برای استفاده از اصول اساسی فریم ورک بوت استرپ / bootstrap، برای ایجاد وب سایت های واکنش گرا آماده سازی شده است. این آموزش، هزینه ها را کاهش می دهد؛ به طوری که شرکت ها را قادر می سازد تا توسعه دهندگان خود را برای مدیریت و ساخت آسانِ صفحات وب، توانمند سازند. در این مقاله، فرآیند دانلود فریم ورک بوت استرپ و مزایای استفاده از این فریم ورک برای توسعه ی وب شرح داده خواهد شد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

بوت استرپ / bootstrap چیست؟

با توجه به وب سایت رسمی بوت استرپ (getbootstrap.com)،  بوت استرپ، محبوب ترین فریم ورک HTML، CSS و جاوا اسکریپت برای توسعه ی پروژه های واکنش گرا و طراحی شده برای موبایل است. به عبارت ساده تر، بوت استرپ، یک فریم ورک استثنایی و ساده است که سبب تسریع توسعه ی front-end وب و همچنین برای توسعه دهندگان با سطح های مهارتی مختلف، بسیار جذاب است.

مزیت استفاده از bootstrap

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

شروع کار با بوت استرپ

برای شروع کار با بوت استرپ، باید از وب سایت رسمی بوت استرپ (http://getbootstrap.com) بازدید کنید. بوت استرپ یک پروژه ی متن باز است و میزبانی، توسعه و نگهداری آن بر روی GitHub است؛ و این امکان را فراهم می کند تا کاربران به کد منبع دسترسی داشته باشند و بتوانند درک کاملی از فریم ورک، به عنوان یک ابزار برای ایجاد وب سایت ها، داشته باشند.

سه راه برای دانلود نسخه ی فعلی بوت استرپ وجود دارد: شما می توانید یک نسخه از بوت استرپ را دانلود کنید، و همچنین می توانید کد منبع بوت استرپ را نیز دانلود کنید، علاوه بر این، می توانید فریم ورک Bootstrap را از Less به Sass پورت کنید. در این مورد، اگر مبتدی هستید، پیشنهاد می شود فقط نسخه ی اصلی بوت استرپ را دانلود کنید. اگر می خواهید فریم ورکِ بوت استرپ را در پروژه های Rails یا Compass یا Sass-only ادغام کنید، در این حالت باید دانلود را از Less به Sass پورت کنید.

هنگامی که فایل بوت استرپ را دانلود می کنید، باید پوشه ی فشرده را باز کنید تا ساختار فریم ورک بوت استرپ را مشاهده کنید. برای دیدن ساختارِ فایل، کد های زیر را نگاه کنید:

حالا شما می توانید این فایل ها را به سیستم فایل هر پروژه ی وب که روی آن کار می کنید رها کنید و شروع به کار با بوت استرپ، برای طراحی و ساختن پروژه ی دلخواه خود کنید.

طراحی واکنش گرا با بوت استرپ

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

• دستگاه های فوق العاده کوچک (گوشی های هوشمند، کوچکتر از ۷۶۸ پیکسل)
• دستگاه های کوچک (تبلت ها، بزرگ تر و یا برابر با ۷۶۸ پیکسل)
• دستگاه های متوسط ​​(دسکتاپ ها، بزرگ تر و یا برابر با ۹۹۲ پیکسل)
• دستگاه های بزرگ (دسکتاپ ها، بزرگ تر و یا برابر با ۱۲۰۰ پیکسل)

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

سیستم گرید در bootstrap

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

در اینجا یک مثال از سیستم گرید bootstrap آورده شده است:

• کلاس ردیف از پیش تعریف شده، یک ردیف تولید می کند
• در آن ردیف، کلاس دوم “col-md-6” مشخص می شود
• این به این معنی است که کلاس، ستونی را تولید می کند که در طول صفحه ی وب، ۶ ستون قرار دارد
• “md” مشخص می کند که این حالت، تنها در دستگاه های متوسط ​​یا دسکتاپ هایی که کمتر یا برابر ۷۶۸ پیکسل هستند، رخ می دهد.
• کلاس “offset” به این معنی است که این ستون ها خالی باقی می مانند. در این حالت، افست ۳ است، بنابراین سه ستون با فضای خالی باقی می ماند.

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

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