خلاصه کل مطالب بوت استرپ ( مرتب شده )

نکته : ما هر موقع خواستیم بیایم و یک ردیف رو برای پروژه هامون در نظر بگیریم حتما حتما باید بیایم و از row درون اون ها استفاده بکنیم همچنین برای order ها ما از ستون هامون از 0 شروع می شوند  

نکته : در هنگام استفاده از offset ها در پروژه هامون باید مجموع ستون هامون زوج باشد تا بتونیم راحت تر از اون استفاده بکنیم 

div.row 
       div.col-sm-6.col-md-4.col-lg-6.offset-md-2.offset-lg-0
       div.col-sm-6.col-md-4.col-lg-6

 برای استفاده فلکس باکس ها در در بوت استرپ از کلاس های مربوط به آن ها استفاده میکنیم 

align-items-end / center / around / baseline / start / end   
کلمه آخر مقدار بدون flex 
بقیه پراپرتی ها و کلاس ها هم به شیوه بالایی هستش 
align-self ....  justify-content

نکته : مقدار   mx-auto  و my-auto  به معنای این هستش که در راستای محوره های x  و y بیا و مقدار مارجین auto بگیر

نکات مطالعه داکیومنت اصلی : ( مطالبی که از نظر خودم به درد بخور هستن رو آوردم در نتیجه کامل نیست ! ) 

1 - ترکیب container   با  container-fluid  یک موقعی هستش که ما میخایم اون اندازه دیوایس امون بیاد و در دیوایس های مثلا md  به بالا به اندازه همون سایز های خود بوت استرپ باشه مثلا 768 و پایین تر از اون عرض های 100 درصد بگیره برای این منظور کافیه فقط به کانتیر امون بیایم و از تقسیم بندی دیوایس ها استفاده کنیم به طور مثال به شکل زیر  container-md که میاد در دیوایس های xs  و sm مقدار 100 درصد و در بالاتر مقادیر عددیش اون رو میگیرد

2 - ما میتونیم بیایم و برای ردیف هامون به صورت شرطی اون هارو انجام بدهیم  یعنی مثلا بیایم و بگیم که هر ردیف مثلا چن تا ستون بگیره  برای مثال row-cols-3 که میاد و برای هر ردیف کلن 3 تا برامون  قرار میدهد همچنین می تونیم بیایم و برای دیوایس های مختلف هم براش تایین کنیم  row-cols-sm-3  که فقط برای مقادیر  sm برای ما 3 تا ردیفی میکنه 

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

نکته : ما می توانیم برای استفاده از فلکس هم بیایم و  از دیوایس های مختلف استفاده کنیم

justify-content-md-center  همچنین برای استفاده از فلوت ها هم می توانیم به شیوه زیر استفاده کنیم

float-md-end

نکته : استفاه از gutter ها که به 3 صورت می تونیم استفاده میکنیم یکی در محور  افقی  gx-0   gx-5  و دومی در محور عمود gy- 0  gy-5   و دومی به صورت کلی به صورت g-0   g-5  و آخری هم به صورت ترکیب با دیوایس های مختلف gx-m-5  

استفاده از  z-index ها به صورت زیر است 

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas:                  1040;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

نکته : برای customize کردن المنت هامون نیایم و به کلاس های خود فریمورک کلاس بدیم بلکه از یک کلاس یا ایدی جداگونه بیایم و استفاده بکنیم  و یا اولش از کلمه custom استفاده بکنیم 

 Utilites : 

* برای استفاده از خاصیت border  در عناصرمون از کلاس هاس border / border-top / border-bottom / border -left border-right همچنین برای حذفی دادن یعنی به ی قسمت فقط ندیم هم از کلاس های border-۰ / border-top-۰ border-bottom-۰ /  border-left-۰ / border-right-۰ همچنین برای دادن رنگ به آن ها کافیست بعد از border  از کلاس های رنگی با نام های  primary / secondary / success / danger /warning / info / light / dark / white با استفاده از یک - بهش بدهیم همچنین برای گرد کردن border هم از کلاس هایی زیر استفاده میکنیم rounded / rounded-۰ /rounded -top  rounded -left / rounded -right /rounded -circle / rounded -bottom همچنین می توانیم با استفاده از مطالبی که در گرید گفته شده است هم بیایم و اون هارو از لحلظ سازی مرتب بکنیم مثل round-sm

---------------------------------------------------------------------------------------------

* clear-fix برای قرار گرفتن درست المان هامون موقعی که میایم و از خاصیت های float  استفاده میکنیم به المان هامون این کلاس رو میدهیم همچنین برای استفاده از فلوت ها هم میتوانیم از کلاس float-none / float-right / float-left

و یا این که به صورت شرطی از اون ها استفاده کنیم float-md-left 

---------------------------------------------------------------------------------------------

* close icon 

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

---------------------------------------------------------------------------------------------

* برای دادن رنگ به المان هامون کافی است بیایم و از کلاس های رنگی border استفاده کنیم با این تفاوت که به جای استفاده از border-  از text-  برای متن ها و از -bg  برای بک گراند هامون استفاده بکنیم

---------------------------------------------------------------------------------------------

* برای دادن display به المان هامون در ابتدا سه کلاس با نام های d-inline و d-block و d-none داریم همچنین می توانیم به صورت شرطی نیز بیایم و استفاده نیز بکنیم  d-none d-sm-block و  d-none d-lg-block d-xl-none

---------------------------------------------------------------------------------------------

* برای استفاده از فلکس در داخل بوت استرپ در ابتدا کافی است به المان هامون بیایم و کلاس های d-flex / d-inline-flex و یا هم به صورت شرطی d-md-flex  و بقیه ویژگی های فلکس هم با نام پراپرتی و مقدارش می توانیم استفاده بکنیم مثلا justify-content-center 

---------------------------------------------------------------------------------------------

* برای استفاده از سایه ها shadow  هم ما به طور کلی ۴ تا کلاس داریم با نام های shadow / shadow-none / shadow-lg / shadow-sm 

---------------------------------------------------------------------------------------------

* استفاده از کلاس text-hide  برای موقعی هستش که ما یک متن داریم ولی میخاهیم به جای متن از تصویر استفاده بکنیم

<h1 class="text-hide" style="background-image: url('/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

---------------------------------------------------------------------------------------------

* embeds برای اضافه کردن یک فایل ویدیویی یا صوتی یا یک تگ ویدیو به کد هامون هستش که جون ما بیشتر برای نمایش ویدیو ها میایم و از پلیر های جاوااسکریپتی یا تگ ویدیو html استفاده میکنیم زیاد کاربردی نیستش این تگ

---------------------------------------------------------------------------------------------

* استفاه از این سه کلاس برای این هستش که در هنگام انتخاب کردن متن ها به ۳ صورت عدم انتخاب  انتخاب جمله و انتخاب کلمه رو استفاده بکنیم  user-select-all و  user-select-auto  و user-select-none 

---------------------------------------------------------------------------------------------

* برای استفاده از فلکس در داخل بوت استرپ در ابتدا کافی است به المان هامون بیایم و کلاس های d-flex / d-inline-flex و یا هم به صورت شرطی d-md-flex  و بقیه ویژگی های فلکس هم با نام پراپرتی و مقدارش می توانیم استفاده بکنیم مثلا justify-content-center 

---------------------------------------------------------------------------------------------

* برای استفاده از سایه ها shadow  هم ما به طور کلی ۴ تا کلاس داریم با نام های shadow / shadow-none / shadow-lg / shadow-sm 

--------------------------------------------------------------------------------------------

* برای تبدیل کردن مثلا کارد هامون به صورت یک اینک برای ارجاع داده شدن کافیست بیایم و در تگ a اصلی  کلاس Stretched link  بدهیم  که محدوده کلیک رو به پرنت یا والدش هم میدهد

--------------------------------------------------------------------------------------------

* برای استفاد از پوزیشن های مختلف میتوانیم از کلاس های زیر بیایم و استفاده بکنیم position-fix / fix-top /

 fix-bottom  / position-static / position-relative / position-absolute  / position-sticky sticky-top

--------------------------------------------------------------------------------------------

*   برای مبحث سایز ها در داخل بوت استرپ ما برای عرض ها چهارتا کلاس درصدی داریم w-۲۵ / w-۵۰ / w-۷۵ / w-۱۰۰

h-۲۵ / h-۵۰ / h-۷۵ / h-۱۰۰ و همچنین مقادیر auto  هم داریم و کلاس های ماکسیمم و مینیم هم استفاده بکنیم

mh-۱۰۰ / mw-۱۰۰ همچنین میتوانیم بیایم و از viewport  ها هم استفاده بکنیم با نام های vh-۱۰۰ و vw-۱۰۰ و 

min-vw-۱۰۰  و  max-vw-۱۰۰ 

--------------------------------------------------------------------------------------------

* برای استفاده از overflow در المان هامون هم میتوانیم از کلاس های over-flow-auto  و  over-flow-hidden  استفاده بکنیم 

--------------------------------------------------------------------------------------------

* برای فاصله گزاری ها هم ما در بوت یکسری کلاس برای مارچین ها و پدینگ ها داریم  mx px my py  mr ml mt mb  که از ۱ تا ۵ میگیرد و مقادیر اون بر اساس مقادیر rem هستش که به صورت .۲۵ بالا میرود و برای منفی دادن هم باید از -n۱  تا -n۵  استفاده بکنیم و با استفاده از auto  هم میتوانیم از وسط چین کردن ها هم استفاده بکیم مثلا mx-auto  وسط چپ و راست المان پدر قرارش میدهد

--------------------------------------------------------------------------------------------

- کلاس های متن برای align  کردن متن هامون که کلاس های text-justify و text-right و text-left و text-center و text-sm-left و..

--------------------------------------------------------------------------------------------

- برای استفاده از خاصیت overflow از دو تا کلاس با نام های text-wrap و text-nowrap رو در داخل متن های ما کنترل میکند

--------------------------------------------------------------------------------------------

- کلاس word-wrap کلمه یا کلاس رو وقتی جا نمی شد میومد میشکوند و مینداخت لاین بعدی کلاس text-break میاد و کل جمله رو میشکونه و میندازه لاین بعدی

--------------------------------------------------------------------------------------------

- برای تبدیل و کار با حروف انگلیسی که سه تا کلاس با نام های text-lowercase و text-uppercase و text-capitalize

--------------------------------------------------------------------------------------------

- برای کار کردن و زخیم کردن فونت هامون که کلاس هایی با این عنوان font-weight-bold و font-weight-bolder و font-weight-normal و font-weight-light و font-weight-lighter و font-italic

--------------------------------------------------------------------------------------------

- کلاس text-reset  برای این هستش که میاد و رنگ متن های مارو به صورت ارث بری از والدش به ارث می برد 

--------------------------------------------------------------------------------------------

- برای تراز کردن المان هامون هستش align-baseline / align-top / align-middle / align-bottom / align-text-top

 align-text-bottom  که همان استفاده از خاصیت vertical-align  هستش 

--------------------------------------------------------------------------------------------

- برای نمایش و عدم نمایش یک المان یا به عبارت visibility  المان هامون می توانیم از کلاس های  .visible  .invisible. استفاده بکنیم  

--------------------------------------------------------------------------------------------

- برای نگرفتن مقدار text-decoration هم کافی است که بیایم و کلاس text-decoration-none رو بهش بدهیم

Content

* reboot در داخل بوت اسنرپ شبیه به همون فایل های reset امون هستش که یکسری استایل پیش فرض به عناصر امون میدده

* کلاس های display-۱  که تا ۵ می رود برای متون ما کاربرد دارد که برای مبحث heading  کاربرد دارد

* برای این که به لیست هامون بگیم که بولت نداشته باشن به لیست هامون کلاس list-unstyled رو میدهیم همچنین اگر خواستیم که لیست های ما به صورت inline بشن باید  به ul  کلاس list-inline رو بدهیم و به li ها هم کلاس list-inline-item  رو بدهیم 

* برای ریسپانسیو کردن یک تصویر کافی است که بیایم و از کلاس img-fluid استفاده بکنیم

* استفاده از چندیدن تصویر با استفاده از تگ picutre که تگ سورس اشو میایم و به صوتر جداگانه قرار میدهیم ( یک تصویر که یکسری فرمت های دیگری رو دارد )

* برای کار کردن با جدول ها ما اگر کلاس tabel-dark رو بهش بدهیم میاد بک رو عوض میکند thead-dark thead-light و thead-stripred که زوج زوج ردیف هارو میاد و عوض میکند و کلاس tabel-border و tabel-borderless tabel- hover و برای رنگ هم برای سلول ها با شیوه tabel- nameboot  استفاده میکنیم   

* استفاده از تگ و کلاس های figure  و  figurecaption