Twitter बूटस्ट्रैप 2 में बटन सबमिट करने के लिए आइकन जोड़ें

Question

मैं अपने फॉर्म इनपुट सबमिट बटन पर ट्विटर बूटस्ट्रैप आइकन का उपयोग करना चाहता हूं।

Http://twitter.github.com/bootstrap/base-css.html#icons पर उदाहरण मुख्य रूप से स्टाइल हाइपरलिंक दिखाते हैं।

निकटतम मैं आया हूं बटन के बगल में प्रदर्शित आइकन हो रहा है, लेकिन अंदर नहीं।

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>

Comments

मैंने कुछ समय तक बिना किसी सफलता के ऐसा करने की कोशिश की। असल में, आप एक बटन के मूल्य के भीतर html तत्वों को नहीं जोड़ सकते।

— जॉन गुडमैन

@ जॉनहुडमैन एक उत्तर होना चाहिए, एक टिप्पणी नहीं। स्वीकृत जवाब एक काम है, और सवाल का सीधा जवाब नहीं है।

— कार्टिफेफोरस

Answer 1

आप इनपुट के बजाय बटन टैग का उपयोग कर सकते हैं

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Comments

यह काम करता है, हालांकि बटन टैग क्या है और इसके क्रॉस ब्राउज़र प्रभाव के बारे में अधिक जानकारी के लिए कृपया w3schools.com/tags/tag_button.asp देखें । इसका उपयोग सावधानी के साथ करें, विशेष रूप से रूपों के साथ।

— Matenia Rossides

मैंने इसे Chrome, Firefox, Safari (win7 पर) और IE8 में <form> टैग के अंदर एक सबमिट बटन के रूप में सफलतापूर्वक परीक्षण किया है

— Mr Bell

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

— जेशुरुन

यह वही था जो मैं कर रहा था। हालाँकि, आइकन <i>टैग में जोड़े जाने के बाद दिखाई नहीं दिया । यह बेहद पागलपन था, जब तक मुझे पता चला कि मुझे कैश को साफ करने की आवश्यकता है। यदि आप एक ही समस्या में भाग लेते हैं, तो लोग Ctrl+F5कैश को साफ़ करने और ताज़ा करने के लिए हिट करते हैं, और शानदार आइकन देखते हैं!

— आदित्य सांसद १३

मुझे जोड़ने की जरूरत हैonClick="submit();"

— टिम

Answer 2

मुझे लगता है कि आप इस उद्देश्य के लिए लेबल टैग का उपयोग कर सकते हैं। यहाँ ट्विटर बूटस्ट्रैप HTML नेवबार का एक नमूना दिया गया है:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

मूल रूप से आपको इनपुट के लिए एक लेबल तत्व मिलता है (टाइप = सबमिट) और फिर आप वास्तविक इनपुट सबमिट को छिपाते हैं। उपयोगकर्ता लेबल तत्व पर क्लिक कर सकते हैं और फिर भी फ़ॉर्म सबमिट कर सकते हैं।

Comments

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

— एरोनल्स

हालांकि यह स्टाइल लागू करता है और बहुत अच्छा लगता है, यह उपयोगकर्ता द्वारा किसी इनपुट फ़ील्ड में दर्ज किए जाने पर फ़ॉर्म को सबमिट होने से रोकता है। (केवल FF17 पर परीक्षण किया गया)

— रिचर्ड

स्पष्ट रूप से मेरे लिए सबसे अच्छा समाधान। चीयर्स!

— आर्मेल लारिसर

Answer 3

मुझे लगता है कि आपको ट्विटर बूटस्ट्रैप के साथ उपयोग करने के लिए डिज़ाइन किए गए इस FontAwesome को आज़माना चाहिए ।

<button class="btn btn-primary icon-save">Button With Icon</button>

Answer 4

आप कहीं भी आइकन के साथ एक <a/> जोड़ सकते हैं, और इसमें एक JavaScrit क्रिया बांध सकते हैं, जो फ़ॉर्म को सबमिट करता है। यदि आवश्यक हो, तो मूल जमा बटन का नाम और मूल्य + का मूल्य एक छिपी हुई विशेषता में हो सकता है। यह jQuery के साथ आसान है, कृपया मुझे शुद्ध जावास्क्रिप्ट संस्करण से बचने की अनुमति दें।

मान लीजिए कि यह मूल रूप है:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

इसे इस तरह बदलें:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... और फिर जादुई jQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

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

Comments

मेरा आपसे अनुरोध है कि यदि आप इसके बारे में कुछ विचार रखते हैं, तो मेरे इस प्रश्न का उत्तर दें। stackoverflow.com/questions/11295378/…

— कृष्णप्रसाद वर्मा

Answer 5

बूटस्ट्रैप 3 के साथ ऐसा करने का एक नया तरीका है:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

यह बूटस्ट्रैप ग्लिफ़िकंस पृष्ठ पर "कैसे उपयोग करें" के तहत है:

Answer 6

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

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

यदि आप रेल का उपयोग नहीं कर रहे हैं, तो यहां आइकन के साथ लिंक के लिए आउटपुट HTML है (एक संपादित करें, हटाएं और नए सबमिट बटन के लिए)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

और यहाँ समाप्त परिणाम के स्क्रीनशॉट के लिए एक लिंक है: http://grab.by/cVXm

Comments

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

— असफंद काजी

वह शायद डिलीट लिंक के लिए प्राधिकरण का उपयोग कर रहा है, ज्यादातर लोग करते हैं।

— Noz

विषय के रूप में ओपी रेल के बारे में नहीं पूछ रहा था लेकिन ... रेल वास्तव में विनीत जावास्क्रिप्ट के माध्यम से इस तरह के हाइपरलिंक को एकीकृत करते समय एक नष्ट विधि का उपयोग करता है। यदि कोई व्यक्ति सीधे उस लिंक का अनुरोध करता है, तो डिफ़ॉल्ट उस रिकॉर्ड को प्रस्तुत करेगा, उसे हटाए नहीं। अधिक विस्तार के लिए इस उत्तर को देखें: stackoverflow.com/a/2809412/252290

— 22

यह विशेष रूप से सबमिट बटन के बारे में है, न कि एंकर टैग के बारे में।

— पिक्सेलएर्थ

Answer 7

एक तरीका है, कैसे (बूटस्ट्रैप के) ग्लिफ़िकॉन प्राप्त करें input type="submit"। Css3 एकाधिक पृष्ठभूमि का उपयोग करना।

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

और सीएसएस:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

यदि कई पृष्ठभूमि ओवरलैपिंग हैं, तो शीर्ष पर पहले पायदान पर पृष्ठभूमि होगी background:। तो शीर्ष पर वह पृष्ठभूमि होती है जो 16pxबाईं ओर से इंडेंट की जाती है ( 16pxसिंगल ग्लिफ़िकॉन की चौड़ाई होती है), निचले स्तर पर पूरी होती है glyphicons-halflings.pngऔर निचले स्तर पर (पूरे तत्व को शामिल किया जाता है) शीर्ष स्तर की तरह ही बैकग्राउंड ग्रेडिएंट होता है।

-48px 0pxखोज आइकन के लिए कट है ( icon-search) लेकिन किसी अन्य आइकन को दिखाना आसान है।

यदि किसी को एक :hoverप्रभाव की आवश्यकता होती है , तो पृष्ठभूमि को उसी रूप में फिर से टाइप किया जाना चाहिए।

Comments

हालांकि यह काम कर सकता है, यह निश्चित रूप से उतना सुंदर नहीं है जितना कि <बटन प्रकार = "सबमिट"> का उपयोग करना और बनाए रखना कठिन होगा।

— रिचर्ड

Answer 8

मुझे यह काम करने के लिए मिला है, लेकिन मेरे द्वारा अभी तक हल नहीं किए गए कुछ कैविएट हैं।

वैसे भी, यह कैसे किया जाता है:

अपना औसत इनपुट बटन लें:

<input type="submit" class="btn btn-success" value="Save">

ग्लिफ़िकॉन स्प्राइट फ़ाइल से अपने सबमिट बटन के लिए इच्छित आइकन को काटें, सुनिश्चित करें कि यह 14x14 px छवि है। हां, आदर्श परिस्थितियों में आप स्प्राइट का पुन: उपयोग कर सकते हैं, और यदि कोई व्यक्ति यह बताता है कि मुझे यह सुनकर खुशी होगी कि यह कैसे किया जाता है। :-)

एक बार जब आप ऐसा कर लेते हैं, तो आप इस तरह से अपने इनपुट बटन के लिए सीएसएस लिख सकते हैं:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

फ़ायरफ़ॉक्स 14, क्रोम 21 में काम करता है

IE 9 में काम नहीं करता है

tl; dr: एक बिट सीएसएस के साथ आप अपने सबमिट बटन पर स्वचालित रूप से आइकन डाल सकते हैं, लेकिन आपको आइकन को एक अलग फाइल में रखना होगा और यह इंटरनेट एक्सप्लोरर में काम नहीं करेगा।

Answer 9

मुझे लगता है कि यह आपकी समस्या का हल है

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Answer 10

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

Comments

प्रश्न सबमिट के

— ग्रिगोरी किसलिन

यह बूटस्ट्रैप 3 है - प्रश्न बूटस्ट्रैप 2 प्रारूप के बारे में था, जो आइकन प्रदर्शित करने के लिए किसी अन्य प्रारूप का उपयोग करता है।

— कैलालेन

Answer 11

ऐड-ऑन कक्षाओं के साथ इनपुट-एपेंड का उपयोग करें

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Answer 12

मुझे लगता है कि यह बेहतर तरीका है, मेरे लिए ठीक काम करता है।

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>