ایجاد شده در ۰۶ فروردین ۱۴۰۰
فریمورک : یک چهارچوپ کلی یا یک بستر در زمینه‌های مختلف برای ما به وجود می‌آورد که یک سری موارد آماده شده
برامون دارد که برای استفاده از آن باید قاعده اون رو رعایت بکنیم
بخش‌های اصلی bootstrap
۱- layout سیستم grid بندی فریمورک ما هستش
۲- component مشابه اشو در جاهای دیگه داشتیم بخش‌های آماده ای مثل مودال‌ها و اکاردیو منو‌ها و کراسول ها
۳- content مربوط به بخش‌های محتوایی مثل تگ‌های هدینگ و تگ‌های پیرامون متن ها
۴- Utility مشابه آن رو در کدهای css امون به وجود آوردیم و استایل هایی که زیاد استفاده میکنیم رو در غالب کلاس هایی میایم و استفاده میکنیم مثل text-center و relative
layout
xs = max-width : 576px / sm = min-width : 576px
md = min-width : 768px / lg = min-width : 992px / xl = min-width : 1200px
نکته : ما وقتی میایم و برای یک دیوایس مشخص مثلا از یک گرید متناسب با sm استفاده میکنیم و فقط همون رو می‌نویسیم میاد و اون رو برای مقادیر بالاترش هم بسط میدهد و برای اون‌ها هم اعمال میکند و برای دیوایس‌ها و گرید‌های مختلف اعمال میکند
استفاده از CDN باعث میشه که سرعت لود سایت امون بالاتر بره
container : در بر گیرنده تمام صفحه هستش که دو تا کلاس مهم دارد با نام‌های container که دارای عرض ثابت هستش و میاد و در وسط سند ما قرار میگیرد و container-fluid که دارای عرض شناور هستش که میاد و ۱۰۰ درصد سند مارو پر میکند همچنین برای درست کردن یک ردیف بهتر هستش که بیایم و از کلاس row استفاده بکنیم که تمام عناصر رو برای ما در یک ردیف قرار میدهد
نکته : کلاس‌های container و container-fluid به طور پیش فرض مقدار padding چپ و راست 15 پیکسلی دارند ولی در row مقدار margin های راست و چپ 15 پیکسلی دارد که اون عنصر داخلیش میاد و لب به لب می‌چسبد به پدرش همچنین تمام تگ‌های div ما یک مارجین چپ و راست 15 پیکسلی دارند که برای ما یک جور گپ رو ایجاد میکند
نکته : مقدار gap در ستون‌های ما حدودا ۳۰ پیکسل هستنش که ۱۵ تا چپ و ۱۵ تا راست هستند
نکته : استفاده از 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>حال اگر خواستیم این دیوایس‌ها فقط در یکسری کوری‌های مختلف بیاین و برقرار باشند بعد از col نام اون کوری رو هم قرار میدهیم مثل col-sm و col-md که میاد و از اون مدیا کوری که مشخص کردیم به بالا ترش رو برای ما اعمال میکند
نکته : حال ما بدون در نظر گرفتن اندازه دیوایس ان‌ها میتوانیم بیایم و با استفاده از تقسیم بندی ۱۲ ستون‌ها بیایم و این نسبت‌ها رو نیز اوکی کنیم
<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>
نکته : کلاس w-۱۰۰ میاد و عرض ۱۰۰ درصد رو برای ما قرار میدهد که کلاس‌های ۲۵ و ۵۰ و ۷۵ را نیز این w دارد همچنین ما h-۱۰۰ رو هم مشابه یکی بالایی داریم
nesting : ما در داخل بلاک هامون و تقسیم بندی‌ها میتوانیم در داخل هر کدوم نیز به صورت تو در تو از ۱۲ ستون استفاده کنیم که بهتر هستش در داخل آن‌ها از ۳ تا ۴ تا بخش حداکثر استفاده نکنیم
نکته : کلاس no-gutters میگوید که مقدار margin-right : ۰ و margin-left : ۰ هستش
order : این خاصیت شبیه به فلکس هستش و میتوانیم به آن‌ها مقدار‌های عددی order-۱ و .. بگیرد همچنین برای اول
المان قرار گرفتن از order-frist و order-last و همچنین اگر خواستیم در دیوایس‌های مختلف فقط اول یا آخر قرار گیرد از order-md-last و order-small-frist
همچنین برای استفاده از مقادیر دیگر در فلکس میتوانیم به شیوه‌های align-item-end و justify-content-center زیر استفاده میکنیم
همچنین برای دادن مقادیر margin هم میتوانیم به شیوه‌های ۵px : margin که خلاصه m-۵
mr-auto و ml-auto و mb-auto و mt-auto