ट्विटर बूटस्ट्रैप

Question

के साथ यूआई फ्रेमवर्क ज़र्ब फाउंडेशन मिक्सिंग अलग यूआई ढांचे को मिश्रित किया जा सकता है?

कहें, ताकि मैं उसी परियोजना में bootstrap और zurb foundation दोनों का उपयोग कर सकूं?

यदि हां साइट्स के ऐसे उदाहरण हैं जहां यह किया गया है?

Answer 1

उत्तर है, यह निर्भर करता है। फाउंडेशन 4 आपको या तो प्रस्तुति वर्ग .large-12 .columns या सैस मिश्रित का उपयोग करने की अनुमति देता है। आप _settings.scss में भी परिभाषित कर सकते हैं जो विशिष्ट प्रस्तुति वर्ग उत्पन्न किए जाने चाहिए। यदि आप सीधे मिश्रित मिश्रण का उपयोग कर रहे हैं, तो किसी भी प्रस्तुति वर्गों को उत्पन्न करने की आवश्यकता नहीं है।

दूसरी तरफ बूटस्ट्रैप कम उपयोग करता है। यह एक समान तकनीक है लेकिन सास/एसएसएस के साथ संगत नहीं है। मुझे पता है कि बूटस्ट्रैप 3 में भी कम मिक्सिन के साथ समान कार्यक्षमता है। इसका मतलब है कि आपको दोनों सीएसएस फ़ाइलों को एक साथ बिल्ली या किसी पृष्ठ पर जेनरेट की गई फ़ाइलों को शामिल करने के लिए कुछ प्रकार की बिल्ड स्क्रिप्ट/फ़ाइल बनाने की आवश्यकता होगी।

फिर जावास्क्रिप्ट है। ज़र्ब फाउंडेशन डिफ़ॉल्ट रूप से ज़िप्टो (या कोशिश करता है) का उपयोग करता है। यह questionable है कि बूटस्ट्रैप 3 संगत है या नहीं, लेकिन इस बिंदु पर यह इसे पाने के लिए थोड़ा सा काम है। आपको jQuery का उपयोग करने के लिए पृष्ठ को मजबूर करने की आवश्यकता होगी।

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

एक बार ऐसा करने के बाद कहा जाता है, तो आप सोच सकते हैं कि आप दो ढांचे को क्यों मिश्रित करना चाहते हैं। क्या यह एक तत्व है और दूसरे में नहीं? क्या यह डिजाइन या स्टाइल है? मैं उस ढांचे को चुनने पर विचार करता हूं जो आप बॉक्स से बाहर करना चाहते हैं। फिर इसे सास या कम में स्टाइल करें या jQuery प्लगइन्स का उपयोग करें जो आपको समान कार्यक्षमता देता है।

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

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

मुझे दो ढांचे के मिश्रण को लागू करने वाली किसी भी साइट के बारे में पता नहीं है। मुझे लगता है कि यह ऊपर वर्णित कुछ मुद्दों के कारण है।

Answer 2

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

Thomas McDonald की सास/बूटस्ट्रैप

Alademann की सास/बूटस्ट्रैप

यह आप जो काम आप का उपयोग करने के लिए जा रहे हैं पर निर्भर है। उनके दस्तावेज पढ़ें। मेरे लिए, मैं मैकडॉनल्ड्स के काम का उपयोग कर रहा हूं। मैं अपने मुख्य उत्तरदायी ढांचे के लिए फाउंडेशन का उपयोग करता हूं, और मैं केवल बूटस्ट्रैप के प्रभाव (जेएस) का उपयोग करता हूं। मैं कुछ क्यूब की विशेषताओं का भी उपयोग करता हूं। क्यूब एक और सीएसएस ढांचा है।

<link rel="stylesheet" type="text/css" href="css/foundation/normalize.css" /> 
<link rel="stylesheet" type="text/css" href="css/kube/kube.css" /> 
<link rel="stylesheet" type="text/css" href="css/kube/master.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap/responsive.css" /> 
<link rel="stylesheet" type="text/css" href="css/foundation/foundation.css" /> 
<link rel="stylesheet" type="text/css" href="css/Index.css" /> 
<script src="js/vendor/custom.modernizr.js"></script> 

और यहाँ एक नमूना है जिसमें मैं फाउंडेशन और बूटस्ट्रैप प्रयोग किया है:: यहाँ कैसे मैं सेटअप मेरी प्रमुख टैग के अंदर चीजें है

<div class="row"> 
<div class="large-12 columns"> 
<div class="large-10 columns" id="slideshow"> 
    <div class="carousel slide auto" id="picz" > 
    <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#picz" data-slide-to="0" class="active"></li> 
      <li data-target="#picz" data-slide-to="1"></li> 
      <li data-target="#picz" data-slide-to="2"></li> 
     </ol> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner">... 

ये मेरी परियोजना की वास्तविक कोड है, तो मैं सब कुछ पोस्ट नहीं करेंगे । उम्मीद है कि यह थोड़ा सा मदद करता है।