گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/09 - 16:46
كد :6101
مثال شبکه بندی Bootstrap : دستگاه های متوسط
در فصل قبل ، با یک مثال شبکه بندی به همراه کلاس هایی برای وسایل کوچک آشنا شدید. در آنجا ما از دو div(ستون) استفاده کردیم و آنها را به دو بخش %75/%25 تقسیم کردیم:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
اما برای دستگاه های متوسط بهتر است از یک طراحی دو بخشی %50/%50 استفاده کنیم.
نکته : دستگاه های متوسط طوری طراحی می شوند که صفحه نمایشی با عرض 992 پیکسل تا 1199 پیکسل داشته باشند.
برای دستگاه های متوسط از کلاس -* col-md. استفاده می کنیم.
اکنون عرض ستون را برای دستگاه های متوسط اضافه می کنیم :
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
اکنون Bootstrap به برنامه می گوید که: در اندازه های کوچک (small) به کلاس ها با عبارت -sm- توجه کن و از آنها استفاده کن. و در اندازه های متوسط (medium) به کلاس ها با عبارت -md- توجه کن و از آنها استفاده کن.
مثال زیر در دستگاه های کوچک به صورت دو بخش %75/%25 خواهد بود و همچنین در دستگاه های متوسط دارای دو بخش %50/%50 خواهد بود:
<!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 col-md-6" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>