یکی از اصلی ترین دلایل استفاده از بوت استرپ Grid بندی صفحه است که به کمک اون خیلی راحت میشه از دست جداول و به هم ریختگی Div ها راحت شد.

در بوت استرپ هر ناحیه به 12 قسمت تقسیم میشه. (علت استفاده از عدد 12 فکر میکنم اینه که به اعداد بیشتری تقسیم پذیر هست: مثل 1و2و3و4و6)

برای شروع بخش بندی صفحه همیشه ابتدا یک Div با کلاس Container میگذاریم و تمام عناصر صفحه را داخل این Div میگذاریم. برای بخش بندی ها همیشه با یک div با کلاس Row شروع میکنیم که معادل یک dr میباشد.

حالا داخل این row میتوانیم div های دیگری بگذاریم مثلا اگر بخواهیم دو div داشته باشیم که هر دو یک اندازه باشند و کل ناحیه را بگیرند برای هر کدام از این div ها کلاس col-md-6 را میگذاریم. باید توجه داشته باشیم که در هر row (هرناحیه) جمع این اعداد نباید بیشتر از 12 باشد مثلا در مثال بالا دوتا 6 تا داریم.

col-md-6 : در این مثال md یعنی medium به این منظور که تا جایی که صفحه medium است div ها به اصطلاح نشکند و زیر هم قرار نگیرد و از آن اندازه کوچکتر بشکند. اگر مرورگر را خودتان resize کنید و کوچک کنید از یک جایی به بعد div ها میشکند.

به جز md چند حالت دیگر هم در بوت استرپ داریم مثل:

Tablet>     Small              : sm

Mobile>     Extra Small      : xs

Monitor>   Medium           : md

LCD    >    Large              :lg

شیفت دادن ستون ها:

با دستور offset به صورت مثلا col-md-offset-3 سه واحد به جلو حرکت میدهد. البته میتوان از دستور push یا pull هم استفاده کرد. تفاوت offset با push این است که offset بقیه عناصر را هم به جلو شیفت میدهد اما push روی بقیه عناصر می اندازد.


راستی برای نصب آخرین ورژن بوت استرپ کافیست دستور زیر رو در nuget بزنید.

install-Package Bootstrap

bootstrap theme:

در کنار فایل های اصلی بوت استرپ یک فایل bootstrap-theme.css هم وجود داره. این فایل استایل سه بعدی و قشنگ تری به عناصر بوت استرپ میده و باید حواستون باشه بعد از فایل اصلی بوت استرپ لود بشه.

خودتون یک دکمه اضافه کنید و یک بار با قرار دادن لینک theme و یکبار هم بدون آن صفحه را تست کنید خودتون متوجه زیباییش میشید.


bootstrap right to left:

آقای مرتضی انصاری نیا در nuget زحمت کشیدن و بوت استرپ رو راست به چپ کردن که برای صفحات فارسی مناسب.

https://github.com/morteza

دریافت بوت استرپ راستچین شده
حجم: 24.3 کیلوبایت