为语义标记调整 Bootstrap 2.0

Posted 2023-03-06

【中文标题】为语义标记调整 Bootstrap 2.0

【英文标题】：Tweaking Bootstrap 2.0 for Semantic Markup

【发布时间】：2012-02-23 19:17:02

【问题描述】：

今天发布了 Twitters“Bootstrap”UI 框架的第 2 版。虽然我觉得它很方便，但我不喜欢它的非语义性。

我宁愿避免在我的 html 中设置像 .span6 .table-striped 这样的类。

由于 Bootstrap 是基于 less 构建的，我期待有一种好方法可以使用特定于项目的 less 工作表，该工作表可以利用 mixins 将引导程序定义的优点归因于良好的语义类名称。

我将 bootstrap.less 克隆到 myproject.less 中，并调整了 @import 行中的路径，然后在底部添加了以下内容：

#call-to-action 
    .span6;

但是lessc对此感到窒息，并抱怨说：

.span6 is undefined in

同样，尝试 .columns(6) 会产生同样的错误（“.columns 未定义”）。

其他混合，如 .table、.table-bordered 等，似乎工作正常。

我错过了什么？使用引导程序同时将非语义类名排除在我漂亮的语义标记之外的最佳实践是什么？

【问题讨论】：

我确切地知道您对添加“非语义类”的感受，但如果您使用的是 Bootstrap，您应该接受它并在您的 HTML 中添加所需的类。与之抗争非常耗时。

它到底说了什么？也许您需要.span6;，或者我所做的是使用定义.span6 的mixin，我相信它是.gridColumn(); 和.columns(x);。

@JonathanOng - 这听起来很有希望，我明天会检查。我得到的错误是“.span8 is undefined in ...”——即使包含分号，我也会得到。

您是否将自定义项放在所有 bootstrap 的 less 文件之后？

这方面有什么进展吗？我喜欢 bootstrap 的功能......但我不能让自己像这样小我的 html。

【参考方案1】：

这是一篇在 git 中引用 gist 的文章。

本文试图更进一步 - 解决当您将类移出页面时，Bootstrap 中的默认响应机制丢失的问题。

Bootstrap with Less

它使用自定义 mixin 来尝试为不同的断点页面宽度创建类。

我想在这里发表我的意见，但我还没有完全确定它是什么：-/

【参考方案2】：

不同意您应该“放弃”和“以简单的方式去做”的回答——在标记中操作类不是简单的方式。例如：在手机上查看你的网站时，class="span4"是什么？

我使用https://github.com/vwall/compass-twitter-bootstrap，因为它似乎是 Twitter Bootstrap 到 Sass 的最频繁更新的端口。

这个库很棒，因为它带有前缀以避免 mixin 名称冲突。它很容易用于原型设计，然后您就可以快速摆脱它——就像 bootstrap 本来就是要使用的一样。

【参考方案3】：

我正在使用带有@extend 功能的https://github.com/thomas-mcdonald/bootstrap-sass。 但效果很糟糕:-(

.my-top 
    @extend .span4;

.left-top 
    @extend .span4;

.right-top 
    @extned .span4;

它甚至没有排成一排......

===

哦！我在这个页面找到了我的答案：How to use twitter bootstrap with bootstrap-sass in rails app?

【参考方案4】：

Less 提供 mixins，这意味着如果您使用 Less 而不是 CSS 编写样式表，您可以在样式表中而不是 HTML 中包含 Bootstrap 类。

Please stop embedding Bootstrap classes in your HTML!

【参考方案5】：

对于新的 Bootstrap 2.1（可能适用于 2.0）：

.content .makeRow();
   .main-content .makeColumn(5,2); // (size,offset)
   .sidebar .makeColumn(3); 

终于成功了！

【讨论】：

5+2+3 不应该等于 12 吗？

【参考方案6】：

什么对我有用：创建一个 .less 文件。

转到https://github.com/twitter/bootstrap/blob/master/less/mixins.less 并将.span*、.row、.offset* 等复制到您创建的文件中。然后像这样使用：

myfile.css.less:

...<snip>...
.span5  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); 
...<snip>...
.offset11  #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); 
...<snip>...

#page_footer 
    .about 
      .span4;
      .offset10;
    

【参考方案7】：

好吧，这就是我想出来的。这是我能做的最好的事情，我不知道如何在语义上处理 .row ，但是哦，好吧。

基本上我创建了一个 custom-mixins.less 并创建了一个名为 .col 的 mixin，变量是 @col。因此，当您编写选择器并执行类似 .col(3); 之类的操作时.col(4); .col(5);或类似的东西。它应该创建适当的宽度。我不知道这将如何用于嵌套列。

//custom-mixins.less
.col (@col) 
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);


//styles.less
.greetings 
  .col(3);

lessc 会在styles.css 中生成以下内容

//styles.css
.greetings 
  float: left;
  margin-left: 20px;
  width: 220px;

【讨论】：

谢谢，我忘记了我问过这个问题，我自己也想出了相同的解决方案，一直到“我不知道如何处理 'row'”位。

优秀的解决方案，它也适用于流体网格吗？谢谢！

2.1+ 允许您使用 .makeRow() 和 .makeColumn(columns, offset);我认为这是首选路线。

【参考方案8】：

如果你使用 Rails，你可以使用 sass-bootstrap，然后你可以使用 mixins

【讨论】：

那么你依赖于另一件事，并希望原始引导程序中的新功能和错误修复能够在 sass 版本推出时实现。