طراحی واکنش گرا به توسعه دهندگان این اجازه را می دهد تا بتوانند لایه ها را تغییر دهند . طراح وب می تواند یک طراحی داشته و آن طراحی در تمامی دستگاه های موبایل ، تبلت ، دسکتاپ و ... بدرستی نمایش داده شود .
بخش 11 – طراحی وب واکنش گرا ، شروع کار با بوت استرپ ، بخش اول
طراحی واکنش گرا به توسعه دهندگان این اجازه را می دهد تا بتوانند لایه ها را تغییر دهند . طراح وب می تواند یک طراحی داشته و آن طراحی در تمامی دستگاه های موبایل ، تبلت ، دسکتاپ و ... بدرستی نمایش داده شود .
تنظیم طرح سایت بر اساس اندازه ی صفحه نمایش
بگذارید تا مثالی برای درک بهتر این مفهوم بزنیم . فرض کنیم طرح وب سایت ما شبیه شکل زیر باشد که در دستکتاپ به نمایش در آمده است .
ما سه قسمت اصلی در طراحی خود داریم . قسمت هدر ، قسمت بدنه و قسمت فوتر یا پاورقی سایت . بخش هدر سایت شامل لوگو و یک تبلیغات مستطیلی می باشد . بخش محتوای اصلی شامل چهار مکان کوچک برای قرار دادن مطلب که در کنار هم قرار گرفته اند و سپس در زیر آن ها دو بخش بزرگتر برای قرار گرفتن مطالب وجود دارد . و در نهایت بخش فوتر یا پاورقی می باشد که یک متن ساده در زمینه ی کپی رایت سایت است .
به روشنی مشخص است که این صفحه را بدلیل اینکه به بزرگتر از صفحه نمایش موبایل و تبلت می باشد نمی توان بدرستی در آن ها مشاهده کرد . بنابراین طراحی ما نیاز دارد تا برای این کاربران شخصی سازی شود .
فرض کنید ما از سیستم بوت استرپ bootstrap برای طراحی خودمان استفاده کنیم . و از سیستم شبکه بندی آن برای طراحی واکنش گرا بهره ببریم ، آنگاه تمامی جداول و بخش های ما بصورت اتوماتیک برای نمایش در سیستم های موبایل و تبلت جابجا شده و خود را با آن وفق خواهند داد .
در یک دستگاه تبلت سایت به صورت شکل زیر نمایش داده خواهد شد و تبلیغات از بخش هدر ناپدید گشته و لوگو در مرکز قرار می گیرد . و طرح ما بطور کامل خودش را با محیط تبلت وفق می دهد و در آن جای میگیرد .
در تلفن های هوشمند که تصویر آن را در زیر می بینید ، می توانید مشاهده کنید که هدر ما پیرو نمایش در تبلت ها به همان صورت بنمایش در خواهد آمد ، اما یک تغییر اساسی در بخش محتوای اصلی سایت خواهیم داشت . و آن هم اینکه همانطوری که ملاحظه می فرمایید پست های کوچک تر که در چهار ستون در کنار هم قرار داشتند ، در نمایش تلفن هوشمند ما به صورت دو ستون در کنار هم در آمدند . و دو مطلب اضافه به زیر دو ستون بالایی نقل مکان کردند . و همچنین آن دو مطلب بزرگتر که در کنار هم قرار داشتند نیز به زیر هم رفتند . ( توجه داشته باشید مطلب بزرگتر دومی زیر عکس می باشد که در تلفن هوشمند نمایش داده نشده )
آماده شدن برای بوت استرپ bootstrap
سرانجام به جایی رسیدیم که آماده ی آلوده شدن به بوت استرپ شده ایم ! در ابتدا نیاز داریم تا پکیج بوت استرپ bootstrap را تهیه کنیم ، برای اینکار به وب سایت رسمی این فریم ورک به آدرس http://getbootstrap.com رفته و آخرین نسخه ی آن را دانلود می کنیم . که در هنگام نوشتن این مقاله آخرین نسخه 3.3.6 می باشد و البته در نظر داشته باشید که نسخه ی 4 بوت استرپ نیز در حال آماده سازی و انتشار می باشد . بعد از دانلود فایل پکیج بوت استرپ bootstrap آن را از حالت فشرده خارج نموده و فولدرهای زیر را کپی کنید :
یک فولدر برای پروژه ی خود ، با هر نامی که دوست دارید بسازید . که ما در اینجا نام Bootstrap_demo را برای فولدر خود انتخاب کرده ایم . و فولدرهای کپی شده در بالا را در آن پیست کنید .
حال ویرایشگر کدهای HTML مورد علاقه ی خود را باز کرده ( که حتی میتوان از notepad هم استفاده نمود ) و در آن یک فایل با نام index.html بسازید . و کد زیر را در آن بنویسید .
این کد ساده اولین کد ما در زمینه ی طراحی توسط بوت استرپ bootstrap می باشد .
فولدر پروژه ی ما حالا باید شبیه به شکل زیر باشد :
حال اجازه دهید تا بوت استرپ bootstrap را وارد فایل HTML خود کنیم . در ابتدا نیاز داریم تا فایل CSS بوت استرپ bootstrap را وارد کنیم . فولدر /css را باز کنید ، در آن باید فایلی به نام bootstrap.css ببینید که در واقع فایل اصلی css بوت استرپ bootstrap می باشد .
فایل bootstrap.min.css چیست؟
در آن فولدر نامبرده فایل دیگری با عنوان bootstrap.min.css وجود دارد ، که در واقع نسخه ی مینیمم شده ی همان فایل bootstrap.css می باشد . مینیمم خوانده می شود چرا که هیچ فاصله و یا توضیحی در میان کدها نیست و در واقع خالص ترین کد مربوطه می باشد و در نتیجه حجم آن بشدت کاهش می یابد . و هنگامی می توان از آن استفاده نمود که پروژه ی شما تکمیل شده و قرار است آن را روی سرور بارگزاری نمایید . استفاده از این فایل با حجم کمتر باعث سبک تر شدن ترافیک سرور شما خواهد شد و سایت راحت تر بارگزاری می گردد .
شاد و سلامت باشید
محمد جعفری فوتمی