Hiding Bootstrap behind another CSS (decoupling HTML from the page layout)

StackOverflow https://stackoverflow.com/questions/20470988

Pergunta

I've not found much online for this so perhaps I'm misunderstanding something about how Bootstrap should be used. I have used Bootstrap successfully to create responsive pages. For example a two-column layout:

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

But now imagine that I want to change this so that Column #1 is span4, and Column #2 is span8. For example a new customer comes on board and they want the site to have its own branded style. I do not want to clone the website and change the HTML. What I want to do is do it via CSS e.g.

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

and in the CSS:

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

Is this possible? Can I use LESS for this? One way I think it could be done is to copy the Bootstrap CSS and give different names to span8, span4 etc. and when a new customer comes on board we copy that CSS and change it, but I have a feeling this will get messy...

EDIT: Thanks to @Jahnux73 I managed to piece together the rest of what is required, which I've put below. My rep is not sufficient for me to answer my own question nor vote up that answer.

You have to get the full Bootstrap project and put the \less folder into your project. In \Content create a custom.less file. Add in the code

@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 the web.config to serve the file

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

And the 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>

Thanks again for confirming that I could use LESS for this.

Foi útil?

Solução

You can do this by using less yes, it's what they call mixins if I remember well.

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

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

.column1 {
    .custom-bootstrap-span8;
}

.column2 {
    .custom-bootstrap-span4;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top