Bootstrap 响应式图标 [英] Bootstrap responsive icons

问题描述

使用这个很棒的脚本 http://blueimp.github.io/jQuery-File-Upload/ 我看到了一个关于在响应式页面上调整图标大小的有趣功能.例如，当浏览器窗口打开(桌面)时，我有一个图标(开始和取消 + 图标)，并调整浏览器窗口(智能手机)的大小，我还有一个又短又小(只有图标).

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 :-(

推荐答案

希望我的理解正确，您希望在大屏幕上有带有图标和文本的响应式按钮"，而在小屏幕上只有图标.

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.

您可以通过带有媒体查询的简单 css 来实现.例如，如果您的 html 如下所示:

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;
    }

}

现在，如果浏览器窗口的宽度在 0px - 679px 之间，浏览器将不会显示按钮中的文本.

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

这篇关于Bootstrap 响应式图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！