如何使用JavaScript检测Twitter Bootstrap 3的响应断点?
2022-08-30 03:08:06
目前,Twitter Bootstrap 3具有以下响应断点:768px,992px和1200px,分别代表小型,中型和大型设备。
如何使用 JavaScript 检测这些断点?
我想用JavaScript收听屏幕更改时触发的所有相关事件。并且能够检测屏幕是否适用于小型,中型或大型设备。
有没有已经做了一些事情?你有什么建议?
目前,Twitter Bootstrap 3具有以下响应断点:768px,992px和1200px,分别代表小型,中型和大型设备。
如何使用 JavaScript 检测这些断点?
我想用JavaScript收听屏幕更改时触发的所有相关事件。并且能够检测屏幕是否适用于小型,中型或大型设备。
有没有已经做了一些事情?你有什么建议?
编辑:此库现在可通过 Bower 和 NPM 获得。有关详细信息,请参阅 github 存储库。
更新的答案:
免责声明:我是作者。
以下是您可以使用最新版本(响应式引导工具包 2.5.0)执行的一些操作:
// Wrap everything in an IIFE
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);
从版本2.3.0开始,您不需要下面提到的四个元素。<div>
原答:
我不认为你需要任何巨大的脚本或库。这是一项相当简单的任务。
在前面插入以下元素:</body>
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
这 4 个 div 允许您检查当前活动的断点。要进行简单的JS检测,请使用以下函数:
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}
现在,要仅对最小的断点执行某个操作,可以使用:
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
在 DOM 准备就绪后检测更改也相当简单。您所需要的只是一个轻量级的窗口大小调整监听器,如下所示:
var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();
var fullDateString = new Date();
配备它后,可以开始侦听更改并执行特定于断点的函数,如下所示:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
}, 300, fullDateString.getTime())
});
如果您没有特定需求,可以执行以下操作:
if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
}
else {
// do something for huge screens
}
编辑:我不明白为什么你应该使用另一个js库,因为你可以用已经包含在Bootstrap项目中的jQuery来做到这一点。