آشنایی با بخش Grid System؛ یکی از بخش های اساسی در آموزش بوت استرپ! با استفاده از سیستم Grid می توان به راحتی محتوای سایت را در دستگاه های مختلف به طور مناسب نشان داد. امروزه توسعه دهندگان زیادی از این سیستم استفاده می کنند.
در زمان طراحی سایت شما با مفاهیم و بخش های مختلفی روبرو می شوید که می توانید با استفاده از این بخش ها کارهای مختلفی انجام داده و پروژه های متعدد را طراحی و راه اندازی کنید. Grid System یکی از بخش های مهم و کاربردی در بوت استرپ است. اگر قصد طراحی سایت در ارومیه را دارید، توصیه می کنیم تا با این بخش آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد بخش Grid System در بوت استرپ برای شما ارائه کنیم و نحوه استفاده از این بخش را به شما یاد دهیم.
بخش Grid System چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که بخش Grid System چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Grid System یکی از بخش های مهم و کاربردی در بوت استرپ است که شما می توانید از این سیستم استفاده کنید. سیستم Grid بوت استرپ به شما این امکان را می دهد تا بتوانیم مطالب سایت را به درستی سازمان دهی کنیم. تقسیم صفحه به چندین سطر و ستون یکی از بهترین تکنیک ها برای ایجاد طرح های مختلف برای هر نوع سایتی است. اگر می خواهید نحوه کار با این سیستم را یاد بگیرید، توصیه می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
جالب است بدانید، سیستم Grid در بوت استرپ به سیستمی گفته می شود که می توان با استفاده از آن محتوا را ساختاربندی کرد. این ساختار به طور گسترده ای برای طراحی چیدمان و ساختار محتوا در طراحی چاپ مورد استفاده قرار می گیرد. همچنین بوت استرپ به کاربران این امکان را می دهد تا تعداد زیادی سطر را بر اساس طراحی که برای سایت ها در نظر گرفته اند، به وجود آورند. در بوت استرپ از واحدهای rem و em به جای پیکسل استفاده می کنیم.
چگونه با سیستم Grid کار کنیم؟
توجه داشته باشید که سیستم Grid یکی از سیستم های کاربردی در بوت استرپ است که یکی از موارد مهم پس از آموزش کار با Form در بوت استرپ میباشد. شما می توانید با استفاده از این سیستم محتوای خودتان را در سایت ساختاربندی کنید. Grid System برای ایجاد چیدمان های صفحه از طریق برخی سطرها و ستون ها استفاده می شوند. به طوری که مطالب و محتوای سایت ما را در خود جای می دهند. در زمان کار با سیستم گرید، سرها و ستون ها باید داخل یک کلاس container قرار بگیرند تا هماهنگی و فاصله گذاری مناسب داشته باشند.
از سطرها برای ایجاد گروه افقی ستون ها استفاده می شود. همچنین محتواها باید داخل ستون ها قرار بگیرند و تنها ستون ها امکان دارند که در سایت ظاهر شوند. کلاس های Grid از قبل تعریف شده مانند row و col-xs-4 برای ساخت سریع چیدمان گرید در دسترس هستند.
آموزش ایجاد Grid در بوت استرپ
توجه داشته باشید سیستم Grid یکی از بخش های مهم و کاربردی در پروژه های بوت استرپ است. شما می توانید یک گرید ساده با استفاده از سیستم گرید در بوت استرپ ایجاد کنید. برای این کار ابتدا یک فایل با اسم index.html ایجاد کنید و بعدا کدهای زیر را در این فایل کپی کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Basic Grid System</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Content goes here -->
</body>
برای ایجاد یک گرید ساده در بوت استرپ، یک div درست کرده و یک کلاس با اسم Container را به آن نسبت دهید. کل سطر و ستون ها را داخل این Container برای قرار دادن آنها در یک جای مناسب در صفحه قرار می دهیم. در این آموزش از Container برای عرض ثابت استفاده می کنیم. در ادامه کد زیر را در صفحه HTML و در قسمت <body> قرار می دهیم:
<div class="container">
</div>
بعدا یک کلاس row داخل این Container درست می کنیم. بعد از تعریف سطر می توانیم ستون های خودمان را ایجاد کنیم. همچنین می توانید هر تعداد که بخواهید، سطر در قسمت Container ایجاد کنید.
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد بخش Grid System در بوت استرپ برای شما ارائه کنیم و نحوه استفاده از این بخش را به شما یاد دهیم. همانطور که گفته شد، سیستم گرید یکی از سیستم های کاربردی در بوت استرپ است که شما می توانید با استفاده از این سیستم محتوای سایت خودتان را ساختاربندی کنید. اگر می خواهید نحوه کار با این سیستم را یاد بگیرید، توصیه می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
نظرات: