استفاده از Gridها در Bootstrap

مسعود صدری
بهمن 29, 1398

 

دانلود ویدیو

 

مفهوم Grid در CSS بر اساس Flexbox ساخته شده و یکی از کاربردی‌ترین مفاهیم در این زبان است. از Grid در Bootstrap هم استفاده شده است. Grid در Bootstrap نسخه ۴ از Layoutهای ریسپانسیو استفاده می‌کند.

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

این سیستم از Containerها، سطرها و ستون‌ها تشکیل شده است. در ادامه به بررسی اینها می‌پردازیم.

 

[button class=”github-btn” href=”http://frontcast.ir/css-flexbox”]ویدیوی آموزشی: Flexbox در CSS[/button]

 

Containerها:

یک المنت با کلاس سی‌اس‌اس container است  که قسمت اصلی سیستم گرید در نظر گرفته شده و برای کنترل عرض Layout اصلی استفاده می شود. این Layout شامل همه المنت های موجود در صفحه است. به این معنی که صفحه شما باید ساختار زیر را داشته باشد:

 

<body>
   <div class="container">
    ...
   </div>
</body>

 

کلاس container بر اساس اندازه عرض Layout،‌ عرض صفحه را تنظیم می‌کند. محتوا را در وسط صفحه قرار می‌دهد و آن را به صورت افقی تنظیم می‌کند. فضایی مساوی مابین container در قسمت‌های چپ و راست صفحه وجود دارد.

عرض container در بوت استرپ ۴ برای همه صفحات تعریف شده است. اندازه های دقیق تر را از اینجا می‌توانید ببینید.

یک container full-width، با در نظر گرفتن عرض لایه اصلی، صد در صد صفحه را می‌گیرد. برای استفاده از آن می‌توانیم کلاس container-fluid. را اضافه کنیم.

 

<div class="container">
  Hello! I am in a simple container.
</div>

<div class="container-fluid">
  Hello! I am in a full-width container.
</div>

 

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

ردیف‌ها:

ردیف‌ها (Rows) قسمت‌های افقی از صفحه نمایش هستند. برای استفاده از آنها می‌توانیم کلاس row. را به پروژه اضافه کنیم.

 

<div class="row">
  ...
</div>

 

مهمترین چیزهایی که در مورد ردیف‌ها در Bootstrap باید بدانیم:

فقط برای قسمت‌هایی که شامل ستون ها هستند، استفاده می‌شود. اگر المنت‌های دیگری را در داخل سطر به همراه ستون ها قرار دهیم، نتیجه درستی بدست نمی‌آید.

 

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

 

ستون ها باید زیر مجموعه سطرها باشند. در غیر این صورت آنها تنظیم نخواهند شد. ستون‌ها و سطرها به شکلی ایجاد شده‌اند که با هم استفاده شوند.

ستون‌ها:

ستون‌ها (Columns) به شما کمک می‌کنند تا صفحه را به صورت افقی تقسیم کنید.

اگر یک ستون را در یک سطر قرار دهید، همه عرض را می‌گیرد. اگر دو ستون اضافه کنید هریک از آنها نصف عرض را می‌گیرد.

 

<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
</div>

 

تنظیم اندازه ستون‌ها:

با استفاده از کلاس سی‌اس‌اس col.، می‌توانیم عرض ستون را تنظیم کنیم. اما کلاس‌های دیگری هم برای تعریف ستون ها وجود دارند.

فرض کنید Gridها در Bootstrap شامل ۱۲ ستون هستند. هر سایزی از ۱ تا ۱۲ را می‌توانیم استفاده کنیم. به عنوان مثال برای اضافه کردن ۳ ستون مساوی، می‌توانیم از کلاس col-4. استفاده کنیم. در این مثال سایزهای مختلف را بررسی کرده‌ایم:

 

<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-6">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-5">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>

 

اگر جمع ستون‌ها (Cols) به ۱۲ نرسد، همه سطر پر نخواهد شد. همین طور اگر جمع ستون‌ها از ۱۲ بیشتر شود، به سطر بعدی اضافه می‌شوند.

 

[button class=”github-btn” href=”http://frontcast.ir/course/css”]دوره جامع CSS[/button]

 

دیدگاه‌ها:

simin

اسفند 5, 1398  در  1:49 ق.ظ

استاد صدری دستتون درد نکنه برای اینکه سرشار از انرژی درس میدید با تدریس خوبتون من اشتیاقم به یادگیری خیلی بیشتر میشه

مسعود صدری

اسفند 6, 1398  در  2:51 ب.ظ

خیلی ممنون از لطفتون.

افزودن دیدگاه جدید