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

بوت استرپ

بوت استرپ ،تقسیم بندی یا 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]

مدیر سایت

بعدی مدیریت برگه ها در وردپرس »

قبلی « آموزش افزودن محصول در ووکامرس

منتشر شده توسط

مدیر سایت

کلمات کلیدی : آموزشی سیستم شبکه بندی (Grid) در بوت استرپبوت استرپبوت استرپ چیست؟تقسیم بندی بوت استرپتقسیم بندی در بوت استرپطراحی سایتطراحی سایت در تهرانطراحی سایت در کرجکلاس ها در بوت استرپکلاس های گرید بندیگرید بندی در بوت استرپ

9 سال قبل

طراحی سایت چند زبانه در کرج
امروزه تجارت،دیگر از نظر مرزهای جغرافیایی دارای محدودیتی نیست.گسترش اینترنت و ارتباطات دیجیتال،باعث شده دسترسی…
چطور طراحی سایت باعث افزایش فروش در کرج می‌ شود؟
اگر کسب‌ و کار شما در کرج فعالیت می‌ کند،وقت آن رسیده که یک بار…
طراحی سایت کلینیک زیبایی در کرج
امروزه،در میان کلینیک های زیبایی رقابت چشمگیری وجود دارد.به همین علت داشتن یک وبسایت حرفه…