Скрытие Bootstrap за другим CSS (развязка HTML из макета страницы)

Я не нашел много онлайн для этого, поэтому, возможно, я не понимаю, как использовать Bootstrap. Я успешно использовал Bootstrap для создания отзывчивых страниц. Например раскладка две колонки:Скрытие 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 Bootstrap и дать разные имена span8, span4 и т. Д., И когда новый клиент приходит на борт, мы копируем этот CSS и меняем его, но у меня такое чувство, что это будет беспорядочно ...

EDIT: Благодаря @ Jahnux73 Мне удалось собрать остальную часть того, что требуется, которое я поставил ниже. Моя репутация недостаточна для того, чтобы я мог ответить на свой вопрос и проголосовать за этот ответ.

Вы должны получить полный проект Bootstrap и поместить папку \ less в свой проект. В \ 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; 
}

Update в web.config, чтобы служить файл

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

И в HTML

@{ 
    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>

Еще раз спасибо за подтверждение того, что я мог бы использовать для этого МЕНЬШЕ.

источник

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

Скрытие Bootstrap за другим CSS (развязка HTML из макета страницы)

ответ

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