隱藏引導後面的另一CSS（從頁面佈局脫鉤HTML）

我還沒有發現在網上很多這種所以也許我誤解一些有關引導應該如何使用。我已成功使用Bootstrap來創建響應式頁面。例如，一個兩欄佈局：隱藏引導後面的另一CSS（從頁面佈局脫鉤HTML）

<div class="span8">Column #1 text</div> 
<div class="span4">Column #2 text</div>

但現在想象，我想改變這種做法，列＃1 span4，以及列＃2是span8。例如，一位新客戶加入，他們希望網站擁有自己的品牌風格。我做不是想克隆網站並更改HTML。我想要做的是通過CSS來完成，例如

<div class="column1">Column #1 text</div> 
<div class="column2">Column #2 text</div>

，並在CSS：

.column1 { /* Set to Bootstrap span8 */ 
} 
.column2 { /* Set to Bootstrap span4 */ 
}

這可能嗎？我可以使用LESS嗎？一種方式，我認爲這是可以做到的複製引導CSS，並給予不同的名稱span8，span4等，當一個新的客戶來到船上，我們複製CSS和改變它，但我有一種感覺，這將導致混亂...

編輯：感謝@ Jahnux73我設法將所需的其餘部分拼湊在一起，這些我已經在下面提到。我的代表不足以回答我自己的問題，也沒有投票回答這個問題。

你必須得到充分的引導項目，並把\文件夾中少到你的項目。在\ Content中創建一個custom.less文件。添加代碼

@import "../less/bootstrap.less"; 
section { 
.make-row(); 
} 
.custom-bootstrap-span8(){ 
.make-sm-column(8); 
} 
.custom-bootstrap-span4(){ 
.make-sm-column(4); 
} 
.column1 { 
.custom-bootstrap-span8; 
} 
.column2 { 
.custom-bootstrap-span4; 
}

更新web.config中再次

@{ 
    Layout = null; 
} 

<html> 
<head> 
<link rel="stylesheet/less" href="../../Content/custom.less"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script> 
</head> 
<body> 
    <section> 
    <div class="column1"> 
     <h2>Heading</h2> 
     <p>Text #1</p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="column2"> 
     <h2>Heading</h2> 
     <p>Text #2</p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
     </section> 
    </body> 
</html>

由於提供服務的文件

<system.webServer> 
    <staticContent> 
    <mimeMap fileExtension=".less" mimeType="text/css" /> 
    </staticContent > 
</system.webServer>

和HTML確認，我可以用這個LESS。

來源

2013-12-09 VictorySaber

你可以通過使用較少的是，這是他們所謂的mixins，如果我沒記錯的話。

.custom-bootstrap-span8(){ 
    .span8; 
} 

.custom-bootstrap-span4(){ 
    .span4 
} 

.column1 { 
    .custom-bootstrap-span8; 
} 

.column2 { 
    .custom-bootstrap-span4; 
}

來源

2013-12-09 12:49:38 pbenard

隱藏引導後面的另一CSS（從頁面佈局脫鉤HTML）

回答

相關問題