چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳

بازدید: 2117 بازدید

چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳

 

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

 

جعبه ی محتوا

در تصویر بالا کلا ۱۱ جعبه ی محتوا در همه ی دستگاه ها وجود دارد، اما جایگذاری آن متناسب با اندازه ی صفحه ی دستگاه متفاوت می باشد، مثلا در موبایل Layout نمایش داده شده دارای یک ستون و ۱۱ ردیف روی هم می باشد، در حالیکه در تبلت در قالب دو ستون Layout گرید که دو ستون و ۱۱ ردیف دارد نمایش داده شده است. به طور مشابه در دستگاه با سایز متوسط در Layout سه ستونی گرید که دارای سه ستون و چهار ردیف است نمایش داده شده است و در دستگاه بزرگ Layout گرید دارای چهار ستون و سه ردیف می باشد.

 

نکته :

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

خروجی :

اگر خروجی مثال بالا را در یک لب تاب یا یک دستک تاب مشاهده کردید که دارای صفحه یا ویوپرتی به عرض بیشتر یا برابر ۹۲۲px و کمتر از ۱۲۰۰px می باشد، این Layout دارای ۱ ردیف خواهد بود که هر ردیف دارای سه ستون برابر خواهد بود، یعنی نتیجه یک Layout گرید ۳x4 است.

 

 

اما مثال بالا دارای یک پیامد هم ترازی می باشد. اگر ارتفاع هر ستون بلندتر از دیگری باشد، به درستی مشخص نمی کند و Layout شکسته می شود. برای برطرف کردن این موضوع از ترکیبی از گروه .clearfix و کارایی گروه های پاسخگو استفاده کنید

col-md

از آنجایی که سیستم گرید پیش فرض دارای ۱۱ستون می باشد، و در Layout ما در مجموع سه ستون وجود دارد برای مثال col-md برابر ۱۱ است، به این دلیل است که ستون ها را پس از هر رویداد سوم پاک می کنیم. در سناریوی دیگر، جایی که تعداد ستون ها مثلا *- col-md برای هر ستون متفاوت است باید از .clearfix استفاده کنید که ۱۱ ستون گرید را کامل می کند. .visible-md-block گروه .clearfix را فقط روی دستگاه هایی با سایز متوسط موثر می سازد در حالیکه روی دیگر دستگاه ها پنهان می باشد.

نکته: برای راحتی کار خود دستگاه مورد هدف خود را انتخاب کنید و ابتدا Layout ی برای آن دستگاه ایجاد کنید، پس از آنکه برای پاسخگو ساختن آن به دیگر دستگاه ها، گروه هایی به آن اضافه کردید.

 

 

col-sm

اکنون زمان آن فرا رسیده تا Layout خود را برای دستگاه های دیگر به دلخواه خود در آوریم. از آنجایی که Layout ما در تب لت در گریدهای ۲x6 نمایش داده می شود. ( به عنوان مثال ۱ستون و ۱ردیف) بنابراین به جلوتر رفته و گروه col-sm-6 را به هر ستون اضافه کنید

اکنون از آنجایی که عدد مجموع هر دو ستون به عنوان مثال col-sm برابر ۱۱ می باشد ، بنابراین شناورها را پس از هر دومین رویداد مربوط به ستون ها مشخص کنید.

پس از مشخص کردن شناورها برای دستگاه های کوچک، کد نهایی ما مانند زیر خواهد بود

 

به طور مشابه می توانید Layout را برای دستگاه های بزرگتر مانند صفحات دسک تاب بزرگتر به دلخواه خود در آورید

 

نکته دستگاه های افقی :

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