Twitter Bootstrap 的垂直节奏答案

【问题标题】：Vertical rhythm for Twitter's BootstrapTwitter Bootstrap 的垂直节奏
【发布时间】：2012-03-17 15:30:07
【问题描述】：

是否有任何现有的插件/扩展/方法来保持 Twitter 的 Bootstrap 项目的垂直节奏？

创建好的垂直节奏模板是一项相当费力的任务，我宁愿使用预烘焙的解决方案。我愿意接受创造性的建议，我只是希望我的页面最终能很好地对齐。

编辑：澄清我所追求的......

垂直节奏是一种用于确保页面上的每个元素都按照水平网格排列的技术。这是通过将每个项目的高度、填充和边距设置为符合标准单位行大小来实现的。如果段落中的一行文本是 20px 高（包括边距和填充），那么标题 4 也可能是 20px 高，而标题 1 可能是 40px 高。这样可以保持跨栏文本的节奏。

我想将此技术与 bootstrap 结合使用（来自 twitter），但要让一切看起来都很好，需要做很多工作。例如，所有按钮都需要符合与段落文本等相同的垂直高度定义......引导程序中使用了其他标准控件，它们也都需要规则来适当地定义它们的高度。

我可以从垂直节奏的通用解决方案开始，这对于实现我想要的目标大有帮助，但我想知道是否有其他人已经开始这样做，或者对实现这一目标的其他方法有任何想法。

编辑：假设没有什么像我想要的......

也许只是一个好的基于垂直节奏的 css 模板将是一个很好的起点。最好是正在继续开发、已经可用、经过深思熟虑和适应性强的东西。

【问题讨论】：

事实上，尽管您有赏金，但没有人回答。你的问题太不具体了。您需要提供更多信息：您要达到什么目的？到目前为止你做了什么？等等。
我不认为“垂直节奏模板”是一个行业术语，所以没人知道你在说什么。
我认为人们无法理解您在寻找什么......
一些关于 OP 正在谈论的信息：Add and delete vertical space in measured intervals 和 CSS with vertical rhythm。至于剥皮 Bootstrap（我现在也在使用它），在你尝试之前你不会知道它有多么困难。然后你可以打包并发布它，以便其他人也可以使用它。 :)
我才意识到最近没有人问这个问题。所以@BillyMoon，你有没有想出任何办法？

标签： css twitter-bootstrap vertical-rhythm

【解决方案1】：

由于没有人按照您的建议链接到实际的垂直节奏样板，因此我采用了我使用的那个，对其进行了评论，并在此处为它创建了一个 github 存储库https://github.com/jonschlinkert/vertical-rhythm

正如自述文件中所说，这是您自己项目的起点。

【讨论】：

【解决方案2】：

我想你所追求的已经被理解了。问题是：您正在寻找一维的网格模式（根据例如比例线高设置的“垂直节奏”......从某种意义上说，它沿着给定页面测量和对齐事物Y 轴）...但是以这种方式做事可能与 Bootstrap 预先存在的 12 列网格系统（相反，它沿着页面的 X 轴测量和对齐事物）不一致。您想“比例化”框架中每个“行”的高度。但是：请记住，Bootstrap 的设计不仅旨在通过列促进比例性，只是为了看起来不错，而且还使页面响应--即允许页面元素垂直“流动”彼此，并流畅地嵌套。而且，从这个意义上说，可能已经考虑了与沿 Y 轴测量的元素高度有关的问题......我记得基本 CSS 文件中的大多数印刷元素都有成比例的 em 大小，和/或同样成比例的顶部和底部填充等。一般来说，事情并不是那么随意，以至于框架需要以您正在考虑的方式进行额外的样式设置。

即便如此：Bootstrap 的基本 CSS 文件并没有那么庞大，以至于您不可能自己调整各种元素类和 ID 的高度而没有太多麻烦。无论如何，您不太可能真的需要对每个样式元素都这样做，对吗？事实上，作为一个框架，Bootstrap 包含许多元素的样式，这些元素甚至可能不在您为其设计前端的应用程序中。（示例：您的应用程序有下拉菜单吗？很好。您可以设置下拉菜单的“垂直节奏”。但是：您是否也在导航栏中使用药丸或标签？没有药丸，你说？好吧，你可以只需删除样式表中的几百行代码，就可以省去将“垂直节奏”应用于那些不需要的元素的工作。）否则，对于保留的元素以及您执行中的元素事实上需要，只需使用文本编辑器查找 - 替换行高、顶部和底部填充、边距、字体大小等的值......并测试它。作为一个 CSS 框架，Bootstrap 的布局非常清晰；相关元素被很好地排序，并且大部分都在样式表的代码中组合在一起。完成基本 CSS 文件的调整后，只需缩小修改后的样式表...以替换预先存在的缩小版本...或者，如果您想优化，也许只需从 CloudFront 提供它。

【讨论】：

男人。这些就是那些单一的段落。我们确定格鲁鲁恩的秘密没有隐藏在这些象形文字中吗？简而言之，请把你的段落再分解一下。

【解决方案3】：

Compass CSS Authoring Framework 明确支持基于vertical rhythm 的排版。对于初学者，您可以查看这个简短的video tutorial。

【讨论】：

【解决方案4】：

您看过 Square Grid CSS 框架吗？

http://thesquaregrid.com/

为设计人员和开发人员设计的简单 CSS 框架，基于 35 等宽列。它旨在减少开发时间并帮助您可以创建结构精美的网站。

Square Grid 提供标准的水平网格，但它也保持垂直网格，使用 28 像素的标准“正方形”。它实际上只是一个网格，而不是像 Bootstrap 那样的完整 CSS 库（即没有按钮、菜单等）。

我曾经做过一个项目，发现它非常直观，但我最终认为跟踪垂直和水平网格对我来说太难了，尤其是在考虑响应式设计时。

您可以将两者结合起来，或者至少看看方形网格源代码，它是非常简单的 CSS，以了解如何调整 Bootstrap 以满足您的需求。

【讨论】：

compass + susy 也支持垂直节奏