فصل bootstrap خلاصه قسمت های 1 تا 7 پیرامون grid بندی

فریمورک : یک چهارچوپ کلی یا یک بستر در زمینه های مختلف برای ما به وجود می آورد که یک سری موارد آماده شده

برامون دارد که برای استفاده از آن باید قاعده اون رو رعایت بکنیم  

بخش های اصلی bootstrap 
 

1- layout سیستم grid  بندی فریمورک ما هستش

2- component مشابه اشو در جاهای دیگه داشتیم بخش های آماده ای مثل مودال ها و اکاردیو منو ها

3- content مربوط به بخش های محتوایی مثل تگ های هدینگ  و تگ های پیرامون متن ها 

4- Utility  مشابه آن رو در کدهای css امون به وجود آوردیم و استایل هایی که زیاد استفاده میکنیم رو در غالب کلاس هایی میایم و استفاده میکنیم

layout 

container :  در بر گیرنده تمام صفحه هستش که دو تا  کلاس مهم دارد با نام های container که دارای عرض ثابت هستش و container-fluid  که دارای عرض شناور هستش که میاد و 100 درصد سند مارو پر میکند

نکته : مقدار gap  در ستون های ما حدودا 30 پیکسل هستنش که 15 تا چپ و 15 تا راست هستند

نکته : استفاده از col خالی به معنی یک واحدی هستش و به هر تعدادی که میایم و استفاده میکنیم کلن یک واحد یکسان در نظر میگیرد برای مثال اگر دو تا تگ div  داشته باشیم در داخل یک ردیف با دادن col میاد و اون هارو به دو قسمت مساوی تقسیم میکند 

<div class="container bg-primary">
    <div class="row">
      <div class="col  bg-success">dgfdsf</div>
      <div class="col bg-danger">dgfdsf</div>
    </div>
  </div>

نکته : حال ما بدون در نظر گرفتن اندازه دیوایس ان ها میتوانیم بیایم و با استفاده از تقسیم بندی 12 ستون ها بیایم و این نسبت ها رو نیز اوکی کنیم 

<div class="container bg-primary">
    <div class="row">
      <div class="col-9  bg-success">dgfdsf</div>
      <div class="col-3 bg-danger">dgfdsf</div>
    </div>
  </div>

ما بعد از استفاده از هر container برای درست کردن ردیف در داخل کدهامون باید بیایم و از row ها استفاده بکنیم که یک محدوده پکیج برامون درست میکند که دارای margin-right  :  -15  و  margin-left  : -15 

نکته : کلاس w-100 میاد و عرض 100 درصد رو برای ما قرار میدهد که کلاس های 25 و 50 و 75 را نیز این w دارد همچنین  ما h-100 رو هم مشابه یکی بالایی داریم 

nesting  : ما در داخل بلاک هامون و تقسیم بندی ها می توانیم در داخل هر کدوم نیز به صورت تو در تو از 12 ستون استفاده کنیم که بهتر هستش در داخل آن ها از 3 تا 4 تا بخش حداکثر استفاده نکنیم 

نکته : کلاس no-gutters میگوید که مقدار   margin-right  :  0  و  margin-left  : 0  هستش

order : این خاصیت شبیه به فلکس هستش  و میتوانیم به آن ها مقدار های عددی order-1 و .. بگیرد همچنین برای اول 

المان قرار گرفتن از order-frist و order-last   و همچنین اگر خواستیم در دیوایس های مختلف فقط اول یا آخر قرار گیرد از order-md-last  و  order-small-frist

همچنین برای استفاده از مقادیر دیگر در فلکس میتوانیم به شیوه های align-item-end و  justify-content-center  زیر استفاده میکنیم

همچنین برای دادن مقادیر margin هم میتوانیم به شیوه های 5px  : margin  که خلاصه m-5

mr-auto  و    ml-auto   و  mb-auto  و  mt-auto