آموزش های کوچک » نتایج بزرگ همراه با آموزش فارسی

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

bootstrap

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

 

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

download 300x190 - چگونگی ایجاد  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 گرید یک ستونی نمایش داده می شوند .

 

 

آموزش فارسی

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

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
دیدگاه‌ها

*
*

تخفیف 30%
کد تخفیف 75%
کد تخفیف 100%
تخفیف 50%
دانلود مقاله اشتباهات هزینه دار سئو SEO
کد تخفیف 13%
کد تخفیف 20%
کد تخفیف 90%
شانس خود را برای دریافت جایزه دریافت کنید!
آدرس ایمیل و تلفن همراه خود را وارد کنید و چرخ را چرخانید. این شانس شما برای به دست آوردن تخفیف های شگفت انگیز است!