ویب سائٹ ڈیمو – صفحہ لے آؤٹ بلاکس
سائٹ کے اندر موجود تمام صفحات صفحہ کے عنوانات اور حصوں پر مشتمل ہیں۔ ان حصوں کو پھر گروپوں، گرڈز، فہرستوں اور کالموں میں منظم کیا جا سکتا ہے۔
صفحہ کے حصے اور پس منظر
صفحہ کے حصے ایک اختیاری پس منظر کی لہر کے گرافک کے ساتھ مکمل چوڑائی والے حصے ہوتے ہیں، جنہیں اوپر، درمیان یا نیچے رکھا جا سکتا ہے۔ بلاکس کا کوئی بھی گروپ جو ایک مشترکہ پس منظر کا رنگ رکھتا ہے – چاہے وہ رنگ سفید ہی کیوں نہ ہو – صفحہ کے سیکشن بلاک کے اندر اندر بنایا جانا چاہیے۔ اس میں صفحہ ہیڈر بلاک اور تعریفی carousel بلاک شامل ہیں، جو اپنے مکمل چوڑائی والے کنٹینرز کے ساتھ آتے ہیں۔
ایکوا پس منظر، لہر پوزیشن میں اوپر
سفید پس منظر، کوئی گرافک نہیں۔
نارنجی پس منظر، لہر کی پوزیشن درمیان میں
جامنی پس منظر، لہر کی پوزیشن نیچے
گرڈ اور کالم
گرڈز
گرڈ ہر قطار میں کسی بھی تعداد میں آئٹمز ہو سکتے ہیں۔ اس کے بعد آئٹمز بائیں سے دائیں دکھائے جاتے ہیں، اور قدرتی طور پر ایک نئی لائن پر لپیٹ جاتے ہیں۔ تمام اشیاء ایک گرڈ میں برابر اونچائی پر ہیں.
آئٹم 1
آئٹم 2
آئٹم 3
آئٹم 4
آئٹم 5
کالم
کالموں کی تعداد کا انتخاب کریں، پھر ہر کالم میں آئٹمز شامل کریں۔ ایک کالم میں آئٹمز دوسرے کالم کے آئٹمز سے مختلف اونچائیاں ہو سکتی ہیں۔
کالم 1، آئٹم 1
کالم 1، آئٹم 2
کالم 2، آئٹم 1
کالم 2، آئٹم 2
کالم 2، آئٹم 3
پیڈنگ اور بلاک اسپیسنگ
بلاکس کے اندر پیڈنگ ہو سکتی ہے تاکہ متن بالکل کنارے سے ٹکرا نہ جائے۔ ان کے پاس بلاکس کے درمیان پہلے سے طے شدہ وقفہ کاری اور مارجن بھی ہوتا ہے۔ ان تمام ترتیبات کو کیس بہ کیس کی بنیاد پر اپنی مرضی کے مطابق بنایا جا سکتا ہے۔
پیڈنگ: 0px
پیڈنگ: 10px
پیڈنگ: 20px (پہلے سے طے شدہ)
پیڈنگ: 30px
پیڈنگ: 40px
پیڈنگ: 60px
پیڈنگ: 80px
پیڈنگ: 120px
بلاک اسپیسنگ: 0px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 10px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 20px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 30px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 40px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 60px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 80px
آئٹم 2
آئٹم 3
بلاک اسپیسنگ: 120px
آئٹم 2
آئٹم 3