नवबार में बूटस्ट्रैप 3.0 बटन

Question

मैंने अभी बूटस्ट्रैप 3.0 को अपग्रेड किया है। और "ए" टैग जो बीटीएन (वर्ग .btn की मदद से) की तरह दिखता है, नेवबार पर बर्बाद हो जाता है।

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

लेकिन यह सही ढंग से काम नहीं कर रहा है। बूटस्ट्रैप ने मेरे विचार से सिस्टम को बदल दिया।

Comments

आपको वास्तव में प्रलेखन के बूटस्ट्रैप 2 से 3 माइग्रेशन अनुभाग पर एक नज़र डालनी चाहिए। यह उन सभी वर्गों को सूचीबद्ध करता है जो बदल गए हैं या हटा दिए गए हैं और उनके स्थान पर क्या उपयोग करना है। getbootstrap.com/getting-started/#migration

— cjd82187

Answer 1

<p class="navbar-btn">चारों ओर लपेटें <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

स्क्रीनशॉट:

Comments

धन्यवाद, अच्छा काम करता है और मैं अपने समाधान को बेहतर पसंद करता हूं क्योंकि आप अभी भी उपयोग कर पा रहे हैं <a>

— pastullo

चेतावनी दी है: ढह संस्करण बहुत अच्छा नहीं लगता है। अन्य लिंक ब्लॉक हैं (यानी पूर्ण-चौड़ाई क्लिक करने योग्य है)। यदि आप इसका उपयोग btn-blockकरते हैं तो यह टेक्स्ट को केंद्र में संरेखित करता है, इसलिए यह अन्य लिंक से मेल नहीं खाता है।

— rybo111

Answer 2

अब, बूटस्ट्रैप 3 में इस तरह के बटन हैं:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

यह उपयोग करता है navbar-btnतो यह जानता है कि यह नौबत में है।

यदि आप इसे काम करना चाहते हैं, तो यह करें:

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

इस तरह, यह अभी भी एक एंकर टैग की तरह काम करता है। बस #उस मूल्य के लिए बदलें जिसे आप वास्तव में चाहते हैं कि वह इसमें जाए।

तो इस उदाहरण के लिए:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

Comments

किस बारे में ? इससे पहले कि हम ऐसा कर सकें, <a type="button" class="btn btn-default navbar-btn"> लिंक </a>।

— सिहान कुसमीज़

दुर्भाग्य से, इस तरह अगर यह जिस पथ को इंगित करता है /appवह परिणाम url है /app?(अतिरिक्त प्रश्न चिह्न पर ध्यान दें)।

— हकुनिन

Answer 3

बूटस्ट्रैप 3 के साथ, <a>बटन के रूप में एक लिंक प्रदान करना अभी भी संभव है , लेकिन आपको उन्हें एक में शामिल करना होगा <form>। साथ ही, क्लास <a>को शामिल करना चाहिए navbar-btn।

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>

Comments

संकेत के लिए धन्यवाद। वास्तव में मैंने पाया <div>काम करता है, <form>जिसके बजाय अर्थ नहीं है। कुंजी का aसीधा बच्चा नहीं है <li>।

— बिली चान

जब आप ऐसा करते हैं, तो हॉवर गड़बड़ हो जाता है? बटन के लिए पृष्ठभूमि मेरे लिए पारदर्शी हो जाती है।

— रिच

मेरे लिए <div> समाधान काम करता है। यह शर्म की बात है कि यह मूल रूप से फ्रेमवर्क में समर्थित है, हालांकि, मैंने इसके आसपास गिथब पर भी बहुत चर्चा की है और उन्हें नहीं लगता कि लिंक बटन को मूल रूप से काम करने की उनकी कोई योजना है, जो मुझे एक बुरा विकल्प लगता है।

— सररावलींस

Answer 4

समस्या यह है कि .nav > li > aएक नाविक में एंकर को स्टाइल करने के लिए चयनकर्ता है: जिसका अर्थ है कि यह एक .navbar-btn की तुलना में एक उच्च मिसाल है।

आप इसे एक स्पैन की तरह दूसरे टैग में लपेट कर ठीक कर सकते हैं। मुझे नहीं लगता कि आपको एक फॉर्म टैग का उपयोग करना चाहिए, जैसा कि दूसरों का सुझाव है कि यह एक फॉर्म नहीं है।

Comments

निश्चित रूप से सबसे अच्छा जवाब।

— टाइपोनियरोर

Answer 5

http://learnangular2.com/events/

घटना का प्रमाण

ईवेंट ऑब्जेक्ट को कैप्चर करने के लिए, टेम्पलेट से ईवेंट कॉलबैक में पैरामीटर के रूप में $ इवेंट पास करें:

<button (click)="clicked($event)"></button>

यह ईवेंट को संशोधित करने का एक आसान तरीका है, जैसे कि कॉलडफॉल्ट को रोकना:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

Comments

यह ... उह। क्या?

— अद्रोवर