2014-09-02 2 views
0

Я пытаюсь понять бутстрап, я прочитал документ в разделе «Леса» http://getbootstrap.com/css/#less-variables.назначить цвет фона в twitter bootstrap 3

Вот мой упрощенный код, и он НЕ МОЖЕТ работать.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" /> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" /> 
    <![endif]--> 
    <style type="text/css"> 
@body-bg: #fff; 
@text-color: @black-50; 
    </style> 
    </head> 
<body> 
hi 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" /> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" /> 
</body> 
</html> 

ответ

1

Если вы используете встроенные стили вы должны установить тело цвета фона в CSS:

<style type="text/css"> 
    body { 
    background-color: #fff; 
    color: #000; 
    } 
</style> 

Лучше решение использовать самозагрузки настроить на этом page или препроцессорах как Sass или меньше.

+0

И если по какой-либо причине это решение не работает для вас, добавьте тег '! Important' в конец' background'/'background-color', чтобы убедиться, что он переопределяет значение начальной загрузки. – ProDexorite

+0

Мне нравится метод настройки на странице ссылок, это проще, чем строить с помощью LESS. Но у него также есть своя слабость, я не могу сохранить изменения в моем репозитории git. –

1

Проблема проста, вы пытаетесь переопределить LESS переменные, вы должны сделать это в styles.less, например, и оттуда вы можете сделать что-то вроде:

@import "bootstrap"; 

//redefine the bootstrap variables or define your own 
@body-bg: #fff; 

//@black-50; have to be previously defined since is 
//not a bootstrap variable 
@text-color: @black-50; 
//Now you can do this 
body{ 
    background-color: @body-bg; //You can scape this since bootstrap 
           //will do it for you in _scaffolding.less 

    color: @black-50; 
} 

Это переменные будут работать в ваши файлы LESS s, но при компиляции вашего LESS в CSS будут генерироваться только шестнадцатеричные цвета.

1

Вы пытаетесь поместить меньше переменных в css, что невозможно.

Bootstrap преобразует меньше файлов в CSS код, например:

меньше:

@body-bg: #fff; 
body{ 
background: @body-bg; 
} 

преобразует в код CSS:

body{ 
background: #fff; 
} 

Так что, если вы хотите изменить свой Б.Г. цвет Вы изменить @ body-bg: #fff; в bootstrap меньше файла или перезаписать css в вашей таблице стилей.

Смежные вопросы