گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/07 - 14:50
كد :6094
مثال شبکه بندی Bootstrap : دسته بندی افقی
ما در اینجا یک سیستم شبکه بندی پایه را ایجاد می کنیم که این سیستم در موبایل ها یا تبلت ها ( وسایل کوچک) به صورت غیر دسته بندی شده می باشد اما در کامپیوتر های رومیزی و ...(وسایل متوسط یا بزرگ) به صورت دسته بندی شده درمی آید.
مثال زیر یک layout (طرح بندی) دو ستونه ساده که به صورت افقی دسته بندی شده را نمایش می دهد:
<!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">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-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-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>
اعداد داخل کلاس های *-col-sm. مشخص می کنند که یک div باید به اندازه ی چند ستون (حد اکثر 12 ستون) گسترده شود . کلاس col-sm-1. به اندازه ی یک ستون گسترده می شود و کلاس col-sm-4. به اندازه ی 4 ستون گسترش می یابد و همچنین کلاس col-sm6. به اندازه ی 6 ستون گسترش می باید و ... .
نکته : مطمئن شوید که همیشه مجموع تعداد کلاس ها حد اکثر 12 عدد باشد.
نکته : شما می توانید با تبدیل کلاس container. به کلاس container-fluid. هر layout با عرض ثابت را به یک layout با عرض کامل تغییر دهید.
<!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-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-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>