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 :
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
مثال سیستم Grid در Bootstrap :
در این قسمت یک مثال ساده Grid به همراه یک لایه ایجاد می کنیم که شامل ۲ ستون که هر ستون شامل ۲ پارگراف می شود:
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>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. </p> <p>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. </p> </div> <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> 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. </p> </div> </div>
- عنصر <div class=”container”>…</div> به این دلیل اضافه شده است که مطمئن شویم لایه ایجاد شده حداکثر عرض صفحه را داراست و در مرکز قرار دارد.
- بعد از افزودن container نیاز به افزودن سطر با استفاده از <div class=”row”>…</div> و همچنین ستون درون هر سطر با استفاده از <div class=”col-md-6″></div> می باشد.
- هر سطر در grid به وسیله ۱۲ واحد ایجاد شده است و شما می توانید اندازه ستون ها را با استفاده از این واحد ها مشخص کنید. در این مثال ما ۲ ستون که هر کدام از ۶ واحد تشکیل شده است و مجموع آنها ۱۲ می شود استفاده کرده ایم.
مثال سیستم Grid در Bootstrap : صفحه نمایش متوسط و بزرگ
در مثال قبل ما از ۲ div استفاده کرده و عرض صفحه را به ۲ قسمت مساوی ۵۰%/۵۰% تقسیم کردیم
<div class="col-md-6">....</div> <div class="col-md-6">....</div>
اما در طراحی مانیتور های بزرگ می توان این درصد را به ۳۳%/۶۶% تغییر داد.برای انجام این کار تغییرات زیر را اعمال می کنیم:
<div class="col-md-6 col-lg-4">....</div> <div class="col-md-6 col-lg-4">....</div>
به Bootstrap گفته می شود در مانیتور های متوسط به کلاسی که مقدار md دارند مراجعه کند و در مانیتور های بزرگ به کلاسی که مقدار lg دارد. در این مورد دو div به صورت ۵۰%/۵۰% و سپس ۳۳%/۶۶% تقسیم می شوند:
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>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. </p> <p>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. </p> </div> <div class="col-md-6 col-lg-8"" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> 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. </p> </div> </div>
مثال سیستم Grid در Bootstrap : موبایل ، تبلت ، مانیتور
در مثال قبل سایز های تبلت و مانیتور را در سیستم Grid مشخص کردیم در این مثال می خواهیم برای موبایل نیز درصد ۷۵%/۲۵% را مشخص کنیم :
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
در این مثال ۳ لایه مختلف برای ستون ها در نظر گرفته شده است. بر روی موبایل %۲۵ در چپ و ۷۵ % در راست در نظر گرفته شده است. برروی تبلت ۵۰% به ۵۰% و برروی مانیتور ها ۳۳% به ۶۶%.
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>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. </p> <p>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. </p> </div> <div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> 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. </p> </div> </div>
ستون های تو در تو
برای محتواهای تودرتو یک row. جدید با ستون های *-col-md. آن درون یک ستون *-col-md. موجود اضافه کنید. سطر های تو در تو باید شامل مجموعه از سطرها به مقدار ۱۲ باشد.
در مثال زیر صفحه شامل ۲ ستون می شود که ستون دوم به چهار باکس در ۲ سطر تقسیم شده است.
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>First Column</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>Second Column- Split into 4 boxes</h4> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> 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. </p> </div> </div> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div>