css - 将 Bootstrap 隐藏在另一个 CSS 后面(将 HTML 与页面布局解耦)

我在网上找不到太多这方面的资料，所以我可能对应该如何使用 Bootstrap 有一些误解。我已经成功地使用 Bootstrap 来创建响应式页面。例如两列布局:

<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 吗？我认为可以做到的一种方法是复制 Bootstrap CSS 并为 span8、span4 等赋予不同的名称，当新客户加入时，我们复制该 CSS 并对其进行更改，但我觉得这会变得困惑。 ..

编辑: 感谢@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;
}

更新 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>

再次感谢您确认我可以为此使用 LESS。

最佳答案

你可以通过使用 less 来做到这一点，是的，如果我没记错的话，这就是他们所说的 mixins。

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

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

.column1 {
    .custom-bootstrap-span8;
}

.column2 {
    .custom-bootstrap-span4;
}

关于css - 将 Bootstrap 隐藏在另一个 CSS 后面(将 HTML 与页面布局解耦)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20470988/

css - 将 Bootstrap 隐藏在另一个 CSS 后面(将 HTML 与页面布局解耦)

上一篇：html - 创建模态？

下一篇：javascript - 更改页面 Javascript 时保持链接样式