is possible to change background color using bootstrap

问题

I'm using bootstrap, and currently full page is white background as default. I was wondering if that possible to change background color to gray when using mobile under bootstrap! like "class="col-sm-6" col-xs-6"...

does is possible how to write that code in jquery to automatic to change background color to gray color when come to use mobile and if using desktop change stay background color to white as default.

回答1:

This is definitely possible, but doesn't require you to use jQuery at all. In a CSS file, simply add a background attribute to those classes - it might look something like the following:

.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;
}

Alternatively, you could use media queries to change the body background at certain sizes. For example, to make the body gray only when the screen in small, you could use:

body {
    background: #fff;
}

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

回答2:

Using 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");
}

来源：https://stackoverflow.com/questions/31731394/is-possible-to-change-background-color-using-bootstrap

标签

jquery

twitter-bootstrap

mobile

colors

background