Wie man reagierende Knöpfe im Bootstrap macht?

Question

Ich habe den folgenden Code für eine Schaltfläche Bootstrap mit:

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

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

</button> 

Ich mag die Suche Supplies Inhalt nur Suche für mobile Benutzer ändern, wenn die Größenänderung. Wie würde ich dies mit jQuery und Bootstrap erreichen?

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

Answer 1

denke ich Put12co22mer2 Lösung gut funktionieren wird. Aber, wenn Sie eine bestimmte Bildschirmgröße einzustellen, bei dem die "Lieferungen" Teil ausfällt, Verwendung CSS wie folgt aus:

CSS

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

    #supplies { 

     display:none; 

    }  

} 

Und 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

Sie jQuery nicht brauchen:

Ihr Wort mit hidden-xs Klasse in einer Spanne wickeln gerade

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

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

    </button>