Bootstrap in Hindi Grid




Bootstrap आपको Grid System का उपयोग करने का विकल्प प्रदान करता है जो एक Layout को बनाने के लिए सबसे तेज़ और Simple तरीको मे से एक के रूप मे जाना जाता है.

Bootstrap Grid System से Web Pages के Layouts को बनाने का एक तेज़ और Simple तरीका प्रदान करने के लिए जाना जाता है जिन्हे Designed करने की आवश्यकता होती है.

अगर पहले और अब उपलब्ध Bootstrap के दोनो Versions को Compare करे तो पिछले Bootstrap 2.x मे एक Grid System था जो Default रूप से तय किया गया था नया Versions अर्थात Bootstrap 3 को Mobile से पहले Responsive Fluid Grid System के रूप में पेश किया गया है जो सक्षम है Scale करने के लिए ताकि Viewport आकार बढ़ता जा रहा हो.

Bootstrap का नया Version Users को पूर्वनिर्धारित Grid Classes को शामिल करने की सुविधा देता है जो Grid Layouts को आसानी से बड़े उपकरणो के लिए सक्षम बनाता है जो कि Cell Phones से लेकर Laptops तक और Tablets से लेकर Smart Phones आदि तक अलग होते है. फिर उपयोग की जाने वाली Classes को Target Device के अनुसार बदल दिया जाता है और Desired Grid Size प्राप्त होता है.

Bootstrap Grid System आपको पूरे Page पर 12 Columns बनाने की अनुमति देता है. आप सभी 12 Columns को अलग-अलग उपयोग कर सकते है.

Grid Classes

Bootstrap Grid System मे Four Classes होती है.

  • xs (for phones)

  • sm (for tablets)

  • md (for desktops)

  • lg (for larger desktops)

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid System Example</title>
<link href = 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>Grid Example</h1>
         <div class="row">
            <div class="col-md-3"style="background-color:red;">Raja</div>
            <div class="col-md-3"style="background-color:green;">Arif</div>
            <div class="col-md-3"style="background-color:yellow;">Saharukh</div>
            <div class="col-md-3"style="background-color:blue;">Akki</div>
         </div>
      </div>
   </body>
</html>

Output

Three Equal Columns Example

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
<p>The columns will automatically stack on top of each other when the screen
is less than 768px wide.</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>

Output