ट्विटर बूटस्ट्रैप के आधार पर, उत्तरदायी डिज़ाइन में द्रव या स्थिर ग्रिड प्रणाली


399

मैं ट्विटर बूटस्ट्रैप ग्रिड में विभिन्न विकल्पों के बारे में भ्रमित हो रहा हूं , और वे एक साथ कैसे चलते हैं।

के साथ शुरू करने के लिए, आप एक सामान्य तय कर सकते हैं container, या ए container-fluid

फिर या तो एक या तो एक साधारण row, या एक द्रव पंक्ति शामिल कर सकते हैं row-fluid। यही है, आपके पास एक निश्चित कंटेनर एक द्रव पंक्ति के साथ हो सकता है, या एक कंटेनर-द्रव ... एक निश्चित पंक्ति के साथ?

फिर उसके ऊपर, आप 'उत्तरदायी' मीडिया प्रश्नों को शामिल कर सकते हैं, या नहीं।

मैं भ्रमित हो रहा हूं कि ये चीजें कैसे बातचीत करती हैं। लेकिन एक स्पष्ट उदाहरण के साथ शुरू करते हैं।

पर उदाहरण पेज ही है, वहाँ क्या दोनों एक का एक उदाहरण के रूप में प्रस्तुत है तय ग्रिड और एक तरल पदार्थ ग्रिड

हालाँकि, मेरे ब्राउज़र में, उस उदाहरण पृष्ठ पर ही - दोनों ग्रिड समान रूप से व्यवहार करते हैं। शायद इसलिए कि उदाहरण पृष्ठ वैकल्पिक उत्तरदायी मीडिया प्रश्नों का उपयोग करता है? में दोनों ग्रिड उदाहरण है, अगर मैं धीरे-धीरे मेरी ब्राउज़र विंडो को सीमित करने लगते हैं, तो ग्रिड तत्वों करते नहीं धीरे-धीरे संकरा है - एक बार एक निश्चित (उत्तरदायी) सीमा चौड़ाई तक पहुँच जाता है, वे आगे सीमा चौड़ाई में एक छोटे आकार के लिए लें, और फिर से। लेकिन दोनों सामान्य 'निश्चित' उदाहरण और 'द्रव' उदाहरण यहाँ बिल्कुल वैसा ही व्यवहार करते हैं - तो क्या अंतर है?


6
शायद यह द्रव लेआउट शैली का एक बेहतर उदाहरण है?
कोड़ी ग्रे

जवाबों:


442

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

उचित निश्चित चौड़ाई का उदाहरण यहाँ है । उचित द्रव चौड़ाई उदाहरण यहाँ है

निर्धारित चौड़ाई के उदाहरण का अवलोकन करते समय, आपको अपने ब्राउज़र को 960px से अधिक चौड़ा होने पर सामग्री को बदलते आकार में नहीं देखना चाहिए। यह पृष्ठ की अधिकतम (निश्चित) चौड़ाई है। एक निश्चित-चौड़ाई वाले डिज़ाइन में मीडिया क्वेरी विशेष शैलियों के लिए न्यूनतम चौड़ाई निर्धारित करेगी। जब आप अपनी ब्राउज़र विंडो को सिकोड़ेंगे और लेआउट स्नैप को एक अलग आकार में देखेंगे, तो आप इसे क्रिया में देखेंगे।

इसके विपरीत, आपके ब्राउज़र विंडो को फिट करने के लिए द्रव-चौड़ाई लेआउट हमेशा खिंचाव होगा , चाहे वह कितना भी व्यापक हो। मीडिया क्वेरी इंगित करती है जब शैलियों में बदलाव होता है, लेकिन कंटेनरों की चौड़ाई हमेशा आपके ब्राउज़र विंडो का प्रतिशत (पिक्सेल की एक निश्चित संख्या के बजाय) होती है।

'उत्तरदायी' मीडिया प्रश्न सभी जाने के लिए तैयार हैं। आपको केवल यह तय करने की आवश्यकता है कि क्या आप अपने पृष्ठ के लिए निश्चित चौड़ाई या द्रव चौड़ाई लेआउट का उपयोग करना चाहते हैं।

पहले, बूटस्ट्रैप 2 में, आपको row-fluidएक द्रव कंटेनर के rowअंदर और एक निश्चित कंटेनर के अंदर उपयोग करना था । बूटस्ट्रैप 3 की शुरूआत के साथ, row-fluidहटा दिया गया था, अब इसका उपयोग न करें

संपादित करें : टिप्पणियों के अनुसार, कुछ jsFiddles के लिए:

शुद्ध सीएसएस मीडिया प्रश्नों के आधार पर ये फ़िडल्स पूरी तरह से बूटस्ट्रैप-मुक्त हैं, जो उन्हें ट्विटर बूटस्ट्रैप का उपयोग किए बिना इसी तरह के समाधान के लिए तैयार किसी भी व्यक्ति के लिए एक अच्छा प्रारंभिक बिंदु बनाता है।


1
हम्म, ठीक है, डॉक्स मुझे लगता है कि आपको सुझाव दे सकता है कि आप मिश्रण और तरल पदार्थ को मिला सकते हैं और तय कर सकते हैं, लेकिन मुझे लगता है कि मैं उन्नत उपयोग के लिए तैयार नहीं हूं। :) मुझे अभी भी समझ में नहीं आया है कि responsiveफिक्स्ड और फ्लुइड दोनों को क्रमशः कैसे बदला जाता है - आप फिक्स्ड और फ्लुइड दोनों के साथ उत्तरदायी (या नहीं) का उपयोग कर सकते हैं, है ना? क्या आप बता सकते हैं कि प्रत्येक उनके लिए कितना उत्तरदायी है?
jrochkind

8
मेरे लिए भ्रामक बात यह है कि 'उचित निश्चित चौड़ाई' उदाहरण स्तंभों के आकार को ब्राउज़र विंडो में परिवर्तन के रूप में बदलता है (क्योंकि यह उत्तरदायी है?) और इसलिए उचित द्रव चौड़ाई उदाहरण है। लेकिन मुझे लगता है कि द्रव की चौड़ाई का उदाहरण यह लगातार करता है, और तय चौड़ाई उत्तरदायी उदाहरण असतत कूद में, साथ ही अधिकतम आकार तक पहुंचता है? क्या यही है? कैसे के बारे में तरल उत्तरदायी बनाम उत्तरदायी नहीं?
ज्रोचाइंड

16
तुम्हें यह मिल गया है। निश्चित चौड़ाई के लेआउट में, जब ब्राउज़र विंडो मीडिया क्वेरी में परिभाषित चौड़ाई तक पहुँचती है तो कॉलम बदल जाते हैं। इसलिए जब आपके पास अपनी विंडो 960px से अधिक चौड़ी होगी, तो वह अधिकतम चौड़ाई पर रहेगी। फिर जब आप अपने ब्राउज़र को 959px पर सिकोड़ेंगे, तो यह मीडिया क्वेरी के आधार पर एक नए लेआउट पर स्नैप करेगा जिसकी अधिकतम चौड़ाई 768px है। इसलिए क्योंकि आप एक निश्चित-चौड़ाई का लेआउट देख रहे हैं, जब आपके ब्राउज़र की चौड़ाई 768 और 960 के बीच होगी तो कॉलम नहीं बदलेगा।
eterps

3
और जब आप एक द्रव-चौड़ाई का लेआउट देख रहे हों, तो कॉलम आकार हमेशा आपके ब्राउज़र की चौड़ाई से मेल खाएगा। निश्चित चौड़ाई वाले लेआउट के साथ, लेआउट स्वयं भी मीडिया के प्रश्नों के अनुसार बदल जाएगा।
eterps

12
याद रखने वाली सबसे महत्वपूर्ण बात यह है कि निश्चित चौड़ाई = पिक्सेल, और द्रव चौड़ाई = प्रतिशत। जवाबदेही बूटस्ट्रैप-उत्तरदायी.एससी में परिभाषित सभी फैंसी सीएसएस नियमों से आती है, और ये नियम दोनों लेआउट पर लागू होते हैं।
12 को eterps

21

दिलचस्प चर्चा। मैं खुद से भी यह सवाल पूछ रहा था। द्रव और निश्चित के बीच मुख्य अंतर केवल इतना है कि वेबसाइट के पूरे लेआउट (व्यूपोर्ट) के संदर्भ में निश्चित लेआउट की एक निश्चित चौड़ाई है। यदि आपके पास 960px चौड़ाई का व्यूपोर्ट है तो प्रत्येक कोलम की एक निश्चित चौड़ाई होती है जो कभी नहीं बदलेगी।

द्रव लेआउट अलग व्यवहार करता है। कल्पना करें कि आपने अपने मुख्य लेआउट की चौड़ाई को 100% चौड़ाई पर सेट किया है। अब प्रत्येक कॉलम की गणना केवल सापेक्ष आकार (यानी 25%) और स्ट्रेचेस से की जाएगी क्योंकि ब्राउज़र को आकार दिया जाएगा। तो आपके लेआउट उद्देश्य के आधार पर आप यह चुन सकते हैं कि आपका लेआउट कैसे व्यवहार करता है।

यहाँ तरल पदार्थ बनाम फ्लेक्स के बारे में एक अच्छा लेख है


7

स्रोत - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

पेशेवरों

  • फिक्स्ड-चौड़ाई लेआउट का उपयोग करना आसान है और डिजाइन के मामले में अनुकूलित करना आसान है।
  • चौड़ाई हर ब्राउज़र के लिए समान होती है, इसलिए छवियों, फ़ॉर्म, वीडियो और अन्य सामग्री के साथ कम परेशानी होती है जो निश्चित-चौड़ाई होती हैं।
  • न्यूनतम-चौड़ाई या अधिकतम-चौड़ाई की आवश्यकता नहीं है, जो वैसे भी हर ब्राउज़र द्वारा समर्थित नहीं है।
  • यहां तक ​​कि अगर एक वेबसाइट को सबसे छोटे स्क्रीन रिज़ॉल्यूशन, 800 × 600 के साथ संगत करने के लिए डिज़ाइन किया गया है, तो भी सामग्री आसानी से सुगम होने के लिए एक बड़े रिज़ॉल्यूशन पर पर्याप्त व्यापक होगी।

विपक्ष

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

6

बूटस्ट्रैप 3 में द्रव लेआउट।

बूस्ट्रैप 2 के विपरीत, बूटस्ट्रैप 3 में एक द्रव कंटेनर बनाने के लिए एक .container-द्रव मिश्रण नहीं है। .Container एक निश्चित चौड़ाई उत्तरदायी ग्रिड लेआउट है। एक बड़ी स्क्रीन में, वेब पेज की सामग्री के दोनों किनारों पर अत्यधिक सफेद स्थान होते हैं।

container-fluid बूटस्ट्रैप 3.1 में वापस जोड़ा गया है

एक द्रव ग्रिड लेआउट सभी स्क्रीन चौड़ाई का उपयोग करता है और बड़ी स्क्रीन में बेहतर काम करता है। यह पता चला है कि बूटस्ट्रैप 3 मिश्रण का उपयोग करके एक तरल ग्रिड लेआउट बनाना आसान है। निम्न पंक्ति एक द्रव उत्तरदायी ग्रिड लेआउट बनाती है:

.container निर्धारित;

.Container- फिक्स्ड मिक्सिन स्क्रीन के केंद्र में सामग्री सेट करता है और पैडिंग जोड़ता है। यह एक निश्चित पृष्ठ चौड़ाई निर्दिष्ट नहीं करता है।

एक अन्य दृष्टिकोण एरिक फूल की सीएसएस शैली का उपयोग करना है

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

2
मुझे समझ में नहीं आता कि लोग बूटस्ट्रैप 3 में 'कंटेनर-तरल पदार्थ' का समर्थन करने की बात क्यों करते हैं, जबकि यह है। मैंने अभी डबल चेक किया है और बूटस्ट्रैप 3.1.0 में यह स्पष्ट रूप से परिभाषित है।
बार्ट

10
ऐसा इसलिए है क्योंकि इसे 3.1 में 3 जोड़ा गया हटा दिया गया था ।
स्टीव क्लोस्टर्स

-2

आप इसका उपयोग कर सकते हैं - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid। देखो .. मुझे यह बहुत उपयोगी लगा। अच्छा प्रदर्शन, बहुत हल्का वजन, सभी महत्वपूर्ण ब्राउज़र अनुकूल और अपने आप में तरल पदार्थ, इसलिए आपको ग्रिड के लिए वास्तव में बूटस्ट्रैप की आवश्यकता नहीं है।


1
हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - समीक्षा से
piet.t

मैं सहमत हूं .. लेकिन यह उत्तर का संदर्भ नहीं है, यह प्लगइन का एक लिंक है, जहां फाइलें डाउनलोड की जा सकती हैं, मुझे लगता है कि मैं यहां उत्तर के साथ फाइलें संलग्न नहीं कर सकता हूं ..
उत्साही
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.