अर्थात् यूआई - लेई के लिए ui ग्रिड सर्वोत्तम दृष्टिकोण (पंक्तियां/कॉलम बनाम सेगमेंट)

मैं सेमेन्टिक यूआई पर नया हूं और मैं नीचे दिए गए लेआउट के साथ एक वेबपृष्ठ तैयार करने की कोशिश कर रहा हूं। प्रलेखन को देखते हुए, मैंने ui page grid का उपयोग करने का निर्णय लिया है। मैंने ग्रिड के बाहर शीर्ष निश्चित मेनू को परिभाषित करने का भी निर्णय लिया है।अर्थात् यूआई - लेई के लिए ui ग्रिड सर्वोत्तम दृष्टिकोण (पंक्तियां/कॉलम बनाम सेगमेंट)

<body> 
    <div class="ui page grid"> 
     <div class="three column row"> 
      <div class="column"> Horizontal section, column 1</div> 
      <div class="column"> Horizontal section, column 2</div> 
      <div class="column"> Horizontal section, column 3</div> 
     </div> 
     <div class="two column row"> 
      <div class="column"> 
       <div class="row"> Left column, row 1</div> 
       <div class="row"> Left column, row 2</div> 
       <div class="row"> Left column, row 3</div> 
      </div> 
      <div class="column"> 
       <div class="row"> Right column, row 1</div> 
       <div class="row"> Right column, row 2</div> 
      </div> 
     </div> 
    </div> 
</body>

मेरा प्रश्न है:

यह सही दृष्टिकोण एक लेआउट छवि में से एक के लिए इसी तरह प्राप्त करने के लिए है

enter image description here

मेरा पहला दृष्टिकोण कुछ इस तरह था? क्या मुझे पंक्तियों या स्तंभों की बजाय सामग्री को विभाजित करने के लिए segments का उपयोग करना चाहिए?

अग्रिम धन्यवाद!

स्रोत

2015-04-11 Let_IT_roll

अर्थात् यूआई segments टेक्स्ट/आलेखों के हिस्सों के लिए चाहता था। वे left a small note:

संबंधित सेगमेंट का समूह बनाने के लिए एक सेगमेंट का उपयोग किया जाता है। क्षैतिज सेगमेंट ग्रिड के साथ सबसे अधिक प्रभावी रूप से उपयोग किए जाते हैं, ताकि समूहों को ग्रिड पंक्तियों में गठबंधन किया जा सके।

संक्षेप में, उनका मतलब है कि grid आपके मार्कअप की नींव है। grid को पृष्ठ डालने के लिए डिज़ाइन किया गया है।

आप इसी तरह की सामग्री को समूहबद्ध करने के लिए अपने ग्रिड के भीतर segments का उपयोग कर सकते हैं। (यदि आप डॉक्स में अधिक लग रहे हैं, आपको लगता है कि इरादा है, जहां वे segments के लिए stacked, piled, loading श्रेणियां होती हैं देख सकते हैं।)

उदाहरण के लिए, मैं नीचे में तीन कोशिकाओं करना चाहते हैं किसी प्रकार के रूप में छोड़ दिया समाचार फ़ीड का। तब मैं खंडों वहाँ का उपयोग करेंगे:

<body> 
    <div class="ui page grid"> 
     <div class="three column row"> 
      <div class="column"> Horizontal section, column 1</div> 
      <div class="column"> Horizontal section, column 2</div> 
      <div class="column"> Horizontal section, column 3</div> 
     </div> 
     <div class="two column row"> 
      <div class="column"> 
       <div class="ui segment"> 
        <div class="ui vertical segment"> 
         <p>Left column, row 1</p> 
        </div> 
        <div class="ui vertical segment"> 
         <p>Left column, row 2</p> 
        </div> 
        <div class="ui vertical segment"> 
         <p>Left column, row 3</p> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="row"> Right column, row 1</div> 
       <div class="row"> Right column, row 2</div> 
      </div> 
     </div> 
    </div> 
</body>

Grid with segments

स्रोत

2015-04-12 19:52:37 garyF

मिल गया! इसका मतलब है कि पाठ की कोई भी सामग्री 'सेगमेंट' का उपयोग करके समूहीकृत नहीं की जानी चाहिए। मैंने शुरुआत में इसका इस्तेमाल किया क्योंकि मुझे बाएं कोशिकाओं को एक क्षैतिज विभक्त के साथ विभाजित करने की आवश्यकता थी और 'सेगमेंट' स्वचालित रूप से इसे अलग-अलग सामग्री के बीच जोड़ता था। फिर, इस तरह कुछ प्राप्त करने के लिए सबसे सही दृष्टिकोण 'कॉलम' और 'पंक्तियों' और 'ui dividers' का उपयोग कर सही होगा? –

आह! वह पागल है। : पी टीएलडीआर: हाँ। मैंने अभी 'डिवाइडर' क्लास डॉक्स पर एक नज़र डाली थी, जहां उन्होंने उल्लेख किया था कि सामग्री को विभाजित करने के लिए लंबवत और क्षैतिज डिवाइडर का उपयोग किया जा सकता है। (शब्दों का ओवरलैप, आपको नहीं लगता? ;-)) लेकिन मुझे लगता है कि वे यहां असंबंधित सामग्री को विभाजित करने का मतलब मानते हैं। :-) उम्मीद है कि इससे मदद मिलती है! ~ छोटे नोट: 'सेगमेंट' का उपयोग टेक्स्ट के अलावा अन्य (संबंधित) चीजों के लिए भी किया जा सकता है। एक दुकान पृष्ठ पर किसी उत्पाद के लिए थंबनेल छवियों की एक सूची की तरह। – garyF

अर्थात् यूआई - लेई के लिए ui ग्रिड सर्वोत्तम दृष्टिकोण (पंक्तियां/कॉलम बनाम सेगमेंट)

उत्तर

संबंधित मुद्दे