2017-10-31 11 views
-1

ブートストラップを使用してカスタムボタンを作成する方法を教えてください。 Get Quoteボタンには左に虫めがね記号が表示されている必要があります。同様に、クリアボタンには、次の図に示すように、シンボルが左に表示されている必要があります。また、Get Quoteボタンの色を変更して、それを空色に変更する方法。Bootstrapを使用してカスタムボタンを作成する方法は?

取得見積もりとクリアボタン付きの画像:ブートストラップ4では

enter image description here

答えて

4

、彼らdropped the Glyphicon icons。あなたは使用することができます。

の上流のバージョンは、あなたがhttp://fontawesome.io/examples/をチェックアウトすることができた例が与えられているとフォント恐ろしいアイコンを統合しますブートストラップ3ボタン。同様に、ブートストラップ4のボタンで行うことができます。提供されているコードスニペットを確認してください。

また、ボタンの色をavailable optionsから離れたカスタム色に変更するには、明らかにCSSを変更する必要があります。より良い方法は、ソースのSASSファイルを調べ、ミックスインを使用して新しいカスタムボタンを生成することです。いくつかのアイデアを取得するには、以下のリンクをチェックアウト:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 
<a class="btn btn-info" href="#"> 
 
<i class="fa fa-search"></i> Get Quote 
 
</a> 
 
<a class="btn btn-secondary" href="#"> 
 
<i class="fa fa-refresh"></i> Clear 
 
</a>

0

両方新鮮で経験を積んだ人に便利な、このウェブサイトを、試してみてください。ニースのチュートリアル。

https://www.w3schools.com/bootstrap/bootstrap_buttons.asp 
関連する問題