twitter-bootstrap-3
ग्रिड प्रणाली

मीडिया के प्रश्नों

हम अपने ग्रिड सिस्टम में मुख्य विराम बिंदु बनाने के लिए अपनी कम फ़ाइलों में निम्नलिखित मीडिया प्रश्नों का उपयोग करते हैं।

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

हम कभी-कभी इन मीडिया प्रश्नों पर विस्तार करते हैं ताकि सीएसएस को उपकरणों के एक संकीर्ण सेट तक सीमित करने के लिए अधिकतम-चौड़ाई शामिल हो सके।

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ग्रिड विकल्प

बूटस्ट्रैप ग्रिड सिस्टम क्या है

बूटस्ट्रैप ग्रिड सिस्टम उत्तरदायी वेबसाइट लेआउट बनाने का त्वरित और आसान तरीका प्रदान करता है।

बूटस्ट्रैप 3 में विभिन्न प्रकार के उपकरणों जैसे सेल फोन, टैबलेट, लैपटॉप और डेस्कटॉप, आदि के लिए जल्दी से ग्रिड लेआउट बनाने के लिए पूर्वनिर्धारित ग्रिड कक्षाएं शामिल हैं।

उदाहरण के लिए, आप सेल फोन जैसे अतिरिक्त छोटे डिवाइसों के लिए ग्रिड कॉलम बनाने के लिए .col-xs- * वर्ग का उपयोग कर सकते हैं, इसी तरह .col-sm- * छोटे स्क्रीन उपकरणों जैसे टैबलेट, .col-md- * वर्ग के लिए। मध्यम आकार के उपकरणों जैसे डेस्कटॉप और बड़े डेस्कटॉप स्क्रीन के लिए .col-lg- *।

निम्न तालिका नई ग्रिड प्रणाली की कुछ प्रमुख विशेषताओं का सार प्रस्तुत करती है

स्टैक्ड-टू-क्षैतिज

.col-md-* ग्रिड कक्षाओं के एकल सेट का उपयोग करके, आप एक मूल ग्रिड प्रणाली बना सकते हैं, जो डेस्कटॉप (मध्यम) उपकरणों पर क्षैतिज बनने से पहले मोबाइल उपकरणों और टैबलेट उपकरणों (अतिरिक्त छोटी से छोटी श्रेणी) पर स्टैक्ड हो जाती है। किसी भी .row में ग्रिड कॉलम रखें।

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

द्रव कंटेनर

किसी भी निश्चित-चौड़ाई वाले ग्रिड लेआउट को अपने बाहरीतम .container से .container-fluid बदलकर एक पूर्ण-चौड़ाई लेआउट में बदल दें।

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

मोबाइल और डेस्कटॉप

अपने स्तंभों को केवल छोटे उपकरणों में स्टैक करने के लिए नहीं चाहिए? अपने कॉलम में .col-xs-* .col-md-* .col-xs-* जोड़कर अतिरिक्त छोटे और मध्यम डिवाइस ग्रिड कक्षाओं का उपयोग करें। यह सब कैसे काम करता है के एक बेहतर विचार के लिए नीचे दिए गए उदाहरण देखें।

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

मोबाइल, टैबलेट, डेस्कटॉप

टेबलेट के साथ और भी अधिक गतिशील और शक्तिशाली लेआउट बनाकर पिछले उदाहरण का निर्माण करें .col-sm-* कक्षाएं।

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

स्तम्भ लपेटना

यदि 12 से अधिक कॉलम एक पंक्ति में रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेटेगा।

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

उत्तरदायी स्तंभ रीसेट करता है

उपलब्ध ग्रिड के चार स्तरों के साथ आप उन मुद्दों में भाग लेने के लिए बाध्य हैं जहाँ, कुछ निश्चित बिंदुओं पर, आपके कॉलम बिल्कुल सही नहीं हैं क्योंकि एक दूसरे की तुलना में लंबा है। इसे ठीक करने के लिए, .clearfix और हमारे उत्तरदायी उपयोगिता वर्गों के संयोजन का उपयोग करें।

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

उत्तरदायी ब्रेकप्वाइंट पर कॉलम क्लियरिंग के अलावा, आपको ऑफसेट, पुश या पुल रीसेट करने की आवश्यकता हो सकती है। ग्रिड एक्शन में इसे देखें।

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

परेशान करने वाले कॉलम

.col-md-offset-* कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं। ये कक्षाएं एक कॉलम के बाएं मार्जिन को * कॉलम से बढ़ाती हैं। उदाहरण के लिए, .col-md-offset-4 .col-md-4 में चार कॉलम में .col-md-4 चलता है।

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

आप निम्न ग्रिड टियर से .col-*-offset-0 कक्षाओं से भी ओवरराइड कर सकते हैं।

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

घोंसले के स्तंभ

डिफ़ॉल्ट ग्रिड के साथ अपनी सामग्री को घोंसले में .row लिए, .col-sm-* .row .col-sm-* कॉलम के एक मौजूदा .col-sm-* कॉलम में एक नया .row और सेट जोड़ें। नेस्टेड पंक्तियों में स्तंभों का एक सेट शामिल होना चाहिए जो 12 या उससे कम जोड़ते हैं (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध स्तंभों का उपयोग करें)।

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

स्तंभ आदेश

.col-md-push-* और .col-md-pull-* संशोधक कक्षाओं के साथ हमारे अंतर्निहित ग्रिड कॉलम के क्रम को आसानी से बदलें।

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

कम मिश्रण और चर

तेजी से लेआउट के लिए पूर्वनिर्मित ग्रिड कक्षाओं के अलावा, बूटस्ट्रैप में आपके स्वयं के सरल, अर्थ लेआउट बनाने के लिए कम चर और मिश्रण शामिल हैं।

चर

चर स्तंभों, गटर की चौड़ाई और मीडिया क्वेरी बिंदु की संख्या निर्धारित करते हैं, जिस पर अस्थायी कॉलम शुरू किया जाता है। हम उपर्युक्त पूर्वनिर्धारित ग्रिड कक्षाओं, साथ ही नीचे सूचीबद्ध कस्टम मिश्रणों को उत्पन्न करने के लिए इनका उपयोग करते हैं।

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixins

व्यक्तिगत ग्रिड स्तंभों के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए ग्रिड चर के साथ संयोजन में मिश्रण का उपयोग किया जाता है।

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}