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

 

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

 

بخش‌های اصلی 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>

 

    xs  Extra Small < 576pxportrait mobile   sm  Small > 576pxlandscape mobile   md  Medium > 768pxportrait tablets      lg  Large > 992pxlandscape tablets     xl  Extra Large > 1200pxlabtops  desktops   tvs

 

ما بعد از استفاده از هر 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