گروه مقاله : Bootstrap
تاريخ انتشار : 1394/05/21 - 12:04
كد :5040
سیستم شبکه بندی Bootstrap (بوتسترپ)
سیستم شبکه بندی Bootstrap به ما اجازه می دهد تا حداکثر 12 ستون را در صفحه بکار ببریم.
در صورتی که نمی خواهید از تمام 12 ستون به طور جداگانه استفاده کنید، می توانید ستون ها را با هم ادغام کنید تا ستون های عریض تری ایجاد کنید.
سیستم شبکه بندی Bootstrap ریسپانسیو است، و ستون ها بسته به اندازه صفحه نمایش به صورت اتوماتیک تنظیم خواهند شد .
کلاس های شبکه بندی
سیستم شبکه بندی Bootstrap دارای 4 کلاس می باشد :
-
xs ( برای موبایل ها )
-
sm ( برای تبلت ها )
-
md ( برای کامپیوترهای رومیزی )
-
lg ( برای کامپیوترهای بزرگ تر )
میتوان برای ایجاد طرح بندی های (layout) داینامیک و قابل انعطاف، کلاس های بالا را با هم ادغام کرد.
ساختارعمومی یک سیستم شبکه بندی Bootstrap
کد زیر یک ساختارابتدایی از سیستم شبکه بندی Bootstrap را نشان می دهد :
<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>
ابتدا یک ردیف (row) ایجاد می کنیم (<"div class="row>). سپس به تعداد دلخواه ستون اضافه می کنیم (تگ ها با کلاس های مناسب
( * - * - col. ).
توجه داشته باشید که همیشه باید حداکثر 12 ستون ( * - * - col. ) را برای هر ردیف اضافه کنید.
در ادامه، چند نمونه از طرح بندی های اصلی شبکه Bootstrap را مشاهده می کنید .
سه ستون مساوی
مثال زیر نشان می دهد که چطور، سه ستون با عرض مساوی را با شروع از تبلت ها و پیمایش به سمت کامپیوتر های رومیزی، ایجاد کنیم. در موبایل ها ستون ها به طور اتوماتیک دسته بندی خواهند شد:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
دو ستون نامساوی
مثال زیر نشان می دهد چگونه دو ستون با عرض متفاوت را با شروع از تبلت ها و پیمایش به سمت کامپیوتر های رومیزی، ایجاد کنیم.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>