آموزش طراحی وب Bootstrap
طراحی وب واکنش گرا Bootstrap

آموزش Bootstrap > مقدمه آموزش Bootstrap
آموزش مقدماتی کار با سیستم خانه بندی ( Grid ) در bootstrap

آشنایی اولیه با سیستم خانه بندی ( Grid ) در صفحات bootstrap :

در سیستم خانه بندی bootstrap ، عرض صفحه به 12 خانه مساوی ( Column ) تقسیم می شود . شما می توانید از میزان پهنای این خانه ها برای قرار دادن محتویات مورد نظر خود استفاده نموده و یا با گروه کردن ( Combine ) آنها ، خانه های پهن تری ایجاد کنید .
همانطور که در مثال زیر نشان داده می شود ، ردیف اول دارای 12 ستون است . در این حالت می توانید محتوبات مورد نظر خود را در هر یک این خانه ها قرار دهید ، اما اگر به فضای بیشتری نیاز دارید ، با گروه کردن خانه ها ( که در ادامه به آموزش آن خواهیم پرداخت ) به صورت 2 ، 3 ، 4 ، 5 ، 6 ، 8 ، 10 و یا 12 تایی ، ستون های پهن تری ساخته و استفاده کنید .

سیستم خانه بندی ( Grid ) در bootstrap کاملا واکنش گرا ( Responsive ) بوده و ستون ها می توانند ، نحوه قرار گیری و خروجی خود را بر حسب سایز صفحه تغییر دهند .
برای مثال فرض کنید که 3 ستون مساوی ( span4 ) در عرض صفحه دارید . در یک صفحه نمایش بزرگ ، این 3 ستون در کنار هم و در عرض صفحه قرار خواهند گرفت . اما در یک صفحه نمایش کوجک مثل موبایل ، هر یک از ستون ها ( span4 ) به تنهایی در عرض صفحه نمایش داده شده و دو ستون دیگر به ترتیب زیر هم قرار گرفته و آنها نیز کل عرض صفحه را می پوشانند .
تصویر زیر نحوه نمایش ستون ها در سیستم خانه بندی bootstrap را نشان می دهد :

به این صورت می توانید محتویات خود را فارغ از اینکه ، از قبل بدانید بر روی چه اندازه صفحه نمایشی قرار است نمایش داده شوند ، تنظیم کنید .
نکته : حتما به خاطر داشته باشید که مجموع ستون ها در عرض صفحه ، نبایستی از عدد 12 بیشتر شود .

کلاس های سیستم خانه بندی ( Grid ) در bootstrap :

bootstrap دارای 4 کلاس ( بر حسب سایز صفحه و نوع دستگاه نمایش دهنده محتویات ) برای قالب بندی ستون ها به شرح زیر است :

• کلاس xs که برای صفحات کوچک مثل موبایل استفاده می شود .
• کلاس sm که برای صفحات متوسط مثل تبلت ها به کار می رود .
• کلاس md که برای صفحات نمایش معمولی مثل لپ تاپ ها یا مانیتورها تعیین شده است .
• کلاس lg که برای دستگاه های بزرگ و wide مناسب می باشند .

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

نکته مهم : اگر یک Grid را با کلاس کوچک تر ، مثل xs یا sm تعریف کنیم ، در هنگام نمایش در یک صفحه بزرگ ، خانه ها به صورت هوشمند و واکنش گرا بزرگ شده و خود را با صفحه متناسب می کنند .
به عبارت دیگر ، کلاس های xs یا sm می توانند نقش کلاس های md و lg را بازی کنند . اما برعکس این عمل رخ نمی دهد . یعنی اگر کلاس ، md باشد ، آنگاه در یک صفحه موبایل به صورت نا متناسب نمایش داده خواهد شد .

ساختار پایه یک خانه ( Grid ) در bootstrap :

کد زیر ، ساختار پایه سیستم خانه بندی ( Grid ) در bootstrap را نشان می دهد . کد زیر را به دقت مرور کنید ، در ادامه به تشریح نکات آن خواهیم پرداخت :

کد	<div class="row">       <div class="col-*-*"></div> </div> <div class="row">      <div class="col-*-*"></div>      <div class="col-*-*"></div>      <div class="col-*-*"></div> </div> <div class="row">      ... </div>

در ابتدا یک ردیف ( عرض کلی صفحه را به وسیله یک تگ <div> به صورت <" div class = " row> ) ایجاد می کنیم . سپس نوع و تعداد ستون هایی که می خواهیم در این ردیف نمایش داده شوند را در تگ های درونی <div> اصلی و با خاصیت class برابر با " * - * - col. " تعیین می کنیم .
* اول نشان دهنده نوع صفحه نمایش مورد نظر و ستاره دوم تعداد خانه هایی است که می خواهیم ستون مورد نظر از ( مجموع 12 خانه ) شامل شود . مثلا xs و عدد 4 به مرورگر می گوید که در یک صفحه نمایش موبایل و یا بزرگتر از آن ، عرض صفحه را به 4 قسمت مساوی تقسیم کرده و در هر کدام محتویات مربوطه را نمایش دهد .
در مثال های زیر ، نحوه استفاده از این کلاس ها را در عمل نشان داده ایم :

مثال 1 : یک ردیف 3 ستونه با خانه های مساوی :

مثال : در مثال زیر ، نحوه تعریف یک کلاس 3 ستونه با عرض یکسان را نشان می دهد :
نکته : همانطور که قبلا هم گفته شده و در این مثال مشاهده می شود ، چون کلاس تعیین شده از نوع sm می باشد ، این جدول به صورت واکنش گرا ، برای صفحات بزرگ تر ، خود را بزرگ کرده و 3 ستون را در کنار هم قرار می دهد .
اما در صفحات کوچک موبایل ، ستون ها به ترتیب و زیر یکدیگر جای گرفته ، تا بهتر نمایش داده شوند . برای مشاهده این نوع عمکلرد ، کافی است عرض مرورگر خود را به اندازه یک صفحه موبایل کاهش دهید ، تا نحوه تغییر و واکنش گرایی خانه ها را ببینید :

Example
<div class=" row  text-center ">      <div class="col-sm-4"  style="background-color : blue"> ستون 1  و محتویات آن </div>      <div class="col-sm-4"  style ="background-color : red"> ستون 2 و محتوبات آن</div>      <div class="col-sm-4" style="background-color : green"> ستون 3 و محتویات آن</div> </div>	کد
	خروجی

مثال 2 : تعیین 2 ستون در یک ردیف با پهنای متفاوت :

مثال : مثال زیر ، نحوه تعریف 2 ستون با پهناهای متفاوت را در یک ردیف نشان می دهد :
این دو ستون در صفحات بزرگ در کنار هم و در صفحات کوچک زیر هم قرار می گیرند :

Example
<div class=" row  text-center ">      <div class="col-sm-8"  style="background-color : blue ; height  : 100px"> ستون  بزرگ تر و محتویات آن </div>      <div class="col-sm-4" style="background-color : green ; height : 100px"> ستون کوچک تر و محتویات آن</div> </div>	کد
	خروجی

---

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

---

نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است : بلهخیر نام :                  آدرس Email :       نظر شما :     سوال امنیتی : پایتخت ایران ؟