在twitter引導中分配背景顏色3

我試圖理解引導程序，我在http://getbootstrap.com/css/#less-variables的腳手架部分閱讀了文檔。在twitter引導中分配背景顏色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>

來源

2014-09-02 Daniel YC Lin

如果使用內嵌樣式，你應該設置身體背景色CSS：

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

更好的解決方案是使用引導定製這個page或預處理器類似薩斯以下。

來源

2014-09-02 08:18:41 neilhem

如果由於某種原因，此解決方案不適合您，請在'background' /'background-color'末尾添加'！important'標籤，以確保它覆蓋引導程序的默認值。 – ProDexorite 2014-09-02 08:26:15

我喜歡鏈接頁面中的自定義方法，通過LESS構建更容易。但它也有它的弱點，我不能保持在我的git倉庫中的變化。 – 2014-09-02 08:49:44

問題很簡單，你要重新定義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的文件，但是當你編譯你的LESS到CSS將只產生十六進制顏色。

來源

2014-09-02 08:21:16

你試圖把更少的變量放入CSS，這是不可能的。

引導更少的文件轉換爲CSS代碼，例如：

少：

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

轉換爲CSS代碼：

body{ 
background: #fff; 
}

所以，如果你想改變你的背景顏色你必須改變@ body-bg：#fff;在bootstrap less文件中，或覆蓋樣式表中的css。

來源

2014-09-02 08:27:50

在twitter引導中分配背景顏色3

回答

相關問題