در بخش قبلی آموزش طراحی یک وبلاگ ساده که دارای هدر و مطالب بود را آموزش دادیم . و به آنجا رسیدیم که این طراحی برای دسکتاپ دارای سه ستون برای مطالب بود . حال باید این طراحی را طوری بهینه کنیم که برای تبلت ها و موبایل ها نیز بدرستی به نمایش درآید .
بخش 15 – طراحی وب واکنش گرا ، طراحی وبلاگ ساده با بوت استرپ ، بخش دوم
در بخش قبلی آموزش طراحی یک وبلاگ ساده که دارای هدر و مطالب بود را آموزش دادیم . و به آنجا رسیدیم که این طراحی برای دسکتاپ دارای سه ستون برای مطالب بود . حال باید این طراحی را طوری بهینه کنیم که برای تبلت ها و موبایل ها نیز بدرستی به نمایش درآید . در ادامه می توانید این تغییرات را بخوانید :
طراحی برای تبلت ها
حال باید کدهای خود را برای تبلت ها تغییر دهیم . برخلاف نمایشگرهای رومیزی ، تبلت ها به دو حالت عمودی و افقی در می آیند . که به این دو حالت Portrait و Landscape می گوییم . در حالت نمایش landscape صفحه نمایش تبلت بصورت سایز متوسط می باشد ( width > 992px ) . که باید توجه داشته باشیم که در این حالت از کلاس col-md-* استفاده کنیم . و همچنین در حالت portrait ما سایز نمایشگر کوچک را داریم که در این حالت از کلاس col-sm-* استفاده خواهیم نمود .
بنابراین ما در طرح نمایشگرهای کوچک به حالت دو ستونه خواهیم رسید . و هر ستون را بصورت ستون های 6 تایی بوت استرپی در خواهیم آورد ، که مجموع این دو ستون به همان استاندارد 12 تایی بوت استرپ خواهد رسید .
کدهای قبلی خود را که در قسمت قبل انجام دادید باز کرده و کلاس جدید col-sm-6 را به ستون های خود اضافه کنید .
حال اگر کدهای جدید را در تبلت اجرا کنید و یا عرض مرورگر خود را به اندازه ی نمایشگر تبلت تغییر دهید ، کدها بصورت زیر در خواهند آمد :
طراحی برای موبایل
همانند تبلت ها ، موبایل ها نیز می توانند در دو حالت portrait و landscape نمایش داده شوند . در حالت landscape در موبایل ها اندازه ی نمایشگر بصورت سایز کوچک خواهد بود ( width > 768px ) که باید توجه داشت که در این حالت از کلاس col-sm-* استفاده خواهیم نمود . و همچنین حالت portrait در موبایل ها بصورت سایز خیلی کوچک خواهد بود ( width < 768px ) .
در حالت نمایش در موبایل ها ما از طرح یک ستونی برای نمایش مطالب استفاده خواهیم کرد . برای نمایشگرهای بسیار کوچک در دستگاه هایی مانند موبایل ما از کلاس col-xs استفاده خواهیم کرد . در اینجا ما برای هر مطلب وبلاگ 12 ستون بوت استرپی را در نظر خواهیم گرفت تا در هر خط یا سطر تنها یک مطلب بنمایش در آید بنابراین از کلاس col-xs-12 استفاده خواهیم نمود . بنابراین کدهای ما بصورت زیر تغییر خواهد کرد :
و پس از اجرای کدها صفحه ی وبلاگ ما در موبایل به شکل زیر خواهد بود :
در نهایت ما یک صفحه ی HTML کامل خواهیم داشت که بصورت واکنش گرا طراحی شده و در همه ی دستگاه ها و نمایشگرها بدرستی نمایش داده خواهد شد .
دانلود سورس تمرین این قسمت
شاد و سلامت باشید
محمد جعفری فوتمی