گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/10 - 16:01
كد :6102
مثال شبکه بندی Bootstrap: دستگاه های بزرگ
در فصل قبل، ما یک مثال شبکه بندی را با کلاس هایی برای دستگاه های کوچک و متوسط به شما نشان دادیم. در این مثال از دو div (ستون) استفاده کردیم و در دستگاه های کوچک این ستون ها را به دو بخش 25%/75% تقسیم کردیم و برای دستگاه های متوسط به دو بخش 50%/50% :
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
اما برای دستگاه های بزرگ بهتر است از نسبت 33%/66% استفاده کنیم.
نکته : دستگاه های بزرگ دارای صفحه نمایشی با عرض 1200 پیکسل به بالا هستند.
برای دستگاه های بزرگ از کلاس *- col-lg. استفاده می کنیم.
اکنون عرض ستون را برای دستگاه های بزرگ اضافه می کنیم :
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
اکنون Bootstrap به برنامه می گوید " در دستگاه های کوچک، از کلاس هایی که داخل آنها -sm- است استفاده کن. در دستگاه های متوسط از کلاس هایی که داخل آنها -md- است استفاده کن و در دستگاه های بزرگ از کلاس هایی که داخل آنها -lg- است استفاده کن. "
مثال زیر برای دستگاه های کوچک از نسبت درصدی %75/%25 استفاده می کند و برای دستگاه های متوسط از نسبت درصدی %50/%50 و برای دستگاه های بزرگ از نسبت درصدی 33%/66% :
<!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 col-lg-4" 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 col-lg-8" 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>
نکته: دقت کنید که جمع اعداد کلاس ها برابر با 12 باشد.