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

بوت استرپ

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

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

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

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

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

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

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

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

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

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

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

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

محتوا

</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=”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>

لطفا به این نوشته امتیاز دهید

[کل: 2 میانگین: 3]

مدیر سایت