मुझे ट्विटर बूटस्ट्रैप 3 में कंटेनर और पंक्ति का उपयोग कब करना चाहिए?

Question 1

कक्षाओं का उपयोग करने के लिए कृपया मुझे समझाएं containerऔर row। मुझे यकीन नहीं है क्योंकि बूटस्ट्रैप का प्रलेखन इस भाग के बारे में काफी स्पष्ट नहीं है।

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं।

Question 2

containerrowतत्वों का एक कंटेनर है ।

row तत्व कॉलम के कंटेनर हैं (डॉक्स इसे ग्रिड सिस्टम कहते हैं)

साथ ही, containerआपके लेआउट के उत्तरदायी व्यवहारों से निपटने के लिए सामग्री का मार्जिन निर्धारित करता है।

इस प्रकार containerबूटस्ट्रैप परियोजना की शैली दिशानिर्देशों के आधार पर 'बॉक्सिंग' सामग्री बनाने के लिए अक्सर कक्षा का उपयोग किया जाता है।

यदि आप एक पूरी चौड़ाई वाली ग्रिड बनाते हुए "आउट ऑफ द बॉक्स" जाना चाहते हैं, तो आप केवल rowकॉलम वाले तत्वों का उपयोग कर सकते हैं (सामान्य 12cols कुल मिलाकर)।

containerऔर rowकक्षाओं शरीर के अंदर तत्वों के लिए कर रहे हैं। तो एक बुनियादी लेआउट होगा:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

एक बॉक्सिंग उत्तरदायी लेआउट के लिए।

यदि आप छोड़ देते हैं, containerतो आपको एक पूर्ण-चौड़ाई वाला लेआउट मिलेगा।

जंबोट्रॉन उदाहरण

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

Question 3

मैं उसी के बारे में सोच रहा था और यह समझने के लिए कि मैं bootstrap.cssसंस्करण 3 के माध्यम से गया था। उत्तर पंक्ति संख्या से है। १५५ से १६०५. मैं नीचे बेहतर समझ के लिए उन पंक्तियों को यहाँ पोस्ट करूँगा।

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

कोड की पूरी व्याख्या स्व-व्याख्यात्मक है। हालांकि, इस पर विस्तृत करने, कंटेनर ले जाएगा 750px, तो स्क्रीन की चौड़ाई के बीच है 768pxऔर 992pxऔर इसके आगे कोड से पता चलता है के रूप में। अब, 1200 से अधिक के आम स्क्रीन रिज़ॉल्यूशन के लिए, कंटेनर को ले जाएगा 1170px, लेकिन 30 px( 15px+15px) ( ) के पैडिंग को घटाते हुए , प्रभावी स्थान छोड़ दिया जाता है 1140px, जो स्क्रीन पर बाईं और दाईं ओर ऑटो के लिए सेट होता है।

अब, class="row"कोड के मामले में , नीचे है:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

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

मुझे उम्मीद है कि यह स्पष्ट किया गया था।

Question 4

पात्र

कंटेनर उत्तरदायी चौड़ाई पर चौड़ाई की कमी प्रदान करता है। जब उत्तरदायी आकार बदलते हैं, तो यह कंटेनर होता है जो बदलता है। पंक्तियाँ और स्तंभ सभी प्रतिशत आधारित हैं, इसलिए उन्हें बदलने की आवश्यकता नहीं है। ध्यान दें कि पंक्तियों द्वारा रद्द किए गए प्रत्येक पक्ष पर एक 15px मार्जिन है।

पंक्तियाँ

पंक्तियों को हमेशा एक कंटेनर में होना चाहिए।

पंक्ति स्तंभों को रहने के लिए एक जगह प्रदान करती है, आदर्श रूप से स्तंभ जो 12 तक जोड़ते हैं। यह भी एक आवरण के रूप में कार्य करता है क्योंकि सभी कॉलम बाईं ओर तैरते हैं, अतिरिक्त पंक्तियाँ ओवरलैप नहीं होती हैं जब फ़्लोट अजीब हो जाते हैं।

पंक्तियों में प्रत्येक तरफ एक 15px नकारात्मक मार्जिन होता है। Div जो पंक्ति बनाता है वह सामान्य रूप से कंटेनर के गद्दी के अंदर विवश होता है, गुलाबी क्षेत्र के किनारों को छूता है, लेकिन परे नहीं। 15px नकारात्मक मार्जिन पंक्ति के शीर्ष पर कंटेनर को धक्का देते हैं 15px पैडिंग, अनिवार्य रूप से इसे नकारते हुए। इसके अलावा, पंक्तियाँ आपको यह सुनिश्चित करती हैं कि इसके अंदर के सभी विभाग अपनी ही पंक्ति में दिखाई देते हैं, जो पिछली और निम्न पंक्तियों से अलग होते हैं।

कॉलम

कॉलम में अब 15px पैडिंग है। इस गद्दी का मतलब है कि स्तंभ वास्तव में पंक्ति के किनारे को छूते हैं, जो स्वयं कंटेनर के किनारे को छूता है क्योंकि पंक्ति में ऋणात्मक मार्जिन होता है, और कंटेनर में सकारात्मक गद्दी होती है। लेकिन, कॉलम पर पैडिंग कॉलम के अंदर किसी भी चीज को धक्का देती है जहां उसे होना चाहिए, और कॉलम के बीच 30px गटर भी प्रदान करता है। किसी पंक्ति के बाहर कॉलम का उपयोग कभी न करें, यह काम नहीं करेगा।

अधिक जानकारी के लिए, मैं आपको इस लेख को पढ़ने का सुझाव देता हूं । यह वास्तव में स्पष्ट है, और यह अच्छी तरह से समझाता है कि बूटस्ट्रैप का ग्रिड सिस्टम कैसे काम करता है।

Question 5

क्लास 'कंटेनर' सामग्री को व्यू पोर्ट के केंद्र में लपेटता है। शरीर टैग के साथ संपूर्ण सामग्री को उन परिणामों में रखा जा सकता है, जो पृष्ठ के केंद्र में निर्दिष्ट चौड़ाई के पृष्ठ प्रदर्शित करते हैं।

वर्ग 'पंक्ति' का उपयोग तब किया जाता है जब आपको एक पंक्ति में स्तंभों में सामग्री रखने की आवश्यकता होती है, आप प्रत्येक पंक्ति में कुल 12 कॉलम तक हो सकते हैं।

Question 6

पारंपरिक सीएसएस प्रथाओं में आप शायद निम्नलिखित वर्गों का उपयोग करेंगे:

wrapper, header, navigator, contents, footer

उपरोक्त वर्गों का उपयोग इस तरह हो सकता है:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

बूटस्ट्रैप में आप चाहें तो उपयोग कर सकते हैं या यदि आप उपरोक्त टेम्पलेट के लिए उपयोग किए जाते हैं तो उदाहरण के लिए बूटस्ट्रैप कक्षाएं:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

पंक्ति वर्ग के लिए आप पंक्ति वर्ग का उपयोग कर सकते हैं जब आप पृष्ठ के लिए सारणीबद्ध लेआउट डिजाइन करना चाहते हैं, लेकिन जब आप तालिका प्रारूप में डेटा प्रदर्शित करना चाहते हैं तो आपको तालिका वर्ग का उपयोग करना चाहिए, लेकिन तालिका उत्तरदायी नहीं होगी।

सारणीबद्ध लेआउट बनाने के लिए, जो डेटा टेबल से अलग है, इस उदाहरण में पंक्ति वर्ग का उपयोग करें:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

आपको टेबल-आधारित लेआउट का उपयोग करने से बचने की कोशिश करनी चाहिए और यहां वर्णित की तरह उत्तरदायी तालिकाओं का उपयोग करने का प्रयास करना चाहिए