Twitter Bootstrap 2にボタンを送信するアイコンを追加します
https://stackoverflow.com/questions/9376192
-
28-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私のフォーム入力提出ボタンでTwitterブートストラップアイコンを使用したい。
例 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>
解決
入力の代わりにボタンタグを使用できます
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Sign in
</button>
他のヒント
この目的のためにラベルタグを使用できると思います。これは、Twitter Bootstrap HTML Navbarのサンプルです。
<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>
基本的に、入力のラベル要素（type =送信）を取得し、実際の入力送信を非表示にします。ユーザーは、ラベル要素をクリックして、フォームの送信を実行できます。
これを試してみるべきだと思います フォンテソン Twitter Bootstrapで使用するように設計されています。
<button class="btn btn-primary icon-save">Button With Icon</button>
u003Ca/>どこかにアイコンを追加して、Javascritアクションをフォームに送信することができます。必要に応じて、元の送信ボタンの名前+値の名前と値は、隠された属性にあることがあります。 JQueryでは簡単です。純粋なJavaScriptバージョンを避けてください。u003C/a>
これが元のフォームであると仮定します：
<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> Let me in
</a>
</form>
...そして魔法のjQuery：
$("#myFavoriteFormSubmitButton").bind('click', function(event) {
$("#myFavoriteForm").submit();
});
または、ユーザーがフォームをいつでも送信できるようにしたい場合（それは私が靴で行うことです - 通常の送信ボタンをフォームに残し、jquery .hide（）で非表示にすることができます。通常の送信ボタン（リンク、W3M、同様のブラウザーを使用している人がいる）に従ってJavaScriptとjQueryなしでログインが機能することを保証しますが、可能であればアイコンを含む派手なボタンを提供します。
ブートストラップ3でこれを行う新しい方法があります：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
それはにあります ブートストラップグリフィコン 「使い方」の下のページ：
Twitter Bootstrapアイコンを基本的なRailsフォームにしたいと思って、この投稿に出会いました。少し検索した後、私はそれをする簡単な方法を見つけました。 Railsを使用しているかどうかはわかりませんが、ここにコードがあります。重要なのは、ブロックをlink_toに渡すことでした。
<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
1つの方法があります。 input type="submit". 。 CSS3の複数の背景を使用します。
HTML：
<form class="form-search">
…
<input type="submit" value="Search">
</form>
およびCSS：
.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 効果、 バックグラウンド 再び同じフォームで入力する必要があります。
私はこれを機能させましたが、まだ解決していないいくつかの警告があります。
とにかく、これはそれがどのように行われるかです：
平均入力ボタンを取ります：
<input type="submit" class="btn btn-success" value="Save">
Glyphicons Spriteファイルの送信ボタンに必要なアイコンを切り取り、14x14 PX画像であることを確認してください。はい、理想的な状況では、スプライトを再利用することができます。誰かがそれを理解したら、それがどのように行われているかを聞いて喜んでいるでしょう。 :-)
それをしたら、このような入力ボタンのCSSを書くことができます。
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;
}
Firefox 14、Chrome 21で動作します
IE 9では機能しません
TL; DR：CSSを少し使用すると、送信ボタンにアイコンを自動的に配置できますが、アイコンを別のファイルに配置する必要がありますが、Internet Explorerでは機能しません。
あなたの問題の解決策だと思います
<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
<!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><div class="input-append">
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
私はこれがより良い方法であると思います、私にとってはうまくいきます。
<form name="myform">
<!-- form fields -->
<a href="#" class="btn btn-success" onclick="document.myform.submit();">
Submit <i class="icon-plus"></i> Icon
</a>
</form>
