به اموزش بخش اول خوش امدید...
در بوت استرپ به صورت پیش فرض یک صفحه را به 12 قسمت تقسیم بندی میکند. و در ستون های 12 تایی میتوانیم صفحات خود را داشته باشیم و اینکه صفحات چه سایزی داشته باشن باید کلاس برای آنها تعریف کنیم.
در بوت استرپ 4 سایز پیش فرض داریم :
SM = small = 576px
md = middle =768px
lg = large = 922px
xl = xlarge = 1200px
4 سایز مختلف برای صفحه وب تعریف شد که اندازه انها به px در مقابل آن ذکر شده است و معنا ان به این صورت است که 576 px بیانگر این است که ستون ها 576 px از فضا را اشغال میکنند که در واقع همان پهنا صفحه است.
وقتی سطری را ایجاد میکنیم 12 ستون در آن میتواند قرار بگیرد که بستگی به تعداد ستون ها , ابعاد را متغیر میکند
برای شروع ابتدا در <body> یک سطری را ایجاد میکنیم :
<div class = "row>
<div class ="col-sm-1">kimia</div>
</div>
توضیح کد بالا: ابتدا یک سطری را ایجاد کردیم و در درون آن سطر یک ستون از 12 ستون را با سایز sm در اختیار قرار دادیم
اگر داخل سطر مورد نظر تعداد ستون ها بیشتر از 12 شود (همانطور که گفته شد بیشترین مقدار 12 است) در ان خط و سطر نمیگنجد و به سطر بعدی انتقال پیدا میکند.
در حالت optional داریم :
<div class="row">
<div class="col">number 1 </div>
<div class="col">number 2 </div>
</div>
توضیح کد :وقتی در کنار col چیزی نوشته نشده و برای ان سایز و اندازه ذکر نشده به صورت خودکار برای هر کدام 50% از محیط را اختصاص میدهد چون 2 ستون ذکر شده است 50% را number 1 و 50% را number 2به خود اختصاص میدهد اما اگر تعداد بیشتر بود محیط تقسیم بر تعداد میشود (مثلا اگر 3 تا باشد هر کدام 33.3% را پوشش میدهد.)
ترکیبی:
<div class="row">
<div class="col-sm-4 col-md-5 > number 1 </div>
<div class="col-sm-4 col-md-3 > number 1 </div>
<div class="col-sm-4 col-md-4 > number 1 </div>
</div>
همان طور که گفته شد برای حالت sm حداقل 576 px در نظر گرفته شده است اگر اندازه صفحه از 576 تا 767 باشد از حالت sm تبعیت میکند و تقسیم بندی را همان طور که ذکر شده به صورت 4-4-4 انجام میشود.
اما اگر اندازه بیشتر از 768 px باشد به حالت md رفته و صفحه را به همان اندازه و نسبت خودش که تعریف کرده یعنی 5-3-4 تقسیم میکند.
