bootstrap-Grid-System.JPG



bootstrp-Grid-System-features.JPG




در شبکه بندی بوت استرپ صفحه به سطرهایی تقسیم میشود که هر سطر به نوبه خود به 12 ستون مساوی تقسیم میشود. برای استفاده از این قابلیتها باید از div ها به شیوه درست استفاده کرد. باید سطرها را داخل کلاس .container قرار داد.

محتواها باید در داخل ستونها قرار بگیرند. و ستونها باید بلافاصله بعد از تعریف یک سطر داخل آن اولین تگ باشند

کلاسهای از پیش تعریف شده ایی مثل .row و .col-*-* برای لایه بندی سریع وجود دارند.



یک مثال

کد PHP:
[LEFT]<!DOCTYPE html>
<html>
   <head>
      <title>قالب بوت استرپ </title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
            html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
            respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
     
<div class="container">
  
   <div class="row">

      <div class="col-md-6"  style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>محتوا
         </p>

         <p>محتوا
         </p>
      </div>

      <div class="col-md-6" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>محتوا
         </p>

         <p>[/LEFT] محتوا </p>
   </div>
</div>
      <script src="https://code.jquery.com/jquery.js"></script>  
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>