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之间，浏览器将不会显示按钮中的文本。

Bootstrap响应图标

1 个答案: