Grid (کانال) چه است ؟
در پباده سازی گرافیکی یک کانال ساختاری میباشد ( معموملا دو بعدی) که بوسیله خطوط متقاطع (عمودی ،افقی) ساخت میگردد. این نحوه به طور عظیم ای در محتواهایی که برای چاپ استعمال میشوند کاربرد دارااست. در طراحی وب سایت این طریق ماثری برای ساخت و ساز سریع لایه های قالب و به کارگیری از HTML و CSS میباشد.
در یک تعریف و تمجید بی آلایش کانال ها (Grid) در ساخت وب سایت برای سازماندهی و ساختار دهی محتوا می‌باشند.
ساختار Grid در Bootstrap چه‌طور میباشد؟
Bootstrap دارنده ساختار Grid واکنشگرایی است که به ۱۲ ردیف تقسیم گردیده که با به کار گیری از کلاس های از پیش تمجید گردیده می اقتدار آن‌ها را با هم مخلوط کرد.
در Bootstrap 3 پباده سازی نخست برای صفحه ها اکران کوچک مثل تلفن همراه وتبلت در حیث گرفته شده‌است و بعد از آن کامپوننت ها و Grid برای صفحه های اکران گسترده توسعه و گسترش داده میگردد.
استعمال از سیستم Grid در Bootstrap
سیستم Grid برای ساخت و ساز لایه هایی در کاغذ که از سطر ها و ردیف ها تشکل شده‌است و محلی برای محتوای شما میباشد ساخته شده میباشد .
شیوه عمل سیستم Grid به شرح ذیل میباشد :
همه سطرها (Rows ) می بایست در کلاسی به اسم container. برای داشتن ترازی مطلوب قرار گیرند.
از سطرها (Rows ) برای ساخت‌و‌ساز ردیف های (columns ) افقی استعمال میکنیم.
محتوا بایستی در درون ردیف ها (columns) قرار گیرد
کلاس های Grid از پیش تمجید گردیده ای مانند row. و col-xs-4. برای تولید سریع لایه ها وجود دارااست.
ردیف های Grid توسط ۱۲ ردیف جان دار می بایست معلوم شوند برای مثال ۳ ردیف هم اندازه در برگه از این کلاس به کارگیری می نمایند: col-xs-4.
ساختار مبنا Grid
ساختار مبنا سیستم Grid :
.
نمونه سیستم Grid در Bootstrap :
درین بخش یک نمونه بی آلایش Grid به همپا یک لایه ساخت میکنیم که مشتمل بر ۲ ردیف که هر ردیف دربرگیرنده ۲ پارگراف میگردد:
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
جزئیات :
عنصر
…
بدین استدلال اضافه شده‌است که مطمئن شویم لایه ساخت گردیده حداکثر پهنا کاغذ را دارد و در راءس جای دارد.
بعداز اضافه کردن container نیاز به اضافه کردن سطر با به کار گیری از
…
و همینطور ردیف داخل هر سطر با استعمال از
است.
هر سطر در grid توسط ۱۲ واحد تاسیس شده است و شما میتوانید اندازه ردیف ها را با استعمال از این واحد ها معلوم فرمائید. درین نمونه ما ۲ ردیف که هر یک از ۶ واحد تشکیل‌شده میباشد و کل آن ها ۱۲ می گردد استعمال کرده ایم.
نمونه سیستم Grid در Bootstrap : برگه اکران میانگین و وسیع
در نمونه گذشته ما از ۲ div به کارگیری کرده و پهنا شیت را به ۲ بخش متساوی ۵۰%/۵۰% تقسیم کردیم
البته در پباده سازی مانیتور های عظیم می اقتدار این درصد را به ۳۳%/۶۶% تغییر‌و تحول اعطا کرد.برای انجام این فعالیت تغییرات تحت را اعمال میکنیم:
به Bootstrap گفته می گردد در مانیتور های میانگین به کلاسی که مقدار md دارا‌هستند مراجعه نماید و در مانیتور های پهناور به کلاسی که مقدار lg دارااست. دراین مورد دو div به طور ۵۰%/۵۰% و آن گاه ۳۳%/۶۶% تقسیم میگردند:
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
نمونه سیستم Grid در Bootstrap : گوشی ، تبلت ، مانیتور
در نمونه پیشین سایز های تبلت و مانیتور را در سیستم Grid معلوم کردیم درین نمونه می‌خواهیم برای تلفن همراه نیز درصد ۷۵%/۲۵% را معلوم کنیم :
دراین نمونه ۳ لایه گوناگون برای ردیف ها در حیث گرفته شده‌است. بر روی گوشی %۲۵ در چپ و ۷۵ % در راست در حیث گرفته شده‌است. برروی تبلت ۵۰% به ۵۰% و برروی مانیتور ها ۳۳% به ۶۶%.
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
ردیف های تو در تو
برای محتواهای تودر تو یک row. نو با ردیف های *-col-md. آن باطن یک ردیف *-col-md. مو جود اضافه فرمائید. سطر های تو در تو می بایست دربرگیرنده تیم از سطرها به مقدار ۱۲ باشد.
در نمونه پایین برگه دربرگیرنده ۲ ردیف میگردد که ردیف دوم به چهار جعبه در ۲ سطر تقسیم شده‌است.
Hello, world!
First Column
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
درباره این سایت