बूटस्ट्रैप div का उपयोग करके रोशन कैसे डिजाइन करें?

Question

बूटस्ट्रैप के साथ ग्रिड सिस्टम कैसे डिज़ाइन करें?

बड़े और मध्यम प्रदर्शन में यह 2 कॉलम और 3 पंक्तियां दिखाएगा। पहले कॉलम में 1 सेल होगा और दूसरे कॉलम में 3 सेल्स होंगे।

छोटे और अतिरिक्त छोटे प्रदर्शन में यह केवल 1 कॉलम और 4 पंक्तियां दिखाएगा। प्रत्येक सेल एक कॉलम में एक के बाद एक ढेर करेगा। बड़े या मध्यम प्रदर्शन से पहला कॉलम/सेल पहले यहां आना चाहिए।

Answer 1

इस प्रयास करें कर सकते हैं:

DEMO

 <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        First Column, First Cell 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, First Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Second Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Third Cell 
       </div> 
      </div> 
     </div> 

Answer 2

आप घोंसला "पंक्तियाँ"

<div class = "row"> 
    <!-- first column--> 
    <div class = "col-lg-12"> 
    ...your code here 
    </div> 

    <!-- second column--> 
    <div class = "col-lg-12"> 
     <div class = "row"> 
      <div class = "col-lg-6"> 
      .. your code cell 1 
      </div> 

      <div class = "col-lg-6"> 
      .. your code cell 2 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

Jake745 जवाब सही किसी भी तरह है, लेकिन नेस्टेड स्तंभ के लिए बाहर याद आती है "पंक्ति" div । आपके पास पंक्ति के बिना कॉलम नहीं हो सकता है, इसलिए उस संरचना को बनाए रखना अच्छा होता है। साथ ही, आपको कॉलम को दोहराने की आवश्यकता नहीं है यदि आपको सभी स्क्रीन आकार 12 या जो भी आकार में फैलाना आवश्यक है। यानी, यदि आपको 12 कॉलम लेने के लिए मोबाइल की आवश्यकता होती है, जबकि टैबलेट आगे 6 कॉलम लेता है, तो आपको केवल "col-xs-12 col-sm-6" डालना होगा और ऊपर से कुछ भी स्वचालित रूप से 6 कॉलम ले लेगा।

इस तरह, आप अपना कोड कम कर देंगे और अनावश्यक कोड नहीं डालेंगे। उममीद है कि इससे मदद मिलेगी।

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
       First Column, First Cell 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
      <div class="row"> 
       <div class="col-xs-12"> 
       Second Column, First Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Second Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Third Cell 
       </div> 
      </div> 
     </div> 
    </div>