बूटस्ट्रैप वाले बटन पर लिंक कैसे लगाएं?

Question

बूटस्ट्रैप वाले बटन पर कोई लिंक कैसे डालेगा?

बूटस्ट्रैप प्रलेखन में 4 विधियाँ हैं:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

पहला मेरे लिए काम नहीं करता है, कोई बटन नहीं दिखाता है, बस लिंक के साथ पाठ है, इसका उपयोग करके थीम को महसूस कर रहा है।

दूसरा एक बटन दिखाता है जो मैं चाहता हूं, लेकिन क्या कोड क्लिक करने पर बटन को दूसरे पेज पर लिंक करता है?

चियर्स

Comments

jsfiddle.net/Lstcymqo समस्या आपके द्वारा उपयोग किए जा रहे विषय के साथ हो सकती है

— linktoahref

बटन और लिंक के बीच अंतर क्या हैं?

— बगुला बंदर

Answer 1

आप बटन के क्लिक इवेंट पर एक फ़ंक्शन को कॉल कर सकते हैं।

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

या इस कोड का उपयोग करें

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Comments

एक बुरा स्वीकृत उत्तर: वेब क्रॉलर द्वारा आपके लिंक कैसे पार्स किए जाते हैं? कोई शीर्षक नहीं, कोई लक्ष्य नहीं, यह लिंक नहीं है, यह एक पुनर्निर्देशन है ...

— hugsbrugs

यह SEO के लिए पूरी तरह से अनावश्यक है और वास्तव में बुरा है। नीचे मेरे समाधान पर एक नज़र डालें ( stackoverflow.com/a/44130105/1202214 )।

— एंड्रियास बर्गस्ट्रॉम

मुझे अच्छा जवाब।

— Mo1

Answer 2

यदि आपको वास्तव में बटन तत्व की आवश्यकता नहीं है, तो कक्षाओं को नियमित लिंक पर ले जाएँ:

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

इसके विपरीत, आप लिंक की तरह दिखने के लिए एक बटन भी बदल सकते हैं:

<button type="button" class="btn btn-link">Link</button>

Comments

स्वीकार किए गए एक से बेहतर उत्तर - जावास्क्रिप्ट की कोई आवश्यकता नहीं है .. धन्यवाद

— बालाजी कृष्णन

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

— जेम्स वेस्टगेट

दूसरा विकल्प बेहतर है;)

— मार्गो

Answer 3

सबसे आसान समाधान आपका पहला उदाहरण है:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

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

Comments

यह सभी के लिए सबसे आसान है।

— नाना पार्टीकर

वन-लाइनर्स सर्वश्रेष्ठ हैं;)

— इवान

Answer 4

<button>मार्कअप के अंदर लिंक कलर को सही ढंग से काम करने के लिए एक और ट्रिक

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

कृपया ध्यान रखें कि bs4 बीटा में जैसे btn-primary-outlineपरिवर्तित हो गया हैbtn-outline-primary

Comments

btn-outline-primaryऔर btn-outline-primaryवही चीजें हैं। क्या कोई टाइपो है?

— इमेलारिलिक

यह मेरे लिए काम कर गया क्योंकि एंकर स्टाइल को jquery ui थीम आइटम द्वारा ओवर-राइड किया जा रहा था

— Avagut

रंग से विरासत में मिली नीट ट्रिक

— सीन मैकार्थी

Answer 5

इस तरह मैंने हल किया

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>  

Answer 6

उपरोक्त उत्तरों के संयोजन से मुझे एक सरल समाधान मिल जाता है जो शायद आपकी भी मदद करेगा:

<button type="submit" onclick="location.href = 'your_link';">Login</button>

सिर्फ इनलाइन जेएस कोड जोड़कर आप एक बटन को लिंक में बदल सकते हैं और उसका डिज़ाइन रख सकते हैं।

Answer 7

आप बस निम्नलिखित कोड जोड़ सकते हैं;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>