可以使用 bootstrap 更改背景颜色

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 只在屏幕小的时候变灰，你可以使用：

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 更改背景颜色

is possible to change background color using bootstrap

mobile

jquery

background

colors

twitter-bootstrap