مفاهیم پایه ی جداول (Grid)

ساختار Grid در Bootstrap

هر جدول (grid) در Bootstrap می تواند حداکثر ۱۲ ستون در طول صفحه داشته باشد. چنانچه نیاز ندارید که از همه ۱۲ ستون به صورت جداگانه استفاده نمایید می توانید از ستونهای پهن تر استفاده کنید:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

ساختار جدول Bootstrap سازگار (Responsive) بوده و اندازه ستونها با تغییر در اندازه صفحه، تغییر می یابد.

Class های جدول

جداول Bootstrap چهار کلاس CSS ی دارند :

  • xs (برای موبایل)
  • sm (برای تبلت)
  • md (برای دسکتاپ)
  • lg (برای دسکتاپ های بزرگتر)
  • می توان به منظور بدست آوردن ساختار منعطف تر، ترکیبی از کلاس های نامبرده را با همدیگر استفاده نمود.

    ×چنانچه با مفهوم کلاس آشنا نمی باشید، لازم است تا در مفاهیم مربوط به css آن را جستجو نمایید.

    ساختار پایه ی جداول Bootstrap

    کد زیر نمونه ای از یک جدول ساده در BS می باشد :

    <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>
    
 تحریریه وب سایت بیاموز