تقسیم بندی در بوت استرپ

خانه / آموزشی / تقسیم بندی در بوت استرپ

تقسیم بندی در بوت استرپ

von طراحی سایت منسیکس Facebook Google+
در آموزشی

تقسیم بندی یا Grid در بوت استرپ یک سیستم شبکه بندی است که برای راحتی کار در طراحی قالب سایت به وجود آمده است و پایه و اساس یک طراحی قالب بوت استرپ استفاده از این سیستم تقسیم بندی است.

گرید بندی مانند ایجاد یک صفحه ی نقشه کشی است که با استفاده از این سیستم می توان ستون هایی را در صفحه داشت که از طریق آنها محتوی صفحه  را تقسیم بندی کرد.

سیستم شبکه بندی در بوت استرپ  12 ستون است که با استفاده از این 12 ستون باید تقسیم بندی های خود را درون صفحه داشته باشید.

کلاس های گرید بندی

بوت استرپبرای تقسیم بندی های خود کلاس هایی دارد که از این کلاس ها در موقعیت های مختلف استفاده می شود از جمله مواردی که در کلاس های بوت استرپ مورد استفاده قرار می گیرد کلاس xs و lg خواهد بود, کلاس xs برای تلفن همراه به کار میرود و کلاس lg برای استفاده در صفحه نمایش های بزرگ است.

کلاس xs( Extra Small) برای استفاده در گوشی ها و تلفن های همراه .

کلاس sm( Small) برای استفاده در گجت هایی مانند تبلت ها .

کلاس md( MeDium)  برای استفاده در لپ تاچ و صفجه نمایش های کوچک .

کلاس lg( LarGe) برای صفحه نمایش های بزرگ با سایز بزرگ .

نحوه ی استفاده از کلاس ها

گرید بندی در بوت استرپنیازمند یکسری قوانین است که برای استفاده از آنها باید این قوانین را در حین استفاده رعایت کرد.

تمام ستون ها در گرید بندی باید درون کلاسی به نام Containerو Container-Fluid قرار گیرند که بعد از این کلاس, کلاس دیگری به نام row باید استفاده گردد که این ستون ها در این rowها تعریف گردیده می شوند.

<div class=”container”>
<div class=”row”>
<div class=”col-*-*”>
محتوا
</div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>

</div>
</div>

به کدها دقت کنید ببینید که ابتدا یک تگ div با کلاس container استفاده شده است و سپس از row و ستون های گرید بندی استفاده شده است.

مثال:

<html>
<head>
<title>قالب بوت استرپ </title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js”></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js”></script>
<![endif]–>
</head>
<body>

<div class=”container”>

<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>محتوا
</p>

<p>محتوا
</p>
</div>

<div class=”col-md-6″ style=”background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;”>
<p>محتوا
</p>

<p>

محتوا </p>
</div>
</div>
<script src=”https://code.jquery.com/jquery.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
[تعداد: 1   میانگین: 5/5]