ट्विटर बूटस्ट्रैप नेविगेशन बार में "आइकन-बार"

Question

मैं यह नहीं समझ सकता कि निम्नलिखित कोड का क्या अर्थ है icon-bar:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

किस icon-barलिए है? इसके तीन समान उदाहरण क्यों हैं?

यह कोड नेविगेशन बार सेक्शन में है:

<div class="navbar-header">
  ...
</div>

Comments

यह तीन क्षैतिज रेखाओं वाला एक बटन बनाना है। स्क्रीन की चौड़ाई छोटी होने और नेव-बार ढहने पर यह बटन प्रदर्शित होता है। जब आप उस पर क्लिक करते हैं, तो नौसेना-बार का विस्तार होता है।

— अर्पित अग्रवाल

@ArpitAgrawal, आप सही हैं, लेकिन इसे टिप्पणी के बजाय एक उत्तर देने पर विचार करें!

— मेमोरियल

Answer 1

icon-barउत्तरदायी लेआउट के लिए उपयोग किया जाता है एक बटन बनाने के लिए जो संकीर्ण ब्राउज़र स्क्रीन पर outs जैसा दिखता है। आप अपने ब्राउज़र विंडो (इसे संकीर्ण बनाते हुए) का आकार बदल सकते हैं, यह देखने के लिए कि उस बटन के द्वारा नावबार को कैसे बदला गया है।

तीन spanटैग तीन क्षैतिज रेखाएं बनाते हैं जो एक बटन की तरह दिखती हैं, जिसे आमतौर पर "बर्गर" आइकन के रूप में जाना जाता है।

पर एक नजर डालें icon-barमें bootstrap.css:

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

यह एक ब्लॉक संरचना है, इसलिए इसे लाइन द्वारा पंक्तिबद्ध किया जाता है। background-colorहोने के लिए सेट कर दिया जाता gray80 । असल में, आप अपने को बदल सकते हैं width, height, background-color, आदि के रूप में आप चाहते हैं।

Comments

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

— बैलेच

@ फ्लेच, जैसा कि आप शायद समझ गए हैं, उसका अर्थ है "कम से कम" जैसा कि "खिड़की को छोटा करें", सामान्य रूप से "सिस्टम ट्रे को कम से कम" नहीं।

— मेमोरियल

तुम्हें पता है कि इस बारे में क्या अजीब है ... क्या यह है .navbar-toggle .icon-bar। इसे एक स्वसंपूर्ण वर्ग के रूप में छोड़ने के बजाय, उन्होंने इसे नौबहार टॉगल का एक उपवर्ग बना दिया। मेरे लिए, कोई मतलब नहीं है। मैं अपने खुद के बटन और ड्रॉप-डाउन को एक नेवबार के बाहर सजाने में सक्षम होना चाहता हूं। आप इसे पूरा करने के लिए पूरे CSS ब्लॉक को कॉपी कर सकते हैं और इसे स्टैंडअलोन क्लास बना सकते हैं, लेकिन यह बार-बार कोड है। मैं एक बेहतर समाधान के बारे में नहीं जानता, हालांकि।

— क्रिस क्रेफ़िस

मुझे विश्वास नहीं हो रहा है कि हैमबर्गर शब्द इस पृष्ठ पर दिखाई नहीं देगा।

— जेरेमी एंडरसन

@JeremyAnderson अब यह करता है, है ना? : D

— प्रिया रंजन सिंह

Answer 2

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

मैंने इसका इस्तेमाल नेवबार (समान विचार) के बजाय ड्रॉपडाउन टॉगल बटन में किया। यहाँ मैं उपयोग किया गया कोड है:

HTML:

          <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              Menu
              <span class="icon-bars-button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
            </ul>
          </div>

सीएसएस:

.dropdown-toggle .icon-bars-button{
  display: inline-block;
  vertical-align:middle;
}
.dropdown-toggle .icon-bar {
  margin-bottom:2px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

Answer 3

class="navbar-toggle"शैलियों प्राप्त करने के लिए प्रयोग किया जाता है।

data-toggle="collapse" शो को नियंत्रित करने और छिपाने के लिए विशेषता का उपयोग किया जाता है।

data-target = "#id"विशेषता सिमटने div साथ बटन कनेक्ट करने के लिए प्रयोग किया जाता है

icon-barउपयोग किया जाता है ओ तीन क्षैतिज रेखाओं के साथ एक बटन बनाते हैं। स्क्रीन की चौड़ाई छोटी होने पर यह बटन प्रदर्शित होता है