Question

我正在使用bootstrap，目前整页是默认的白色背景。我想知道在bootstrap下使用移动设备时是否可以将背景颜色更改为灰色！比如“class =”col-sm-6“col-xs-6”......

有可能如何在jquery中编写该代码以自动将背景颜色更改为灰色时使用移动设备，如果使用桌面更改将背景颜色保持为白色默认设置。

Answer 1

这绝对是可能的，但根本不需要你使用jQuery。在CSS文件中，只需向这些类添加background属性 - 它可能类似于以下内容：

.col-xs-1, .col-xs-2, .col-xs-3,
.col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12 {
    background: #999;
}

.col-sm-1, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-10, .col-sm-11, .col-sm-12 {
    background: #fff;
}

或者，您可以使用媒体查询来更改特定大小的正文背景。例如，要仅在屏幕较小时使主体变灰，您可以使用：

body {
    background: #fff;
}

@media all and (max-width: 768px) {
    body {
        background: #999;
    }
}

Answer 2

使用jQuery：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // If they are using mobile device
    $("col-sm-6").css("background-color", "Grey");
} else {
    // If they are on a deskop
    $("col-sm-6").css("background-color", "White");
}

可以使用bootstrap更改背景颜色

2 个答案: