Bootstrap e-Book In Hindi

Online e-Libreary C Language

col - xs - * class in bootstrap :

  यह bootstrap library के एक class है इसका use सबसे छोटी screen के डिवाइस के लीये किया जाता है जेसे  mobile , इस class का use भी webpage पर कॉलम बनाने में किया जाता है

.col – xs - * का use कर के विभिन्न प्रकार के कॉलम बनाने के उदाहरण निम्नलिखित है

 

.col - xs – 1 :

इस class का use webpage पर तब किया जाता है जब आप webpage पर 12 कॉलम बनाना  चाहते है इस class का use सबसे छोटी mobile screen के लिए किया जाता है सबसे छोटी screen mobile की होती है  इसका उदाहरण निम्लिखित है  

Run

<html>

<head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</body>

</html>

 

.col – xs – 6 :

.col – xs – 6 class का use तब किया जाता है जब आप एक रो में 2 कॉलम बनाना कहते है तो आप इस इस class का use करते है इस class का use सबसे छोटी mobile screen के लिए किया जाता है सबसे छोटी screen mobile की होती है एक  row में 2 कॉलम बनाने के लिए Example निम्नलिखित है

Run

<html>

<head>

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

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

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

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

</body>

</html>

 

.col - xs – 12 :

इस class का use एक row में एकक कॉलम create करने के लिए किया जाता है इस क्लास का use सबसे छोटी mobile screen के लिए किया जाता है सबसे छोटी mobile screen के लिए किया जाता है सबसे छोटी screen mobile की होती है एक row में एक कॉलम बनाने के लिए statement निम्नलिखित है

Run

<html>

<head>

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

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

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

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

</body>

</html>

 

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

.col – xs – 1

.col – xs – 2

.col – xs – 3

.col – xs – 4

.col – xs – 5

.col – xs – 6

.col – xs – 7

.col – xs – 8

.col – xs – 9

.col – xs –  10

.col – xs  – 11

.col – xs – 12

Prv Next


.