در این مقاله چند مثال از سیستم شبکه بندی 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-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</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>
دو ستون به همراه دو ستون تو در تو
مثال زیر نشان می دهد که چطور دو ستون را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ ایجاد کنیم به طوری که دو ستون دیگر(با عرض برابر) در داخل ستون بزرگتر باشند(در موبایل، این ستون ها و ستون های تو در تو دسته بندی خواهند شد).
<!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-8" style="background-color:lavender;">.col-sm-8
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
</div>
</div>
</body>
</html>
ترکیب: موبایل و کامپیوتر
سیستم شبکه بندی Bootstrap شامل 4 کلاس می باشد: xs(موبایل ها) و sm(تبلت ها) و md(رایانه های رومیزی) و lg(کامپیوتر های رومیزی بزرگ). این کلاس ها می توانند با یکدیگر ترکیب شوند تا بتوان layouts های داینامیک و قابل انعطاف را ایجاد کرد.
نکته: مقیاس هر کلاس افزایش می یابد، بنابراین اگر می خواهید یک عرض یکسان برای کلاس های xs و sm داشته باشید، تنها نیاز دارید تا کلاس xs را تعریف کنید.
<!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" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</body>
</html>
دقت کنید که تعداد ستون های شبکه بندی برای هر ردیف باید حداکثر 12 عدد باشد. در صورتی که بیش از 12 ستون ایجاد کنید، ستون ها بدون توجه به منطقه ی دید (viewport) دسته بندی خواهند شد.
ترکیب : موبایل و تبلت و کامپیوتر
<!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" style="background-color:lavender;">
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
</body>
</html>
حذف Float (شناور بودن)
می توانید با استفاده از کلاس clearfix. خاصیت Float را در یک نقطه شکست مشخص حذف کنید تا از بسته بندی عجیب با محتوای ناهموار جلوگیری کنید :
<!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>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lavender;">
Column 1<br>
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
</div>
<div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">Column 3</div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgray;">Column 4</div>
</div>
</div>
</body>
</html>
خاصیت offset در ستون ها
حرکت دادن ستون ها به سمت راست با استفاده از کلاس *- col-md-offset . این کلاس ها margin سمت چپ را از یک ستون به وسیله ی ستون های * افزایش می دهد:
<!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" style="background-color:lavender;">
<div class="col-sm-5 col-md-6" style="background-color:lightgray;">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:lightcyan;">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
</div>
</body>
</html>
Push و Pull - تغییر دادن ترتیب ستون ها
تغییر دادن ترتیب ستون های شبکه بندی با استفاده از کلاس های *- col-md-push. و *- col-md-pull. :
<!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 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>
</div>
</body>
</html>