कैसे बूटस्ट्रैप में एक <बटन> बनाने के लिए नव-टैब में एक सामान्य लिंक की तरह दिखता है?

Question

मैं (पूर्व में ट्विटर) बूटस्ट्रैप 2 में काम कर रहा था और मैं बटन को स्टाइल करना चाहता था, क्योंकि वे सामान्य लिंक थे। न केवल किसी भी सामान्य लिंक, हालांकि; ये एक <ul class="nav nav-tabs nav-stacked">कंटेनर में जा रहे हैं । मार्कअप इस तरह खत्म हो जाएगा:

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

क्या बूटस्ट्रैप के पास इन रूपों को देखने का कोई तरीका है <button>जैसे वे वास्तव में थे <a>?

Comments

यहां वे सभी वर्ग हैं जो आप <button>तत्वों पर रख सकते हैं: getbootstrap.com/2.3.2/base-css.html#buttons

— रॉकेट

इसके बजाय <बटन> का उपयोग क्यों नहीं किया जा रहा है?

— VVL

क्योंकि मुझे उस फॉर्म की स्थिति बनाए रखने की आवश्यकता है जो बाकी फॉर्म में है। मुख्य रूप से इसका मतलब है कि एक फॉर्म सेशन आईडी, और इसे वास्तव में लिंक बनाने का मतलब होगा कि पूरे फॉर्म को GET में स्विच करना और उस डेटा को इसमें डालना href। इसलिए मूल रूप से मुझे या तो नाटकीय रूप से बदलना होगा कि मेरा फॉर्म कैसे प्रस्तुत करता है या प्रस्तुति को बदलता है। यह प्रश्न यह जानने का मेरा प्रयास है कि प्रस्तुति को बदलना कितना आसान है।

— meustrus

@VitorVenturin मेरा उपयोग मामला: डिफ़ॉल्ट टैब में इनपुट मार्किंग के लिए एक textarea है। टैब 2 में HTML पूर्वावलोकन है। इसलिए मैं नहीं चाहता कि टैब 2 में एक URL हो जो इसे डिफ़ॉल्ट रूप से खोलता है। यदि मैं लिंक का उपयोग करता हूं, तो उपयोगकर्ता मध्य क्लिक कर सकते हैं और होवर पर एक व्यर्थ पता स्थान देख सकते हैं। बटन को रोकता है।

— सिरो सेंटिल्ली 郝海东 i i i 法轮功 '

Answer 1

जैसा कि आधिकारिक दस्तावेज में उल्लेख किया गया है , बस वर्ग लागू करेंbtn btn-link:

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

उदाहरण के लिए, आपके द्वारा प्रदान किए गए कोड के साथ:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Comments

यह अब एक बटन की तरह नहीं दिखता है। हालाँकि, यह प्रदर्शित नहीं हो रहा है क्योंकि मैं इसे ul.nav- स्टैक्ड मार्कअप के भीतर चाहता हूं। उस मार्कअप के लिए सीएसएस केवल <a>टैग के साथ काम करने लगता है ...

— meustrus

लिंक से अलग दिखाता है।

— सिरो सेंटिल्ली 郝海东 冠状 iro i 法轮功 '

बूटस्ट्रैप 3 में, इस तरह से स्टाइल किए गए बटन लिंक की तरह दिखते हैं लेकिन उनके चारों ओर बहुत अधिक पैडिंग होती है जो लेआउट को गड़बड़ कर देती है। लेकिन आप सीएसएस की एक छोटी राशि जोड़कर इसे ठीक कर सकते हैं (नीचे @mcNux उत्तर देखें)

— मार्टिन सीआर

Answer 2

बस बटन की तरह नियमित लिंक देखो :)

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

एक href कोड के अंदर "भूमिका" यह बटन की तरह दिखता है, toc आप वर्ग जैसे अधिक चर जोड़ सकते हैं।

Comments

यह उपयोगी है लेकिन पूछे गए प्रश्न का उत्तर नहीं देता है।

— meustrus

I wanted to style buttons as though they were normal linksयह विपरीत है: S

— SW4

roleaतत्व के लिए विशेषता मान्य विशेषता नहीं है । ( w3.org/TR/html5/text-level-semantics.html#the-a-element )

— nZeus

यह पूछा जा रहा है के विपरीत है

— कुणाल

इस उत्तर के साथ समस्या यह है कि इस मामले में बटन टेक्स्ट वास्तव में एक लिंक की तरह स्टाइल किया गया है जो अच्छा नहीं है (जैसे कि यदि आप "_variables.scss" में "$ लिंक-सजावट: अंडरलाइन! डिफ़ॉल्ट" का उपयोग करते हैं)। यह शायद डेवलपर्स द्वारा नोट किया जाना चाहिए - शायद यह वह नहीं है जो वे हासिल करना चाहते थे। लिंक को एक बटन के रूप में पूरी तरह से स्टाइल किया जाना चाहिए।

— दिमित्री सोमोव

Answer 3

बस अपने बटन टैग में class के रूप में remove_button_css जोड़ें। आप लिंक 1 के लिए कोड सत्यापित कर सकते हैं

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

अतिरिक्त शैलियाँ संपादित करें

जोड़ें color: #337ab7;और :hoverऔर :focusOOTB (Bootstrap3) मैच के लिए

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}

Comments

अच्छी तरह से काम। जोड़ा :hoverऔर :focusbootstrap3 के साथ एक करीबी मैच के लिए।

— स्वतंत्रता-

Answer 4

बूटस्ट्रैप 3 में, यह मेरे लिए अच्छा काम करता है:

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

जैसे इस्तेमाल किया:

<button type="button" class="btn-link btn-anchor">My Button</button>

डेमो

Comments

धन्यवाद, यह वही है जो मुझे चाहिए था। बूटस्ट्रैप 3 .btn- लिंक इसे काटता नहीं है और आपको बस अपने ऊपर एक क्लास जोड़ना है।

— राफेल सिलेक

हाँ यह पूरी तरह से काम करता है। तुरंत मेरे बीएस 3 फॉर्म लेआउट में पंक्तियों के बीच सही ऊर्ध्वाधर अंतर है। अति उत्कृष्ट।

— मार्टिन सीआर

Answer 5

बस पृष्ठभूमि रंग, सीमाओं से छुटकारा पाएं और होवर प्रभाव जोड़ें। यहाँ एक पहेली है: http://jsfiddle.net/yPU29/

<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
  <ul class="nav nav-tabs nav-stacked">
    <li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
    <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
    <!-- ... -->
  </ul>
</div>
<!-- The actual form -->
<div class="span9">
  <!-- ... -->
</div>
</div>
</form>

सीएसएस:

.button-link {
background-color: transparent;
border: none;
}

.button-link:hover {
color: blue;
text-decoration: underline;
}

Comments

मैंने कुछ और सीएसएस एलिमेंट्स जोड़े हैं ताकि यह एक ड्रॉपडाउन लिंक की तरह दिखाई दे। कुल में: .लेटन-लिंक {डिस्प्ले: ब्लॉक; चौड़ाई: 100%; गद्दी: 3 पीएक्स 20 पीएक्स; दोनों को साफ करो; रंग: # 333; श्वेत-स्थान: Nowrap; पृष्ठभूमि-रंग: पारदर्शी; सीमा: कोई नहीं; पाठ-संरेखण: बायां; } .बटन-लिंक: होवर {बैकग्राउंड-कलर: # f5f5f5; }

— एंडी बेवरली

Answer 6

मैंने सभी उदाहरणों की कोशिश की है, यहां पोस्ट किया गया है, लेकिन वे अतिरिक्त सीएसएस के बिना काम नहीं करते हैं। इसे इस्तेमाल करे:

<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>

बिना किसी अतिरिक्त CSS के पूरी तरह से काम करता है।

Comments

यह मान्य HTML नहीं है। stackoverflow.com/a/6393863/496046

— कंपन