Bootstrap e-Book In Hindi

col - sm - * class in bootstrap :

इस class का use 750px के आस पास की screen size के डिवाइस के लिए किया जाता है 750px के डिवाइस मो Tablet आते है इसके लिए col-sm-* class का use किया जाता है .col – sm - * class का use कर के webpage पर कॉलम बनाने के लिए किया जाता है col – sm - * class का use कर के विभिन्न प्रकार के कॉलम क्रिएट करने का उदाहरण निम्नलिखित है

.col – sm – 1 :

इस class का use webpage पर तब किया जाता है जब आप webpage पर 12 कॉलम बनाना  चाहते है इस class का use 750px के आस पास की screen size के डिवाइस के लिए किया जाता है 750px के डिवाइस में  Tablet आते है इसका उदाहरण निम्लिखित है 

 

Run

<html>

<head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</body>

</html>

 

 

.col – sm – 6 :

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

 

Run

<html>

<head>

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

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

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

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

</body>

</html>

 

 

.col - sm – 12 :

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

Run

<html>

<head>

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

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

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

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

</body>

</html>

 

 

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

.col –sm– 1

.col –sm– 2

.col –sm– 3

.col –sm– 4

.col –sm– 5

.col –sm– 6

.col –sm– 7

.col –sm– 8

.col –sm– 9

.col –sm– 10

.col –sm –11

.col –sm– 12

PrvNext


.