jquery - Bootstrap 响应式图标

Question

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

我怎样才能达到这个效果？我没有在网上找到任何关于

对不起，我不能发布图片，因为我没有足够的声誉:-(

Answer 1

希望我对您的理解正确，您希望在大屏幕上使用带有图标和文本的响应式“按钮”，而在较小的屏幕尺寸上只有图标。

您可以通过带有媒体查询的简单 css 来完成。例如，如果您的 html 如下所示：

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

你可以制定一个 ccs 规则，如：

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

    .btn span
    {
        display: none;
    }

}

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