Bootstrap e-Book In Hindi

col - lg - * class in bootstrap :

इस class का use 1170px या उसके आस – पास की screen size के device के लिए किया जाता है इस class का use कर के विभिन्न size के कॉलम create  करने का statement निम्नलिखित है

.col –lg– 1 :

इस class का use तब किया जाता है जब आप एक row में 12 कॉलम create करना कहते है तब आप इस class का use करते है इस class का use 1170px या उसके आस – पास की screen size के device के लिए किया जाता है इसका उदाहरण निम्नलिखित है

 

Run

<html>

<head>

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

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

  <title>col-lg-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-lg-1" style="background-color: red">a</div>

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

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

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

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

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

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

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

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

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

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

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

</body>

</html>

 

 

 

 

.col - lg – 6 :

इस क्लास का use एक row में 2 कॉलम  create करने के लिए किया जाता है  इस class का use 1170px या उसके आस – पास की screen size के device के लिए किया जाता है इसका उदाहरण निम्नलिखित है

Run

<html>

<head>

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

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

    <title>col-lg-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-lg-6" style="background-color: red">a</div>

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

</body>

</html>

 

 

 

.col - lg – 12 :

इस class का use एक row में एक कॉलम create  करने के लिए किया जाता है इस class का use 1170px या उसके आस – पास की screen size के device के लिए किया जाता है इसका उदाहरण निम्नलिखित है

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-lg-12" style="background-color: red">a</div>

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

</body>

</html>

 

 

 

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

.col –lg– 1

.col –lg– 2

.col –lg– 3

.col –lg– 4

.col –lg– 5

.col –lg– 6

.col –lg– 7

.col –lg– 8

.col –lg– 9

.col –lg– 10

.col –lg –11

.col –lg– 12

Prv Next


.

Deependra Singh Baghel Production