فصل bootstrap خلاصه مطالب Utilites

خلاصه مطالب Utilites : 

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

* برای استفاده از خاصیت border  در عناصرمون از کلاس هاس border / border-top / border-bottom / border -left

border-right همچنین برای حذفی دادن یعنی به ی قسمت فقط ندیم هم از کلاس های border-0 / border-top-0 border-bottom-0 /  border-left-0 / border-right-0 همچنین برای دادن رنگ به آن ها کافیست بعد از border  از کلاس های رنگی با نام های  primary / secondary / success / danger /warning / info / light / dark / white با استفاده از یک - بهش بدهیم

همچنین برای گرد کردن border هم از کلاس هایی زیر استفاده میکنیم rounded / rounded-0 /rounded -top 

rounded -left / rounded -right /rounded -circle / rounded -bottom

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

* 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 

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

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

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

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

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

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

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

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

* برای استفاده از فلکس در داخل بوت استرپ در ابتدا کافی است به المان هامون بیایم و کلاس های d-flex / d-inline-flex

و یا هم به صورت شرطی d-md-flex  و بقیه ویژگی های فلکس هم با نام پراپرتی و مقدارش می توانیم استفاده بکنیم مثلا 

justify-content-center 

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

* برای استفاده از سایه ها shadow  هم ما به طور کلی 4 تا کلاس داریم با نام های 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-25 / w-50 / w-75 / w-100

h-25 / h-50 / h-75 / h-100 و همچنین مقادیر auto  هم داریم و کلاس های ماکسیمم و مینیم هم استفاده بکنیم

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

min-vw-100  و  max-vw-100 

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

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

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

* برای فاصله گزاری ها هم ما در بوت یکسری کلاس برای مارچین ها و پدینگ ها داریم  

mx px my py  mr ml mt mb  که از -1 تا -5 میگیرد و مقادیر اون بر اساس مقادیر rem هستش که به صورت .25 بالا میرود و برای منفی دادن هم باید از -n1  تا -n5  استفاده بکنیم و با استفاده از 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. استفاده بکنیم