خانه / بوت_استرپ_Bootstrap / چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳

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

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

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

 

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

responsive
responsive

 

جعبه ی محتوا

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

 

نکته :

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

 

<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<p> Box 1 </p>
</div>
<div class=”col-md-4″>
<p> Box 2 </p>
</div>
<div class=”col-md-4″>
<p> Box 3 </p>
</div>
<div class=”col-md-4″>
<p> Box 4 </p>
</div>
<div class=”col-md-4″>
<p> Box 5 </p>
</div>
<div class=”col-md-4″>
<p> Box 6 </p>
</div>
<div class=”col-md-4″>
<p> Box 7 </p>
</div>
<div class=”col-md-4″>
<p> Box 8 </p>
</div>
<div class=”col-md-4″>
<p> Box 9 </p>
</div>
<div class=”col-md-4″>
<p> Box 10 </p>
</div>
<div class=”col-md-4″>
<p> Box 11 </p>
</div>
<div class=”col-md-4″>

<p> Box 12 </p>
</div>
</div>
</div>

خروجی :

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

 

twitter-bootstrap-responsive
twitter-bootstrap-responsive

 

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

 

<div class=”container”>
<div class=”row”>
<div class=”col-md-4″><p>Box 1</p></div>
<div class=”col-md-4″><p>Box 2</p></div>
<div class=”col-md-4″><p>Box 3</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-md-4″><p>Box 4</p></div>
<div class=”col-md-4″><p>Box 5</p></div>
<div class=”col-md-4″><p>Box 6</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-md-4″><p>Box 7</p></div>
<div class=”col-md-4″><p>Box 8</p></div>
<div class=”col-md-4″><p>Box 9</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-md-4″><p>Box 10</p></div>
<div class=”col-md-4″><p>Box 11</p></div>
<div class=”col-md-4″><p>Box 12</p></div>
</div>
</div>

col-md

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

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

 

 

col-sm

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

 

<div class=”container”>
<div class=”col-sm-6 col-md-4″><p>Box 1</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 2</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 3</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 4</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 5</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 6</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 7</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 8</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 9</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 10</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 11</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 12</p></div>
</div>
</div>

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

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

 

<div class=”container”>
<div class=”row”>
<div class=”col-sm-6 col-md-4″><p>Box 1</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 2</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 3</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 4</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 5</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 6</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 7</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 8</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 9</p></div>
<div class=”clearfix visible-md-block”></div>

<div class=”col-sm-6 col-md-4″><p>Box 10</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4″><p>Box 11</p></div>
<div class=”col-sm-6 col-md-4″><p>Box 12</p></div>
</div>
</div>

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

 

<div class=”container”>
<div class=”row”>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 1</p></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 2</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 3</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 4</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”clearfix visible-lg-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 5</p></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 6</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 7</p></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 8</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”clearfix visible-lg-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 9</p></div>
<div class=”clearfix visible-md-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 10</p></div>
<div class=”clearfix visible-sm-block”></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 11</p></div><div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 12</p></div></div></div>

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

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

 

 

 

 

همچنین بررسی کنید

bootstrap

Twitter Bootstrap Grid System

Twitter Bootstrap Grid System   سیستم گرید تویتر بوت استرپ راحت ترین و سریعترین راه …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوسرویس و تعمیر کولر گازی