README

检查当前 bootstrap 3 断点的可见性。

为什么还需要为 bootstrap 3 添加另一个断点检查器？

我创建这个插件是出于简单的原因

• 我需要一种可以工作并且容易集成到现有项目（在我的日常工作中）的东西
• 我不想在每个项目中都编写新代码。插件仓库通常很稳定
• Bootstrap 没有为这个提供自己的 JavaScript API
• 我玩得很开心^^

安装

您可以手动下载插件或使用 composer 安装。...该插件需要 jQuery。; jQuery 必须正确集成到页面中。

通过 Composer 安装（推荐用于 PHP 项目）

如果您没有Composer，您可以通过访问getcomposer.org上的说明进行安装。

然后您可以使用以下命令安装软件包

php composer.phar require --prefer-dist cakebake/jquery-breakpoint-check "*"

或将

"cakebake/jquery-breakpoint-check": "*"

添加到您的 composer.json 文件的 require 部分，并运行 php composer.phar update。

手动安装

下载

• 当前 Master 分支
• 最新发布

在包含 jQuery 之后，从 js 文件夹中选择两个 JavaScript 文件之一。对于生产项目，您可以使用 jquery-breakpoint-check.min.js 版本。更多详细信息请参阅 test.html 文件。

示例

<script src="js/jquery-breakpoint-check.min.js"></script>

用法

当前屏幕分辨率是否为 xs 断点？

if ($.isXs()) {
    alert('Is xs breakpoint :)');
}

当前屏幕分辨率是否为 sm 断点？

if ($.isSm()) {
    alert('Is sm breakpoint :)');
}

当前屏幕分辨率是否为 md 断点？

if ($.isMd()) {
    alert('Is md :)');
}

当前屏幕分辨率是否为 lg 断点？

if ($.isLg()) {
    alert('Is lg breakpoint :)');
}

当前屏幕分辨率是否为 custom 断点？

为您的自定义断点创建一个具有可见性的 CSS 类。例如

.visible-grid-float-breakpoint {
    @media (min-width: @grid-float-breakpoint-max) {
        display: none;
        visibility: hidden;
    }
}

if ($.isBreakpoint('grid-float-breakpoint')) {
    alert('It is my custom breakpoint :)');
}

在屏幕尺寸变化时检查当前断点。

$(window).resize(function () {
    if ($.isXs()) {
        alert('Is xs breakpoint :)');
    } else if ($.isSm()) {
        alert('Is sm breakpoint :)');
    } else if ($.isMd()) {
        alert('Is md :)');
    } else if ($.isLg()) {
        alert('Is lg breakpoint :)');
    }
}).resize();

在 xs 和 lg 断点处隐藏 div。

$(window).resize(function () {
    var selector = $("div.selector");
    if ($.isXs() || $.isLg()) {
        selector.hide();
    } else {
        selector.hide();
    }
}).resize();

版权和许可证

版权（C）Jens A.（cakebake）

在MIT 许可证下发布