টুইটার বুটস্ট্র্যাপ 2 এ বোতাম জমা দিতে আইকন যুক্ত করুন

227

আমি আমার ফর্ম ইনপুট জমা বোতামগুলিতে টুইটার বুটস্ট্র্যাপ আইকনগুলি ব্যবহার করতে চাই।

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>
twitter-bootstrap  twitter-bootstrap-2 
— AyKarsi
সূত্র
2
আমি কিছুটা সাফল্য না করে এটি করার চেষ্টা করেছি। মূলত, আপনি একটি বোতামের মানের মধ্যে এইচটিএমএল উপাদান যুক্ত করতে পারবেন না।
— জন গুডম্যান
@ জন গুডম্যান এটি উত্তর হওয়া উচিত, মন্তব্য নয়। গৃহীত উত্তর হ'ল একটি কাজ, এবং প্রশ্নের সরাসরি উত্তর নয়।
— কার্টফোরহর্স

উত্তর:

394

আপনি ইনপুট পরিবর্তে একটি বোতাম ট্যাগ ব্যবহার করতে পারেন

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>
— সাইমন কানিংহাম
সূত্র
12
এটি কাজ করে তবে বোতাম ট্যাগটি কী বোঝাতে চাইছে এবং এর ক্রস ব্রাউজারের প্রভাব সম্পর্কে আরও তথ্যের জন্য দয়া করে w3schools.com/tags/tag_button.asp দেখুন। এটি বিশেষত ফর্মগুলির সাথে সাবধানতার সাথে ব্যবহার করুন।
— ম্যাটেনিয়া রসাইডস
10
আমি এটি একটি ক্রোম, ফায়ারফক্স, সাফারি (উইন 7-এ) এবং আইই 8 তে একটি <for> ট্যাগের মধ্যে সফলভাবে সাবমিট বাটন হিসাবে পরীক্ষিত করেছি
— মিস্টার বেল
4
এই পদ্ধতির সাথে আমার একমাত্র সমস্যাটি হ'ল যদি ফর্মটিতে অন্য বোতামগুলি থাকে তবে কীবোর্ডের এন্টার কী টিপানোর সময় আপনার ফর্মটি জমা দেওয়া হবে না, কারণ অন্যান্য বোতামগুলির মধ্যে একটি অগ্রাধিকার গ্রহণ করবে। কোন পরিচিত workaround?
— যিশুরুন
2
আমি ঠিক তাই করছিলাম তবে আমি <i>ট্যাগটিতে যুক্ত করার পরে আইকনটি উপস্থিত হয়নি । এটি অত্যন্ত উন্মাদজনক ছিল, যতক্ষণ না আমি আবিষ্কার করেছি আমার ক্যাশে সাফ করা দরকার। আপনি যদি একই সমস্যার মধ্যে চলে যান, লোকেরা, Ctrl+F5ক্যাশে সাফ করার জন্য হিট করুন এবং রিফ্রেশ করুন এবং গৌরবময় আইকনটি দেখুন!
— আদিত্য এমপি
2
আমার যোগ করার দরকার ছিলonClick="submit();"
— টিমপি
67

আমি মনে করি আপনি এই উদ্দেশ্যে লেবেল ট্যাগ ব্যবহার করতে পারেন। টুইটার বুটস্ট্র্যাপ এইচটিএমএল নভবারের একটি নমুনা এখানে:

<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>

মূলত আপনি ইনপুটটির জন্য একটি লেবেল উপাদান পান (টাইপ = জমা দিন) এবং তারপরে আপনি প্রকৃত ইনপুট জমাটি গোপন করেন। ব্যবহারকারীরা লেবেল উপাদানটিতে ক্লিক করতে পারেন এবং ফর্ম জমা দেওয়ার পরেও পেতে পারেন।

— খ্রিস্টান মাইকেল
সূত্র
9
এটি আমার কাছে উভয় বিশ্বের সেরা। আপনি যে স্টাইলটি চান তা পেয়ে যান এবং কোনও লিঙ্ক বা জাভাস্ক্রিপ্ট ব্যবহার করছেন না।
— অ্যারোনএলএস
1
এটি স্টাইলিং প্রয়োগ করে এবং দুর্দান্ত দেখায়, ব্যবহারকারী যখন কোনও ইনপুট ক্ষেত্রে প্রবেশ চাপায় তখন এটি ফর্মটি জমা দেওয়া থেকে বিরত রাখে। (কেবলমাত্র এফএফ 17 এ পরীক্ষিত)
— রিচার্ড
1
স্পষ্টতই আমার কাছে সেরা সমাধান। চিয়ার্স!
— আর্মেল লার্শিয়ার
11

আপনি আইকনটি দিয়ে কোথাও একটি <a/> যোগ করতে পারেন এবং এতে একটি জাভাস্ক্রিপ্ট ক্রিয়াকে আবদ্ধ করতে পারেন, যা ফর্মটি জমা দেয়। যদি প্রয়োজন হয় তবে মূল জমা বাটনের নাম + মানটির নাম এবং মান কোনও লুকানো বৈশিষ্ট্যের মধ্যে থাকতে পারে। এটি 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>

... এবং তারপরে magন্দ্রজালিক jQuery:

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

অথবা আপনি যদি নিশ্চিত করতে চান যে ব্যবহারকারী সর্বদা ফর্মটি জমা দিতে পারে - তবে আমি আপনার জুতাগুলিতে যা করব তা - তবে আপনি ফর্মের সাধারণ জমা বোতামটি রেখে দিতে পারেন এবং এটিকে jQuery। লুকিয়ে রাখতে পারেন h এটি নিশ্চিত করে যে লগইন এখনও জাভাস্ক্রিপ্ট এবং jQuery ছাড়াই স্বাভাবিক জমা বোতাম অনুসারে কাজ করে (সেখানে লিঙ্ক, ডাব্লু 3 এম এবং অনুরূপ ব্রাউজার ব্যবহারকারী লোক রয়েছে) তবে সম্ভব হলে আইকন সহ অভিনব বোতাম সরবরাহ করে।

— স্যান্ডর বেদো
সূত্র
আমি আপনাকে এই প্রশ্নটির উত্তর দেওয়ার জন্য অনুরোধ করি যদি আপনার এ সম্পর্কে কিছু ধারণা থাকে। stackoverflow.com/questions/11295378/…
— কৃষ্ণপ্রসাদ ভার্মা
7

আমি টুইটার বুটস্ট্র্যাপ আইকনগুলিকে একটি বেসিক রেলস ফর্মটিতে চেয়েছিলাম এবং এই পোস্টটি জুড়ে এসেছি। কিছুটা অনুসন্ধান করার পরে, আমি এটি করার একটি সহজ উপায় খুঁজে পেয়েছি। আপনি রেলগুলি ব্যবহার করছেন কিনা তা নিশ্চিত নয় তবে কোডটি এখানে। কীটি ছিল লিঙ্ক_টি দেখার সহায়কটিতে একটি ব্লক পাস করা:

<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 %>

আপনি যদি রেলগুলি ব্যবহার করছেন না, আইকনগুলির সাথে লিঙ্কগুলির জন্য আউটপুট এইচটিএমএল রয়েছে (সম্পাদনা, মোছা এবং নতুন জমা দেওয়ার বোতামগুলির জন্য)

# 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

— ব্রেট স্যান্ডার্স
সূত্র
2
সুতরাং যখন কোনও অনুসন্ধান ইঞ্জিন আপনার সাইটটি হামাগুড়ি দেয়, 'মুছুন' নামক একটি লিঙ্ক দেখে, সিদ্ধান্ত নেয়, "ওহ, আমি মনে করি আমি সেই লিঙ্কটি অনুসরণ করব" এবং আপনার ডাটাবেসের সাথে জগাখিচুড়ি শুরু করে? আমাকে সর্বদা বলা হয়েছিল যে পরিবর্তনগুলি সর্বদা সেই কারণে নন-জিইটি অপারেশন দিয়ে করা উচিত।
— আসফ্যান্ড কাজী
তিনি সম্ভবত লিঙ্কগুলি মোছার জন্য অনুমোদন ব্যবহার করছেন, বেশিরভাগ লোকেরা করেন।
— Noz
2
ওপিতে যেমন রেল সম্পর্কে জিজ্ঞাসা করা হচ্ছিল না তবে ... ব্যর্থতাযুক্ত জাভাস্ক্রিপ্টের মাধ্যমে এই জাতীয় হাইপারলিঙ্ক সংহত করার সময় রেলগুলি অবশ্যই একটি মুছে ফেলা পদ্ধতি ব্যবহার করে। যদি কেউ সরাসরি সেই লিঙ্কটির জন্য অনুরোধ করে তবে ডিফল্টটি হ'ল রেকর্ডটি উপস্থাপন করা হবে, এটি মুছবে না। : আরো বিস্তারিত জন্য এই উত্তরটি দেখুন stackoverflow.com/a/2809412/252290
— levous
এটি বিশেষত একটি অ্যাঙ্কর ট্যাগ নয়, জমা দেওয়ার বোতাম সম্পর্কে।
— পিক্সিলিথ
6

একটি উপায় আছে, কীভাবে (বুটস্ট্র্যাপের) গ্লাইফিকনগুলি পাবেন input type="submit"। CSS3 একাধিক পটভূমি ব্যবহার করে।

এইচটিএমএল:

<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প্রভাবের প্রয়োজন হয় তবে ব্যাকগ্রাউন্ডটি আবার একই ফর্মটিতে টাইপ করতে হবে।

— IIIC
সূত্র
এটি কার্যকর হতে পারে তবে এটি <বোতাম টাইপ = "জমা দিন"> ব্যবহারের মতো অবশ্যই মার্জিত নয় এবং বজায় রাখা আরও শক্ত হবে।
— রিচার্ড
4

আমি এটি কাজ করতে পেরেছি, তবে আমি এখনও সমাধান করি নি এমন কয়েকটি ক্যাভেট রয়েছে।

যাইহোক, এটি এভাবেই হয়:

আপনার গড় ইনপুট বোতামটি নিন:

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

গ্লাইফিকনস স্প্রাইট ফাইল থেকে আপনার জমা দেওয়া বোতামগুলির জন্য যে আইকনটি আপনি চান তা কেটে ফেলুন, নিশ্চিত করুন এটি 14x14 পিক্সের চিত্র image হ্যাঁ, আদর্শ পরিস্থিতিতে আপনি স্প্রিটটি পুনরায় ব্যবহার করতে পারেন, এবং যদি কেউ অনুমান করে যে এটি কীভাবে হয়েছে তা শুনে আমি খুশি হব। :-)

একবার এটি হয়ে গেলে আপনি নিজের ইনপুট বোতামটির জন্য সিএসএস লিখতে পারেন:

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 এ কাজ করে

আইই 9 তে কাজ করে না

tl; dr: কিছুটা CSS এর সাহায্যে আপনি স্বয়ংক্রিয়ভাবে আপনার জমা দেওয়া বোতামগুলিতে আইকনগুলি রাখতে পারেন, তবে আপনাকে আইকনটি একটি পৃথক ফাইলে রাখতে হবে এবং এটি ইন্টারনেট এক্সপ্লোরারে কাজ করবে না।

— Moeri
সূত্র
1

আমি মনে করি এটি আপনার সমস্যার সমাধান

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
— নবীন
সূত্র
1 

<!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>
স্নিপেট প্রসারিত করুন

— গণেশ পুট্টা
সূত্র
1
প্রশ্ন জমা দেওয়ার
— গ্রিগরি কিসলিন
এটি বুটস্ট্র্যাপ 3 - প্রশ্নটি বুটস্ট্র্যাপ 2 ফর্ম্যাট সম্পর্কিত ছিল যা আইকনগুলি প্রদর্শনের জন্য অন্য ফর্ম্যাট ব্যবহার করে।
— ক্যালেন
-1

আমি এই ভাল উপায় অনুমান, আমার জন্য ভাল কাজ করে।

<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>
— Livia
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.