pulsante Cambia il testo automaticamente quando lo schermo viene ridimensionata con Bootstrap 3

Question

considerare questo codice:

HTML

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i> Add New Item</button> 
</div> 

CSS

@media only screen and (max-width: 767px) { 
    button { 
     content: '<i class="fa fa-plus"></i>'; 
    } 
} 

Se si ridimensiona lo schermo orizzontalmente , ad un certo momento il testo uscirà dal pulsante.

Desidero sapere se è possibile modificare automaticamente il testo del pulsante quando viene ridimensionata la schermata orizzontale. Qualcosa come "+ Aggiungi nuovo elemento" solo al segnale più "+" nei dispositivi di piccole dimensioni.

Sono un po 'noob con le query sui media, quindi penso che mi manchi qualcosa o sbaglio.

Qualcuno può aiutarmi?

Ho fatto questo fiddle per esso.

Answer 1

Prova questa demo di lavoro: JSFiddle.

Aggiungere una classe al testo del pulsante, impostare display:none quando le dimensioni dello schermo è abbastanza piccolo:

<button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i> 
    <span class="button-text">Add New Item</span> 
</button> 

e CSS:

@media screen and (max-width: 300px) { 
    .button-text { 
     display: none; 
    } 
} 

Suggerimento: non mettere mai la struttura DOM o informazioni privilegiate stili CSS . È difficile da mantenere.

Answer 2

Ho fatto un violino mostrando e nascondendo 2 pulsanti diversi che forse non è il modo migliore, ma hey, funziona.

http://jsfiddle.net/xo9xkv05/

HTML

<div class="less"> 
    <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button> 
</div> 
<div class="more"> 
    <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button> 
</div> 

CSS

.less { 
    display:none; 
} 
@media (max-width: 300px) { 
    .less { 
     display:block; 
    } 
    .more { 
     display:none; 
    } 
} 

Answer 3

basta creare un altro media query (nel punto in cui si ritiene che il testo dovrebbe cambiare), e nascondere il testo all'interno del pulsante. Invece di posizionare il pulsante dove è ora, incapsulalo in un <span>, quindi scrivi del CSS per impostare display su none quando la pagina diventa più piccola di x pixel.

HTML

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i><span>Add New Item</span></button> 
</div> 

CSS

@media only screen and (max-width: <change this value>) { 
    button span { 
     display: none; 
    } 
} 

---

Tuttavia, credo che questo dovrebbe essere risolto con jQuery poiché non v'è alcun modo per garantire che questo sta andando lavorare se si posiziona il pulsante in altri posti. Dovresti provare a vedere se il contenuto del pulsante è più largo della larghezza del pulsante stesso, quindi aggiungere una classe 'invisibile' di conseguenza

Ho modificato il tuo jsfiddle un po ', comunque, jQuery sembra essere un po' buggato su questo (provare a stampare i valori che sto usando nella funzione)

https://jsfiddle.net/ogt84jds/1/

Answer 4

Si potrebbe fare questo senza l'aggiunta di media query o CSS aggiuntive utilizzando il costruito nel utilità reattive all'interno di Bootstrap:

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button> 
</div> 

Si aggiunge un po 'più di markup HTML, ma i dati in più o è in corso nel HTML o nel CSS, quindi qualunque sia la soluzione migliore per te.

Answer 5

Se si utilizza Bootstrap, è semplice come fare il furto in due classi.

hidden-sm e hidden-xschiudere l'elemento quando la larghezza dello schermo è media o piccola, rispettivamente.

Così semplicemente, vuoi essere nascosto quando lo schermo è piccolo, basta applicare quelle classi!

Esempio:

<button class="btn btn-primary"> 
    <span class="glyphicon glyphicon-person"></span> 
    <span class="hidden-xs hidden-sm">Profile</span> 
</button>