ブートストラップで反応性の高いボタンを作成する方法は？

Question

私は、ブートストラップを使用してボタンの次のコードを持っている：

<button type="button" class="btn btn-primary btn-sm"> 

    <span class="glyphicon glyphicon-search"></span> Search Supplies 

</button> 

私はリサイズ時にモバイルユーザーのためだけ検索に変更する検索用品コンテンツをしたいと思います。どのようにjQueryとBootstrapを使ってこれを達成できますか？

Here's a jsbin of what I have so far。

Answer 1

でスパンであなたの言葉を包む私はPut12co22mer2のソリューションが正常に動作すると思います。しかし、あなたは "消耗品" の部分が脱落した時に特定の画面サイズ、このような使用のCSS設定する場合：

CSS

@media (max-width:/* Your specific width here */) { 

    #supplies { 

     display:none; 

    }  

} 

そしてこのHTML：

HTMLを

<button type="button" class="btn btn-primary btn-sm"> 

<span class="glyphicon glyphicon-search"></span>  
Search <span id="supplies">Supplies</span> 

</button> 

Answer 2

のjQueryを必要としないでください：

だけhidden-xsクラス

<button type="button" class="btn btn-primary btn-sm"> 

    <span class="glyphicon glyphicon-search"></span> Search <span class="hidden-xs">Supplies</span> 

    </button>