Bootstrap e-Book In Hindi

col - md - * class in bootstrap :

इस class का use 975px या इसके आस पास की screen size के डिवाइस के लिए किया जाता है इसमें छोटी screen के leptop शामिल है इस class का use कर के कॉलम create करने के लिए उदाहरण निम्नलिखित है

.col –md– 1 :

इस class का use एक webpage पर 12 कॉलम क्रिएट करने के लिए किया जाता है इस class का use 975px या इसके आस पास की screen size के डिवाइस के लिए किया जाता है इसमें छोटी screen के leptop शामिल है इसका उदाहरण निम्नलिखित है

 

Run

<html>

<head>

          <meta http-equiv="X-UA-Compatible" content="IE-edge" />

          <meta name="viewport" content="width=device-width" />

          <title>col-md-1 Example</title>

          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

          <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />

          <link rel="stylesheet" href="css/style.css" />

</head>

<body>

          <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

          <script type="text/javascript" src="js/bootstrap.js"></script>

    <div class="col-md-1" style="background-color: red">a</div>

     <div class="col-md-1" style="background-color: green">b</div>

      <div class="col-md-1" style="background-color: red">c</div>

      <div class="col-md-1" style="background-color: green">d</div>

      <div class="col-md-1" style="background-color: red">e</div>

      <div class="col-md-1" style="background-color: green">f</div>

      <div class="col-md-1" style="background-color: red">g</div>

      <div class="col-md-1" style="background-color: green">h</div>

      <div class="col-md-1" style="background-color: red">i</div>

      <div class="col-md-1" style="background-color: green">j</div>

      <div class="col-md-1" style="background-color: red">k</div>

      <div class="col-md-1" style="background-color: green">l</div>

</body>

</html>

 

 

 

.col - md – 6 :

इस class का use तब किया जाता है जब आप एक row में 2 कॉलम बनाना चाहते है  इस class का use 975px या इसके आस पास की screen size के डिवाइस के लिए किया जाता है इसमें छोटी screen के leptop शामिल है इसका उदाहरण निम्नलिखित है

Run

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE-edge" />

    <meta name="viewport" content="width=device-width" />

    <title>col-md-6 Example</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />

    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.js"></script>

    <div class="col-md-6" style="background-color: red">a</div>

     <div class="col-md-6" style="background-color: green">b</div>

</body>

</html>

 

 

 

.col - md – 12 :

इस class का use तब किया जाता है जब आप एक row में एक कॉलम create किया जाता  है  इस class का use 975px या इसके आस पास की screen size के डिवाइस के लिए किया जाता है इसमें छोटी screen के leptop शामिल है इसका उदाहरण निम्नलिखित है

Run

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE-edge" />

    <meta name="viewport" content="width=device-width" />

    <title>col-md-6 Example</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />

    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.js"></script>

    <div class="col-md-12" style="background-color: red">a</div>

    <div class="col-md-12" style="background-color: green">a</div>

</body>

</html>

 

 

 

उपरोक्त उदाहरण के अनुसार आप आवश्यकता अनुसरे एक रो में कॉलम create किये जा सकते है col – md - * से सम्बन्धित class के नाम निम्लिखित है

.col –md– 1

.col –md– 2

.col –md– 3

.col –md– 4

.col –md– 5

.col –md– 6

.col –md– 7

.col –md– 8

.col –md– 9

.col –md– 10

.col –md –11

.col –md– 12

Prv Next


.

Deependra Singh Baghel Production