बूटस्ट्रैप 3 की navbar की संरचना क्या है?

Question

जबकि बूटस्ट्रैप दस्तावेज़ बहुत अच्छा है, मैं documentation में केवल एक उदाहरण से नेविबार संरचना को समझने में असमर्थ हूं। मैं समझने की कोशिश कर रहा हूं कि नौसेना के उप-घटक क्या हैं और उनका उपयोग कैसे करें। जहां तक ​​मैं कह सकता हूं, navbar के दो क्षेत्र हैं: एक हेडर और एक पतन क्षेत्र। हेडर ब्रांड नाम (बाईं ओर) और दाईं ओर टॉगल बटन डालने का स्थान प्रतीत होता है। यह उस क्षेत्र की तरह भी लगता है जो हमेशा दिखाया जाएगा। संकुचित सब कुछ के लिए क्षेत्र प्रतीत होता है और छोटी चौड़ाई के लिए ध्वस्त हो जाएगा।

1. क्या यह सही समझ है? क्या कोई अन्य क्षेत्र है?
2. कंटेनर-द्रव रैपर का उद्देश्य क्या है? क्या होगा यदि यह रैपर हटा दिया गया हो?
3. प्रत्येक क्षेत्र में किस प्रकार के तत्व जा सकते हैं?
4. यदि मुझे किसी भी ढहने योग्य अनुभाग की आवश्यकता नहीं है तो क्या होगा? क्या मुझे सब कुछ हेडर में रखना चाहिए?
5. क्या होगा यदि मुझे तीन गैर-ढहने वाले वर्गों की आवश्यकता है: बाएं, मध्य और दाएं?

कृपया मदद करें।

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

संपादित मैं बूटस्ट्रैप नेवबार कई और अधिक उदाहरण है कि पर this tutorial पाया - यह वास्तव में अच्छा है। मैं शायद वहां से पैटर्न प्राप्त कर सकता हूं, लेकिन यह अच्छा होगा अगर कोई उन्हें स्पष्ट रूप से स्पष्ट कर सके। उदाहरण के लिए, इस ट्यूटोरियल में सबसे पहले उदाहरण में क्लास नेविबार-हेडर के साथ एक div है जिसके बाद कोई कक्षा नहीं है जिसमें सभी वर्ग हैं और सभी लिंक हैं। इससे मुझे लगता है कि एक आवश्यक के रूप में navbar में कई divs जोड़ सकते हैं, navbar-header और navbar-fallapse केवल विशेष उद्देश्य उप-घटक हैं।

<nav class="navbar navbar-inverse" role="navigation"> 

    <div class="container-fluid"> 

     <div class="row"> 
      <div class="col-xs-4 navbar-text"> 
       <a href="#" class="navbar-link">Left</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-center"> 
       <a href="#" class="navbar-link">Middle</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-right"> 
       <a href="#" class="navbar-link">Right</a> 
      </div> 
     </div> 

    </div><!-- /.container-fluid --> 
</nav> 

मैं समझ नहीं है के बाद से है कि एक कंटेनर-तरल पदार्थ के अंदर:

Answer 1

@ bto.rdz की सलाह के आधार पर, इस समाधान मैं चला गया, मध्यम और सही वर्गों के साथ # 5 के लिए नेवबार के साथ आया था navbar, बाएं, मध्य और दाएं लिंक के लिए 3 कॉलम के साथ एक पंक्ति क्यों नहीं बनाते हैं। यह लगभग काम करता है सिवाय इसके कि यह 768 पिक्सेल पर टूट रहा था। मैंने बूटस्ट्रैप को उस ब्रेकपॉइंट पर 15px बाएं और दाएं मार्जिन जोड़ने का पता लगाया। मैं इस व्यवहार को निम्नानुसार ओवरराइड करता हूं और अब मेरे पास सभी ब्राउज़र चौड़ाई पर वांछित व्यवहार है।

.navbar-text { 
    margin-left: 0; 
    margin-right: 0; 
}