bootstrapدر این قسمت بخش grid در بوتسترپ را با یک مثال آموزش میدم :

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

هر سطر هم توسط کلاس span به 12 ستون تقسیم میشود

در واقع به کمک grid یک صفحه را به بخش هاس مختلف تقسیم میکنیم تا بتوانیم داخل هر بخش محتوای ( متن – عکس – ویدیو و.. ) قرار دهیم

طبق طرح زیر content ما 10 ستون  و بخش سایدبار 2 ستون می باشد

 

131131

 

 

 

 

 

 

 

گریدبندی تو درتو (Nesting) :

برای اینکه هر ستون را دوباره تقسیم بندی کنیم باید یکبار دیگر  کد زیر را قرار دهیم بعد کد span

مثلا برای تقسیم بندی span9 طبق شکل زیر آن را به دو ستون 6 و 3 تقسیم کردیم

 

grid1

مثال عملی برای گرید بندی در بوتسترپ :

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

homeword1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 کد بخش index.html :

 

 

 کد فایل style.css :

 

 

دانلود کل پروژه با حجم 2 مگابایت از لینک زیر :

bootlearn

Like
0

دسته بندی‌ها: آموزش,طراحی وب

برچسب‌ها : <<,>>

دیدگاه خود را بنوبسید