Bootstrap responsive icons

问题

Using this great script http://blueimp.github.io/jQuery-File-Upload/ I saw an interesting function regarding the resizing of icons on a responsive page. For example, with the browser window open wide (desktop) i have an icon (Start and Cancel + icons), and resizing the browser window (smartphone) i have another one short and small (only icons).

How can I achieve this effect? I did not find any tutorial on the net that talks about

I'm sorry i can't post an image for example because i don't have enough reputation :-(

回答1:

Hoping that I understand you correctly, you would like to have responsive "Buttons" with icons and text on large screens and only icons on smaller screensizes.

You could do it by a simple css with media query. For example if your html looks like this:

<button class="btn btn-primary start" type="submit">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>
<button class="btn btn-warning cancel" type="reset">
    <i class="glyphicon glyphicon-ban-circle"></i>
    <span>Cancel upload</span>
</button>

you could make a ccs rule like:

@media only screen and (min-width: 0px) and (max-width: 679px) {

    .btn span
    {
        display: none;
    }

}

now the browser will not show the text in the button if the width of your browserwindow is between 0px - 679px.

来源：https://stackoverflow.com/questions/18853182/bootstrap-responsive-icons