पॉलिमर प्रोजेक्ट 1.0 में कंटेनर या ग्रिड जैसे कुछ कैसे प्राप्त करें - कैसे करें?

Question

मैं पॉलिमर स्टार्टर किट + प्रीबिल्ट पॉलिमर तत्वों के साथ एक उत्तरदायी वेबसाइट बनाना चाहता हूं।

अब बूटरस्ट्रैप जैसे सीएसएस ढांचे में कंटेनर या ग्रिड की तरह कुछ कैसे प्राप्त करें?

क्या यह केवल पॉलिमर के साथ संभव है, या मेरे एकमात्र विकल्प मेरे स्वयं के कस्टम कोड हैं, या कंकाल, बोरबॉन साफ ​​आदि जैसे ढांचे/ग्रिड सिस्टम हैं?

मैं लौह फ्लेक्स-लेआउट पर भी गौर करने की कोशिश की, लेकिन यह छोटे स्क्रीन आकार पर एक ग्रिड की तरह एक दूसरे के ऊपर पर पतन नहीं है, तो आप इसे यहाँ देख सकते हैं:

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

<div class="horizontal layout" style="height:100%"> 
    <div class="flex-1"> 
     Left column 
    </div> 
    <div class="flex-4"> 
     Right column 
    </div> 
    </div> 

यह "पतन" नहीं करता है, इसलिए यदि आप खिड़की का आकार बदलते हैं तो बक्से एक दूसरे के नीचे होंगे, यह सिर्फ तराजू है।

तो, मुझे इसके साथ कैसे संपर्क करना चाहिए?

संपादित करें: मैं कुछ इस तरह प्राप्त करने के लिए करना चाहते हैं: http://www.bootply.com/4CJ9GOYEuH

तो तुम खिड़की डीआईसी के बजाय एक दूसरे के बगल रहने का एक दूसरे के ऊपर पर पतन होगा, आकार बदल।

Answer 1

आयरन ग्रिड IRON-GRID आज़माएं और यदि आवश्यक हो तो Custome Elements अधिक खोजें।

Answer 2

आप संयोजन में iron-flex-layout और iron-media-query का उपयोग कर सकते हैं। आयरन-मीडिया-क्वेरी व्यूपोर्ट आकार के आधार पर अपडेट हो जाएगी और आप इसके मीडिया-क्वेरी मैचों को अन्य तत्वों से जोड़ सकते हैं।

निष्क्रिय, आप निम्न कार्य कर सकते हैं, लेकिन समान रूप से आप अपने लेआउट के लिए "flex-n" कक्षाएं उत्पन्न करने के लिए क्वेरीमैच का उपयोग कर सकते हैं। ,

<dom-module id="bootstrap-grid"> 
    <template strip-whitespace> 
     <style> 
      /* Grid styles from Bootstrap */ 
     </style> 
     <content></content> 
    </template> 
    <script>Polymer({ is: 'bootstrap-grid' });</script> 
</dom-module> 

बूटस्ट्रैप ग्रिड शैलियों एक के लिए बहुत बड़ा तो जवाब कर रहे हैं तो here is a JSFiddle, और यहाँ it is on GitHub:

<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query> 

    <template is="dom-if" if="{{queryMatches}}"> 
    <div class="horizontal layout" style="height:100%"> 
     <div class="flex-1"> 
     Left column 
     </div> 
     <div class="flex-4"> 
     Right column 
     </div> 
    </div> 
    </template> 

    <template is="dom-if" if="{{!queryMatches}}"> 
    <div>Left column</div> 
    <div>Right column</div> 
    </template> 

Answer 3

तुम कुछ की तरह एक वेब घटक अंदर बूटस्ट्रैप के ग्रिड सीएसएस जोड़ सकते हैं।

और फिर इस घटक के अंदर आप इसका इस्तेमाल कर सकते हैं, जैसा कि आपने <div class="container-fluid"> में कर रहे हैं:

<bootstrap-grid> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">one</div></div> 
     <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">two</div></div> 
     <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">three</div></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">A</div></div> 
     <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">B</div></div> 
     <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">C</div></div> 
     <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">D</div></div> 
    </div> 
</bootstrap-grid> 

In the Fiddle मैं गटर आकार को कॉन्फ़िगर करने के --bootstrap-grid-gutter चुके हैं, लेकिन मैं breakpoints विन्यास वजह से नहीं कर सकते हैं issues with the CSS shim पर। यदि आपको इसकी आवश्यकता हो तो आप <iron-media-query> के साथ कॉन्फ़िगर करने योग्य बना सकते हैं।